Headings

All HTML headings, h1 through h6, are available.

<h1>h1. Bootstrap heading</h1><h2>h2. Bootstrap heading</h2><h3>h3. Bootstrap heading</h3><h4>h4. Bootstrap heading</h4><h5>h5. Bootstrap heading</h5><h6>h6. Bootstrap heading</h6>

Grid system

Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass variables and mixins, and dozens of predefined classes.

<divclass="container"><divclass="row"><divclass="col-sm">
      One of three columns
    </div><divclass="col-sm">
      One of three columns
    </div><divclass="col-sm">
      One of three columns
    </div></div></div>

Breadcrumb

Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.

<navaria-label="breadcrumb"><olclass="breadcrumb"><liclass="breadcrumb-item active"aria-current="page">Home</li></ol></nav><navaria-label="breadcrumb"><olclass="breadcrumb"><liclass="breadcrumb-item"><ahref="#">Home</a></li><liclass="breadcrumb-item active"aria-current="page">Library</li></ol></nav><navaria-label="breadcrumb"><olclass="breadcrumb"><liclass="breadcrumb-item"><ahref="#">Home</a></li><liclass="breadcrumb-item"><ahref="#">Library</a></li><liclass="breadcrumb-item active"aria-current="page">Data</li></ol></nav>

Alerts

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

<divclass="alert alert-primary"role="alert">
  A simple primary alert—check it out!
</div><divclass="alert alert-secondary"role="alert">
  A simple secondary alert—check it out!
</div><divclass="alert alert-success"role="alert">
  A simple success alert—check it out!
</div><divclass="alert alert-danger"role="alert">
  A simple danger alert—check it out!
</div><divclass="alert alert-warning"role="alert">
  A simple warning alert—check it out!
</div><divclass="alert alert-info"role="alert">
  A simple info alert—check it out!
</div><divclass="alert alert-light"role="alert">
  A simple light alert—check it out!
</div><divclass="alert alert-dark"role="alert">
  A simple dark alert—check it out!
</div>

Buttons

Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

<buttontype="button"class="btn btn-primary">Primary</button><buttontype="button"class="btn btn-secondary">Secondary</button><buttontype="button"class="btn btn-success">Success</button><buttontype="button"class="btn btn-danger">Danger</button><buttontype="button"class="btn btn-warning">Warning</button><buttontype="button"class="btn btn-info">Info</button><buttontype="button"class="btn btn-light">Light</button><buttontype="button"class="btn btn-dark">Dark</button><buttontype="button"class="btn btn-link">Link</button>

Nav

Documentation and examples for how to use Bootstrap’s included navigation components.

<ulclass="nav"><liclass="nav-item"><aclass="nav-link active"href="#">Active</a></li><liclass="nav-item"><aclass="nav-link"href="#">Link</a></li><liclass="nav-item"><aclass="nav-link"href="#">Link</a></li><liclass="nav-item"><aclass="nav-link disabled"href="#"tabindex="-1"aria-disabled="true">Disabled</a></li></ul>

Cards

Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

<divclass="card"style="width: 18rem;"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Card title</h5><pclass="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p><ahref="#"class="btn btn-primary">Go somewhere</a></div></div>

Jumbotron

Lightweight, flexible component for showcasing hero unit style content.

<divclass="jumbotron"><h1class="display-4">Hello, world!</h1><pclass="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p><hrclass="my-4"><p>It uses utility classes for typography and spacing to space content out within the larger container.</p><aclass="btn btn-primary btn-lg"href="#"role="button">Learn more</a></div>

List group

List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.

<ulclass="list-group"><liclass="list-group-item">Cras justo odio</li><liclass="list-group-item">Dapibus ac facilisis in</li><liclass="list-group-item">Morbi leo risus</li><liclass="list-group-item">Porta ac consectetur ac</li><liclass="list-group-item">Vestibulum at eros</li></ul>

Border-radius

Add classes to an element to easily round its corners.

<imgsrc="..."alt="..."class="rounded"><imgsrc="..."alt="..."class="rounded-top"><imgsrc="..."alt="..."class="rounded-right"><imgsrc="..."alt="..."class="rounded-bottom"><imgsrc="..."alt="..."class="rounded-left"><imgsrc="..."alt="..."class="rounded-circle"><imgsrc="..."alt="..."class="rounded-pill"><imgsrc="..."alt="..."class="rounded-0">

Forms

Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms..

<form><divclass="form-group"><labelfor="exampleInputEmail1">Email address</label><inputtype="email"class="form-control"id="exampleInputEmail1"aria-describedby="emailHelp"placeholder="Enter email"><smallid="emailHelp"class="form-text text-muted">We'll never share your email with anyone else.</small></div><divclass="form-group"><labelfor="exampleInputPassword1">Password</label><inputtype="password"class="form-control"id="exampleInputPassword1"placeholder="Password"></div><divclass="form-group form-check"><inputtype="checkbox"class="form-check-input"id="exampleCheck1"><labelclass="form-check-label"for="exampleCheck1">Check me out</label></div><buttontype="submit"class="btn btn-primary">Submit</button></form>

Nesting Media object

Media objects can be infinitely nested, though we suggest you stop at some point. Place nested .media within the .media-body of a parent media object.

<divclass="media"><imgsrc="..."class="mr-3"alt="..."><divclass="media-body"><h5class="mt-0">Media heading</h5>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

    <divclass="media mt-3"><aclass="mr-3"href="#"><imgsrc="..."class="mr-3"alt="..."></a><divclass="media-body"><h5class="mt-0">Media heading</h5>
        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
      </div></div></div></div>