|CSS| CSS: Frameworks: Bootstrap

          -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.

Comments

[Rob Levin]

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):

• Copy github.com/twbs/bootstrap/blob/mai...
• Comment everything out
• Watch your builds fail (Webpack, Vite, Rollup, whatever)
• Import the things that are obviously low level requirements to BS like the utilities and reset and what no
• Add in typography and other generalized ones you're using in your cascade
• Start to only add components you're using. For example, using Bootstrap's button, simply uncomment that. Using the Accordion, uncomment that.

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 ⭐ 💥 💪