How To Structure Your Pages Using Bootstrap?
Bootstrap does incorporate a number of components and alternatives for setting up your project, that includes wrapping containers, a powerful flexbox grid framework, a flexible media object and responsive utility classes.
Bootstrap Layout Elements:
Bootstrap consists of the following-
Let's see them one by one.....
1. Containers:
Containers are the most fundamental layout component in Bootstrap and are required when utilizing our default grid framework. Browse from a responsive, fixed width container (which means its maximum width changes at each breakpoint) or fluid width (which means it's 100% wide constantly). In spite of the fact that the containers can be nested, most designs don't require a nested container.
Syntax-
<div class="container">
<!-- Content here -->
</div>
Utilize .container-fluid for a full width container, spreading over the whole width of the viewport.
2. Z-index:
Some of the Bootstrap segments make use of the z-index, the CSS property controlling layout by providing a 3rd axis to orchestrate content. We use a default z-index scale in Bootstrap that has been intended to appropriately layer navigation, tooltips and popovers, modals, and that's only the tip of the iceberg.
We don't support customization of these values; should you change one, you likely need to transform them all.
Background components—like the backdrops that permit click-dismissing—have a tendency to live on a lower z-indexs, while navigation and popovers use higher z-indexs to guarantee they overlay encompassing content.
3. Responsive breakpoints:
Since Bootstrap is created to be mobile to begin with, we utilize a modest bunch of media inquiries to make sensible breakpoints for our interfaces and layouts. These breakpoints are for the most part in light of least viewport widths and enable us to scale up components as the viewport varies. Bootstrap on a fundamental level puts to use either the adjoining media question ranges—or the breakpoints—in the source Sass files for the grid framework, layout and components.
