Welcome to the second part of my styling series where I go over some popular styling libraries/frameworks. In this blog, we'll go over Bootstrap. Bootstrap is a powerful, open source frontend framework that makes building websites faster and easier by providing an intuitive grid system, UI components, and an extensive array of utility.

Setup

Of course before getting into some of the features, we have to talk about setting up Bootstrap in a project. At the time of writing, Bootstrap's current version is 5.3.3 and that is what I'll be using for any examples.

Bootstrap Via CDN

Bootstrap can be set up very quickly by using a CDN, or content delivery network. This method does not require any installation, just add Bootstrap's CSS and JavaScript links to your HTML file and you're off to the races!
You'll put the following CSS link inside the

After that, you'll put the following script before the closing

Via Package Manager

If you're working in a larger project, or working with modern frontend tools, you may want to install via project manager. Lucky for us, this is simple as well! In your terminal, just write npm install bootstrap if using npm, or yarn add bootstrap if using yarn. After installing you'll want to import bootstrap's CSS and JavaScript into your main CSS and JS files respectfully:

// Import Bootstrap CSS
import 'bootstrap/dist/css/bootstrap.min.css';

// Import Bootstrap JavaScript
import 'bootstrap/dist/js/bootstrap.bundle.min.js';

The Grid System

One of Bootstrap's most powerful features is its grid system. This allows you to create responsive layouts that automatically adjust to different screen sizes.

Structure

The grid is based on a 12-column structure to organize content. Its basic structure can look something like this:

  

    
Column 1
    
Column 2
    
Column 3
  

• Container: The container holds the columns and rows while aligning them
• Row: The rows hold and group columns together horizontally
• Col: The columns are where your content will live, each row can have 12

Sizes

Columns can also have their own sizes! This can be used to provide different layouts. They are notated by how many columns they'll take up on the row.

  

    
100% Width
  
  

    
50% Width
    
50% Width
  
  

    
33.33% Width
    
33.33% Width
    
33.33% Width
  

Breakpoints

Bootstraps grid is mobile first, meaning it's built for mobile devices before scaling up to larger devices. Because of this, Bootstrap has classes that define how columns act across different screen sizes. These are:

• xs: For screens less than 576px
• sm: For screens more than 576px
• md: For screens more than 768px
• lg: For screens more than 992px
• xl: For screens more than 1200px

For example:

  

    
Wide on medium and larger screens
    
Narrower on medium and larger screens
  

In this example, the first column takes up the full width on small screens, but only eight grid units on medium or larger screens. The second will take up half the width on small screens, and only four units on medium or larger.

Common Components

Bootstrap gives us a variety of pre-built components that help in creating appealing, user friendly websites with minimal custom CSS. There are a lot of components, so I'll go over some of the more common one's you're likely to work with.

Typography

We'll start by talking about text, since your users need to read to believe. The typography classes make defining consistent text styles easy, from headings, to body text, to lists. For example, the different heading are notated by their display class:

Heading 1
Heading 2
Heading 3
This is lead text, which stands out from regular paragraph text.
This is regular paragraph text.
This is small text, which stands out from regular paragraph text.

You can also define paragraph text with utility classes to modify body text as seen above.

Buttons

Every website or app needs buttons! Bootstrap gives a variety of button styles out the box. Their classes are defined as such:

Primary Button
Secondary Button
Danger Button


Large Button
Small Button


Success Outline
Warning Outline

NavBar

Bootstrap's navbar component comes with built in classes for alignment, dropdowns, and more!

In this example, the navbar will collapse on smaller screens.

Utility Classes

Bootstrap also includes a wide range of utility classes to help speed along development and reduce the need for custom CSS. With just a few class names, you can adjust spacing, alignment, display properties and more!

Spacing

Spacing is extremely important in development for user readability. Thankfully, Bootstrap gives us classes to adjust margins and padding of elements. They all follow a similar format of {property}{sides}-{size}.

• Property: m for margin, p for padding
• Sides: t top, b bottom, l left, r right, x left and right, y top and bottom, or blank for all sides
• Size: 0, 1, 2, ..., or auto

For example:

Margin Top of 3
Padding of 5
Horizontally Centered with Auto Margin

Display

Display utilities help control the visibility and layout of elements. These can be used to show, hide, or change how elements behave. The display classes include:

• d-block: Display as a block element
• d-inline: Display as an inline element
• d-none: Hide the element
• d-flex: Enable Flexbox
• d-inline-block: Display as an inline block

Bootstrap also provides responsive versions of these classes that apply to breakpoints, such as d-none d-md-block, this hides an element on small screens.

Visible on medium and larger screens
Centered with Flexbox

Text Utilities

Bootstrap gives a large amount of text customization with classes like:

Text Alignment

• text-start: Aligns text to the left
• text-end: Aligns text to the right
• text-center: Aligns text to the center

Text Wrapping

• text-nowrap: Prevent text from wrapping to the next line
• text-truncate: Truncate text with an ellipsis if it's too long

Text Color

• text-primary: Text with primary color (default: blue)
• text-success: Text with success color (default: green)
• text-danger: Text with danger color (default: red)

This text is centered and green
This text is right-aligned and blue

Conclusions

Bootstrap is a powerful and flexible framework that allows devs to build responsive websites efficiently. By mastering these foundational concepts, you'll be able to streamline your workflow and focus more on the design and functionality of your site rather than with custom CSS and layout management. So dive in! Experiment with some of the examples and build an amazing app!

Sources

Bootstrap