Buttons

How it works

Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive. Below is an example and an in-depth look at how the grid comes together.


New to or unfamiliar with flexbox? for background, terminology, guidelines, and code snippets.

One of three columns One of three columns One of three columns

The above example creates three equal-width columns on small, medium, large, and extra large devices using our predefined grid classes. Those columns are centered in the page with the parent .

Breaking it down, here’s how it works:

  • Containers provide a means to center and horizontally pad your site’s contents. Use for a responsive pixel width or for across all viewport and device sizes.
  • Rows are wrappers for columns. Each column has horizontal (called a gutter) for controlling the space between them. This is then counteracted on the rows with negative margins. This way, all the content in your columns is visually aligned down the left side.
  • In a grid layout, content must be placed within columns and only columns may be immediate children of rows.
  • Thanks to flexbox, grid columns without a specified will automatically layout as equal width columns. For example, four instances of will each automatically be 25% wide from the small breakpoint and up. See the section for more examples.
  • Column classes indicate the number of columns you’d like to use out of the possible 12 per row. So, if you want three equal-width columns across, you can use .
  • Column s are set in percentages, so they’re always fluid and sized relative to their parent element.
  • Columns have horizontal to create the gutters between individual columns, however, you can remove the from rows and from columns with on the .
  • To make the grid responsive, there are five grid breakpoints, one for each : all breakpoints (extra small), small, medium, large, and extra large.
  • Grid breakpoints are based on minimum width media queries, meaning they apply to that one breakpoint and all those above it (e.g., applies to small, medium, large, and extra large devices, but not the first breakpoint).
  • You can use predefined grid classes (like ) or for more semantic markup.

Be aware of the limitations and bugs around flexbox, like the .

Examples

Wrap the dropdown’s toggle (your button or link) and the dropdown menu within , or another element that declares . Dropdowns can be triggered from or elements to better fit your potential needs.

Single button

Any single can be turned into a dropdown toggle with some markup changes. Here’s how you can put them to work with either elements:

Dropdown button

And with elements:

The best part is you can do this with any button variant, too:

Primary

Secondary

Success

Info

Warning

Danger

Split button

Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of for proper spacing around the dropdown caret.

We use this extra class to reduce the horizontal on either side of the caret by 25% and remove the that’s added for regular button dropdowns. Those extra changes keep the caret centered in the split button and provide a more appropriately sized hit area next to the main button.

Primary Toggle Dropdown

Secondary Toggle Dropdown

Success Toggle Dropdown

Info Toggle Dropdown

Warning Toggle Dropdown

Danger Toggle Dropdown

How it works

Here’s what you need to know before getting started with the navbar:

  • Navbars require a wrapping with for responsive collapsing and classes.
  • Navbars and their contents are fluid by default. Use to limit their horizontal width.
  • Use our spacing and flex utility classes for controlling spacing and alignment within navbars.
  • Navbars are responsive by default, but you can easily modify them to change that. Responsive behavior depends on our Collapse JavaScript plugin.
  • Navbars are hidden by default when printing. Force them to be printed by adding to the . See the display utility class.
  • Ensure accessibility by using a element or, if using a more generic element such as a , add a to every navbar to explicitly identify it as a landmark region for users of assistive technologies.

The animation effect of this component is dependent on the media query. See the .

Read on for an example and list of supported sub-components.

Toggleable / Dynamic Tabs

HOME

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Menu 2

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

To make the tabs toggleable, add the attribute to each link. Then add a class with a unique ID for every tab and wrap them inside a element with class .

If you want the tabs to fade in and out when clicking on them, add the class to :

Example

<!— Nav tabs —><ul class=»nav nav-tabs»>  <li class=»nav-item»>    <a class=»nav-link active» data-toggle=»tab» href=»#home»>Home</a>  </li>  <li class=»nav-item»>    <a class=»nav-link» data-toggle=»tab» href=»#menu1″>Menu 1</a>  </li>  <li class=»nav-item»>    <a class=»nav-link» data-toggle=»tab» href=»#menu2″>Menu 2</a>  </li></ul> <!— Tab panes —><div class=»tab-content»>  <div class=»tab-pane container active» id=»home»>…</div>  <div class=»tab-pane container fade» id=»menu1″>…</div>  <div class=»tab-pane container fade» id=»menu2″>…</div> </div>

Horizontal

Add to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive variant to make a list group horizontal starting at that breakpoint’s . Currently horizontal list groups cannot be combined with flush list groups.

ProTip: Want equal-width list group items when horizontal? Add to each list group item.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus

Supported content

