Typography
Headings
All HTML headings, h1 through h6, are available.
h1. Bootstrap heading
h2. Bootstrap heading
h3. Bootstrap heading
h4. Bootstrap heading
h5. Bootstrap heading
h6. Bootstrap heading
h1. Bootstrap heading
h2. Bootstrap heading
h3. Bootstrap heading
h4. Bootstrap heading
h5. Bootstrap heading
h6. Bootstrap headingGrid 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.
class="container">
class="row">
class="col-sm">
One of three columns
Breadcrumb
Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.
aria-label="breadcrumb">
class="breadcrumb">
class="breadcrumb-item active" aria-current="page">Home
aria-label="breadcrumb">
class="breadcrumb">
class="breadcrumb-item"> href="#">Home
class="breadcrumb-item active" aria-current="page">Library
aria-label="breadcrumb">
class="breadcrumb">
class="breadcrumb-item"> href="#">Home
class="breadcrumb-item"> href="#">Library
class="breadcrumb-item active" aria-current="page">Data
Alerts
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
class="alert alert-primary" role="alert">
A simple primary alert—check it out!
Buttons
Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
type="button" class="btn btn-primary">Primary
type="button" class="btn btn-secondary">Secondary
type="button" class="btn btn-success">Success
type="button" class="btn btn-danger">Danger
type="button" class="btn btn-warning">Warning
type="button" class="btn btn-info">Info
type="button" class="btn btn-light">Light
type="button" class="btn btn-dark">Dark
type="button" class="btn btn-link">Link Nav
Documentation and examples for how to use Bootstrap’s included navigation components.
class="nav">
class="nav-item">
class="nav-link active" href="#">Active
class="nav-item">
class="nav-link" href="#">Link
class="nav-item">
class="nav-link" href="#">Link
class="nav-item">
class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled
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 class="card" style="width: 18rem;">
src="..." class="card-img-top" alt="...">
class="card-body">
class="card-title">Card title
class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.
href="#" class="btn btn-primary">Go somewhere
Jumbotron
Lightweight, flexible component for showcasing hero unit style content.
Hello, world!
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
It uses utility classes for typography and spacing to space content out within the larger container.
Learn more class="jumbotron">
class="display-4">Hello, world!
class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
class="my-4">
It uses utility classes for typography and spacing to space content out within the larger container.
class="btn btn-primary btn-lg" href="#" role="button">Learn more
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.
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
class="list-group">
class="list-group-item">Cras justo odio
class="list-group-item">Dapibus ac facilisis in
class="list-group-item">Morbi leo risus
class="list-group-item">Porta ac consectetur ac
class="list-group-item">Vestibulum at eros
Border-radius
Add classes to an element to easily round its corners.
src="..." alt="..." class="rounded">
src="..." alt="..." class="rounded-top">
src="..." alt="..." class="rounded-right">
src="..." alt="..." class="rounded-bottom">
src="..." alt="..." class="rounded-left">
src="..." alt="..." class="rounded-circle">
src="..." alt="..." class="rounded-pill">
src="..." 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..
class="form-group">
for="exampleInputEmail1">Email address
type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.
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.
class="media">
src="..." class="mr-3" alt="...">
class="media-body">
class="mt-0">Media heading
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.
class="media mt-3">
class="mr-3" href="#">
src="..." class="mr-3" alt="...">
class="media-body">
class="mt-0">Media heading
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.