Twitter bootstrap dropdown goes outside the screen

Dealing with dynamic menus

Adaptive alignment via CSS

For menus with dynamic content, CSS is the savior, offering adaptability where static classes may fail. You can wield the right and left properties to auto-adjust the dropdown's position according to its distance from the viewport edges.

.dropdown-menu {
  transform: translate3d(-100%, 0, 0);  // The magic wand of staying in screen bounds
}


This strategy keeps the dropdown within the visual vista, foregrounding user experience by eliminating off-screen menu items.

Assuring responsive behavior

For universally harmonious relations across various devices, it's prudent to test your dropdowns on multiple screen sizes. Media queries can come in handy here, repositioning or reshaping your dropdown based on the available screen real estate.

Catering to specific scenarios

Sometimes, menus are hierarchically complex with multiple levels. In such instances, nested ul and li elements coupled with Bootstrap hierarchy classes can come to the rescue. Make sure interactive elements like data-toggle attributes are well in place for proper dropdown engagement.

Custom class overrides

Override bootstrap classes using custom CSS

If non-dynamic menus require a specific position, creating a custom class and manually applying it to ul.dropdown-menu gives you more leverage over the menu's position.

.dropdown-menu-custom-override {
  right: 0;  // Right alignment, as right as rain!
  left: auto; // The "not-my-problem" left value
}


Keeping dropdowns within viewport using viewport-relative units

Using viewport-relative units (i.e., vw, vh) in your CSS ensures that the dropdown is always visible and respects the viewport dimensions.

.dropdown-menu {
  max-height: 50vh; // Keeping the height in check. No growth spurts here!
  overflow-y: auto; // If things pile up, let them scroll!
}


Ensuring proper behavior across platforms

Ensure your spelling-bee-winning solution works not just on desktop browsers but also on mobile devices. Mobile browsers come with their quirks (cough Safari cough), making cross-device compatibility a crucial checkpoint. Have device agnostic solutions.