Navbars come with built-in support for a handful of sub-components. Choose from the following as needed:

  • for your company, product, or project name.
  • for a full-height and lightweight navigation (including support for dropdowns).
  • for use with our collapse plugin and other behaviors.
  • for any form controls and actions.
  • for adding vertically centered strings of text.
  • for grouping and hiding navbar contents by a parent breakpoint.

Here’s an example of all the sub-components included in a responsive light-themed navbar that automatically collapses at the (medium) breakpoint.

Brand

The can be applied to most elements, but an anchor works best as some elements might require utility classes or custom styles.

Navbar

Adding images to the will likely always require custom styles or utilities to properly size. Here are some examples to demonstrate.

Nav

Navbar navigation links build on our options with their own modifier class and require the use of for proper responsive styling. Navigation in navbars will also grow to occupy as much horizontal space as possible to keep your navbar contents securely aligned.

Active states—with —to indicate the current page can be applied directly to s or their immediate parent s.

And because we use classes for our navs, you can avoid the list-based approach entirely if you like.

You may also utilize dropdowns in your navbar nav. Dropdown menus require a wrapping element for positioning, so be sure to use separate and nested elements for and as shown below.

  • Dropdown link

Forms


Place various form controls and components within a navbar with .

Align the contents of your inline forms with utilities as needed.

Navbar

Input groups work, too:

Various buttons are supported as part of these navbar forms, too. This is also a great reminder that vertical alignment utilities can be used to align different sized elements.

Text

Navbars may contain bits of text with the help of . This class adjusts vertical alignment and horizontal spacing for strings of text.

Navbar text with an inline element

Mix and match with other components and utilities as needed.

Navbar text with an inline element

Horizontal Navigation Bar Examples

Create a basic horizontal navigation bar with a dark background color and change the background color of the links when the user moves the mouse over them:

  • Home
  • News
  • Contact
  • About

Example

ul {  list-style-type: none;  margin: 0;  padding: 0;   overflow: hidden;  background-color: #333;}li {  float: left;}li a {  display: block;  color: white;  text-align: center;  padding: 14px 16px;  text-decoration: none;}/* Change the link color to #111 (black) on hover */li a:hover {  background-color: #111;}

Add an «active» class to the current link to let the user know which page he/she is on:

  • Home
  • News
  • Contact
  • About

Example

.active {  background-color: #4CAF50;}

Right-align links by floating the list items to the right ():

  • Home
  • News
  • Contact
  • About

Example

<ul>  <li><a href=»#home»>Home</a></li>  <li><a href=»#news»>News</a></li>  <li><a href=»#contact»>Contact</a></li>   <li style=»float:right»><a class=»active» href=»#about»>About</a></li></ul>

Add the property to <li> to create link dividers:

  • Home
  • News
  • Contact
  • About

Example

/* Add a gray right border to all list items, except the last item (last-child) */li {  border-right: 1px solid #bbb;} li:last-child {  border-right: none;}


ul {  position: fixed;  bottom: 0;  width: 100%;}

Note: Fixed position might not work properly on mobile devices.

An example of a gray horizontal navigation bar with a thin gray border:

  • Home
  • News
  • Contact
  • About

Example

ul {  border: 1px solid #e7e7e7;  background-color: #f3f3f3;}li a {  color: #666;}

Sticky Navbar

Add to <ul> to create a sticky navbar.

A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport — then it «sticks» in place (like position:fixed).

Example

ul {  position: -webkit-sticky; /* Safari */  position: sticky;  top: 0;}

Note: Internet Explorer, Edge 15 and earlier versions do not support sticky positioning. Safari requires a -webkit- prefix (see example above). You must also specify at least one of , , or for sticky positioning to work.

Основное раскрывающийся список

Раскрывающееся меню представляет собой переключаемое меню, позволяющее пользователю выбрать одно значение из стандартного списка:

Dropdown Example

  • HTML
  • CSS
  • JavaScript
  • About Us

Пример

<div class=»dropdown»>   <button class=»btn btn-primary dropdown-toggle» type=»button» data-toggle=»dropdown»>Dropdown Example   <span class=»caret»></span></button>   <ul class=»dropdown-menu»>    <li><a href=»#»>HTML</a></li>     <li><a href=»#»>CSS</a></li>     <li><a href=»#»>JavaScript</a></li>   </ul></div>

Пример объяснено

класс указывает раскрывающееся меню.

Чтобы открыть раскрывающееся меню, используйте кнопку или ссылку с классом и атрибутом.

класс создает значок стрелки курсора (), указывающий, что кнопка является раскрывающимся списком.

Добавьте класс к элементу, чтобы фактически построить раскрывающееся меню.


С этим читают