-What is Bootstrap
-Intro to the Bootstrap Grid
-Responsive Bootstrap Grids
What is Bootstrap
Bootstrap is a CSS Framework. A framework provides a starting point to create all kinds of different websites. Bootstrap consist of components which are different pieces that can be inserted into our code for use.
Components
Bootstrap gives us access to a bunch of pre-built components that we can incorporate into our websites.
Grid System
Bootstrap also comes with a grid system, which help us construct our own custom, responsive layouts.
Intro to the Bootstrap Grid
The grid system helps us layout content on a web page. The grid system only works inside of a container, therefore it is required to have at least one container or more on a page for the grid system to work. There must be a container class any time we want to use the grid. Then we must create a row using the class of row.
<div class="container">
<h1 class="display-1 text-center text-primary">The Grid System</h1>
<div class="row">
</div>
Every row in bootstrap has 12 units of space.
Responsive Bootstrap Grids
The grid system allows us to create responsive layouts and shift content around based upon the screen size.
Top comments (1)
Thanks Code_Regina! I feel compelled to let the internets know you can use Bootstrap in a modular way and improve performance and not drain mobile batteries! (most folks that just include the entire thing but there's a better way):
Most other frameworks offer a similar strategy which simply involves figuring out which modules your application actually needs.
Thanks for letting me inject this idea. I think it's very important in terms of performance and being thoughtful to our user's devices and for when they have poor bandwidth ⭐ 💥 💪