Introduction

Bootstrap is a free and open-source toolkit for building responsive websites and web applications. It's essentially a collection of tools that simplify the front-end development process. It has the 'mobile-first' responsive design as a goal.

Must-know concepts in Bootstrap!

Let's look into the important concepts of the Bootstrap framework.

1. Grid System

2. Responsive Design

3. Components

4. CSS classes

1. Grid System

The grid system in Bootstrap allows the developer to structure the website using rows and columns. The developer can define the number of columns per row and their responsiveness across different screens.

The grid system comes with containers, breakpoints, cols, and rows.

• Breakpoints

  There are 6 common breakpoints, which are:

  1. Extra small: width < 567px

  2. Small (sm): width >= 567px

  3. Medium (md): width >= 768px

  4. Large (lg): width >= 992px

  5. Extra Large (xl): width >= 1200px

  6. Extra Extra Large (xxl): width >= 1400px

• Container

  Containers are the basic layout element that is mandatory for the grid system. There are three different types of containers. They are:

  1. .container - It sets the maximum width at each responsive breakpoints

  2. .container-{breakpoints} - It provides 100% width until a specific breakpoint

  3. .container-{fluid} - It provides 100% width at all breakpoints

Example: .container, .container-md

• Columns

  There are 12 columns available per row. Column classes indicate the number of template columns to span.

  Example: col-4 (column with 4 span template columns)

• Rows

  Rows are wrappers for columns. Each column has horizontal padding for controlling the space between them.

2. Responsive Design

The word 'Responsiveness' stands for changing the structure of the webpage according to different screen sizes.

To achieve a responsive design, Bootstrap uses a grid system combined with breakpoints, column sizing, and breakpoint classes.

For example: class = "col-sm-6 col-md-4"

3. Components

Bootstrap provides a rich set of pre-built components like buttons, forms, navigation bars, modals, and more. These components come with pre-defined styles and functionalities, saving you time and effort in development.

Some of the most commonly used Bootstrap components are:

• Navs & Tabs (Class:nav)

• Navbar (Class:navbar)

• Buttons (Class:btn btn-primary)

• Dropdowns (Class:dropdown, dropdown-menu)

• Progress Bars (Class:progress)

4. Customization

Bootstrap utilizes a wide range of CSS classes to style your components and layout. To customize the appearance, spacing, alignment, and responsiveness, there are two ways.

1. Override the properties using CSS

2. Use of SASS

Extras: Button Types

• Primary (btn btn-primary)

• Secondary (btn btn-secondary)

• Success (btn btn-success)

• Danger (btn btn-danger)

• Warning (btn btn-warning)

• Info (btn btn-info)

• Light (btn btn-light)

• Dark (btn btn-dark)

Advantages of Bootstrap

• Since Bootstrap is open-source, it is free and open to use

• It provides responsiveness

• Easy to learn and use

Disadvantages of Bootstrap

• It slows down website speed

• The use of too many built-in classes in html may lead to bloated code

• It is not ideal for highly unique and complex design

Best Alternative

If you are not a fan of Bootstrap (just like me 😋), then you can go with 'Tailwind CSS' as the best alternative for Bootstrap framework.