Containers
Containers are the most basic layout element in Bootstrap and are required when using our default grid system. Choose from a responsive, fixed-width container (meaning its max-width changes at each breakpoint) or fluid-width (meaning it’s 100% wide all the time).
While containers can be nested, most layouts do not require a nested container.
<div class="container"></div>
Use .container-fluid for a full width container, spanning the entire width of the viewport.
<div class="container-fluid">...</div>
Z-index
Several Bootstrap components utilize z-index, the CSS property that helps control layout by providing a third axis to arrange content. We utilize a default z-index scale in Bootstrap that’s been designed to properly layer navigation, tooltips and popovers, modals, and more.
These higher values start at an arbitrary number, high and specific enough to ideally avoid conflicts. We need a standard set of these across our layered components—tooltips, popovers, navbars, dropdowns, modals—so we can be reasonably consistent in the behaviors. There’s no reason we couldn’t have used 100+ or 500+.
$zindex-dropdown: 1000 !default;
$zindex-sticky: 1020 !default;
$zindex-fixed: 1030 !default;
$zindex-modal-backdrop: 1040 !default;
$zindex-modal: 1050 !default;
$zindex-popover: 1060 !default
$zindex-tooltip: 1070 !default;
Approach
Reboot builds upon Normalize, providing many HTML elements with somewhat opinionated styles using only element selectors. Additional styling is done only with classes. For example, we reboot some <table> styles for a simpler baseline and later provide .table, .table-bordered, and more.
- Update some browser default values to use
rems instead of ems for scalable component spacing.
- Avoid
margin-top. Vertical margins can collapse, yielding unexpected results. More importantly though, a single direction of margin is a simpler mental model.
- For easier scaling across device sizes, block elements should use
rems for margins.
Page defaults
The <html> and <body> elements are updated to provide better page-wide defaults. More specifically:
- The
box-sizing is globally set on every element—including *::before and *::after, to border-box. This ensures that the declared width of element is never exceeded due to padding or border.
- The
<body> also sets a global font-family, line-height, and text-align. This is inherited later by some form elements to prevent font inconsistencies.
-
For safety, the
<body> has a declared background-color, defaulting to #fff.
Preformatted text
The <pre> element is reset to remove its margin-top and use rem units for its margin-bottom.
.example-element {
margin-bottom: 1rem;
}
Alerts
Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the eight required contextual classes (e.g., .alert-success). For inline dismissal, use the alerts jQuery plugin.
class="bl"><div> class="alert alert-primary" role="alert">
This is a primary alert—check it out!</div>
<div> class="alert alert-secondary" role="alert">
This is a secondary alert—check it out!
</div>
<div> class="alert alert-success" role="alert">
This is a success alert—check it out!
</div>
<div> class="alert alert-danger role="alert">
This is a danger alert—check it out!
</div>
<div> class="alert alert-warning" role="alert">
This is a warning alert—check it out!
</div>
<div> class="alert alert-info" role="alert">
This is a info alert—check it out!
</div>
<div> class="alert alert-light" role="alert">
This is a light alert—check it out!
</div>
<div> class="alert alert-dark" role="alert">
This is a dark alert—check it out!
</div>
Badges
Badges scale to match the size of the immediate parent element by using relative font sizing and em units.
<h1>Example heading <span class="badge badge-secondary">
New</span></h1>
<h2>Example heading <span class="badge badge-secondary">
New</span></h2>
<h3>Example heading <span>< class="badge badge-secondary">
New</span></h3>
<h4>Example heading <span>< class="badge badge-secondary">
New</span></h4>
<h5>Example heading <span>< class="badge badge-secondary">
New</span></h5>
<h6>Example heading <span>< class="badge badge-secondary">
New</span></h6>
All the documentation in this page was taken from Get Bootstrap.
