Grid system Learn More
Bootstrap's grid system uses a series of containers, rows, and columns to layout and align content. It's fully responsive. Below is an example how the grid comes together.
Standard rules for the grid system:
- Containers provide a means to center and horizontally pad your site's contents. Use .container for a responsive pixel width.
- Rows are wrappers for columns. Each column has horizontal padding for controlling the space between them.
- In a grid layout, content must be placed within columns and only columns may be immediate children of rows.
- 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 .col-4.
- To make the grid responsive, there are grid breakpoints, one for each responsive breakpoint: all breakpoints (extra small, small, medium, large, 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., .col-sm-4 applies to small, medium, large, extra large devices, but not the first xs breakpoint).
One of three columns
col-sm-4
Two of three columns
col-sm-8
<section class="content-page">
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="panel panel-default custom-card">
One of three columns
col-sm-4
</div>
</div>
<div class="col-sm-8">
<div class="panel panel-default custom-card">
Two of three columns
col-sm-8
</div>
</div>
</div>
</div>
</section>
Forms layout Learn More
Bootstrap's form controls expand on our form styles with classes. Use these classes for a more consistent rendering across browsers and devices.
Standard rules for the form layout:
- Wrap labels and form controls in <div class="form-group"> (needed for optimum spacing)
- Add class .form-control to all textual <input>, <textarea>, and <select> elements.
- Be sure to use an appropriate type attribute on all inputs (e.g., email for email address or number for numerical information) to take advantage of newer input controls like email verification, number selection.
<form id="" class="validate-form">
<div class="form-group col-md-6">
<label for="email_address">Email address</label>
<input type="email" class="form-control" id="email_address" name="email_address">
<span class="help-block"></span>
</div>
<div class="form-group col-md-6">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" name="password">
<span class="help-block"></span>
</div>
<div class="form-group col-md-6">
<input type="checkbox" class="form-input" id="check_me_out" name="check_me_out">
<label for="check_me_out">Check me out</label>
</div>
<div class="clearfix"></div>
<div class="form-group col-md-6">
<button type="button" class="btn btn-submit">Submit</button>
</div>
</form>
Modals Learn More
Bootstrap's modal plugin is used to add dialogs to your site for lightboxes, user notifications, or completely custom content.
Standard rules for the modals:
- Modals are built with HTML, CSS, and JavaScript. They're positioned over everything else in the document and remove scroll from the <body> so that modal content scrolls instead.
- Clicking on the modal "backdro" will automatically close the modal.
- Bootstrap only supports one modal window at a time.
- Modals use position: fixed, which can sometimes be a bit particular about its rendering. Whenever possible, place your modal HTML in a top-level position to avoid potential interference from other elements.
<button type="button" class="btn btn-submit" data-toggle="modal" data-target="#exampleModal" id="launchModal">
Launch modal
</button>
<div class="modal fade" id="exampleModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h2 class="pt-0 pb-0 mt-0 mb-0 title-bar"></h2>
<button type="button" class="close" data-dismiss="modal">
<i class="fas fa-times"></i>
</button>
</div>
<div class="modal-body">
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum
at eros.
</div>
<div class="modal-footer mt-0">
<button type="button" class="btn btn-cancel" data-dismiss="modal"></button>
<button type="button" class="btn btn-save">Save Changes</button>
</div>
</div>
</div>
</div>
.content-page
When creating new pages, we should be thinking about how the content is arranged. The content should be wrapped in a div and given this class.
.custom-card
Provide a flexible and extensible content container with multiple variants and options. It includes option for header, body and footer.
<section class="content-page">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="panel panel-default custom-card fadeInDown animated">
<div class="panel-header">Title</div>
<div class="panel-body p-0">
Body
</div>
</div>
</div>
</div>
</div>
</section>
Responsive Fade animation
The .fade and animated classes add a transition effect. Remove this class if you do not want this effect.
Examples of available fade animations:
.fadeIn
.fadeInDown
.fadeInLeft
.fadeInRight
fadeInUp
.fadeOut
.fadeOutDown
.fadeOutLeft
.fadeOutRight
.fadeOutUp
Move the mouse over the squares below to launch the animation.
<div class="panel panel-default fadeInDown animated">
<div class="panel-body">
fadeIn
</div>
</div>
Alerts Learn More
Bootstrap provides an easy way to create predefined alert messages:
Standard rules for the modals:
- Alerts are created with the .alert class, followed by one of the four contextual classes .alert-success, .alert-info, .alert-warning or .alert-danger:
<div class="alert alert-success">
<strong>Success!</strong> Indicates a successful or positive action.
</div>
<div class="alert alert-info">
<strong>Info!</strong> Indicates a neutral informative change or action.
</div>
<div class="alert alert-warning">
<strong>Warning!</strong> Indicates a warning that might need attention.
</div>
<div class="alert alert-danger">
<strong>Danger!</strong> Indicates a dangerous or potentially negative action.
</div>
- To close the alert message, add a .alert-dismissible class to the alert container. Then add class="close" and data-dismiss="alert" to a link or a button element (when you click on this the alert box will disappear).
- The .fade and .in classes adds a fading effect when closing the alert message.
<div class="alert alert-success alert-dismissible fade show">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
Click on the "x" symbol to the right to close me.
</div>