Introduction to Bootstrap

CSS FrameworksBootstrap LayoutColumnsRowsGrid SystemBreakpointsContainersClassesSpacingFlexboxComponents

Introduction

Bootstrap is a major CSS framework that has become ubiquitous in modern web development. It provides a collection of HTML and CSS patterns that enable fast and reliable development of responsive styles.

Before Flexbox and CSS Grid, achieving responsive layouts was difficult and time-consuming. Bootstrap offered a simple syntax using class names to allow for responsive designs to be achieved without any custom CSS being required.

It has been particularly popular for those creating an MVP or Minimal Viable Product, as it frees up development time that would otherwise be spent on styling. Due to its widespread popularity, many companies adopted this package as the foundation for their applications. This meant they could hire developers with experience with Bootstrap and would not need to retrain them on the companies’ custom CSS assets.

Since its inception, Bootstrap has undergone five major version changes. Each major version represents breaking changes from the last, this is crucial to remember when working with packages such as Bootstrap. Each major version of a package will come with new documentation, as well as new features and improvements.Knowing your version number will help you find the correct documentation.

Each lesson in the CSS Frameworks course includes a practical lesson task related to the study material. We highly recommend attempting each task and then comparing your attempt to the supplied example answer. The more you code, the quicker you will improve.

Installing Bootstrap

There are two ways to use Bootstrap in your projects:

  1. Using npm to install Bootstrap as a dependency.
  2. Using a cdn link to include Bootstrap in your project.

From these two options, each has its own advantages. If you do not intend to customise Bootstrap, it is quicker to use the cdn approach. If you intend to customise Bootstrap styles, to change the theme colour scheme for example, then you should use npm to install.

Installing with Node Package Manager (NPM)

We recommend that you use Node Version Manager (NVM) for Windows or Node Version Manager (NVM) for Mac OS to manage your NodeJS installations.

  1. Open your terminal and navigate to your project folder. The easiest way to ensure this is to use the terminal in VS Code, which will automatically open your current working folder.
  2. In your terminal, run node --version to check if NodeJS has been successfully installed. In return, you should get the version of node installed.
  3. Run npm init -y to create a new node app, and that will create a package.json file if you don’t already have one.
  4. Add Bootstrap version 5.3.3 as a dependency to your project using the command below:
bash 
	npm install bootstrap@5.3.3

If this is successful, you should find Bootstrap added as a dependency in the package.json file, and you should also find a Bootstrap directory inside the node_modules folder inside your project.

Link Bootstrap to the HTML file in the head tag.

html 
	<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css" />

We will discuss using SASS to customise Bootstrap in a later lesson.

Using a CDN link

If you do not need to customise Bootstrap, you can find the available CDN links here: Bootstrap CDN links.

These will be included in your HTML <head> like so:

html 
	<link
	  href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
	  rel="stylesheet"
	  integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
	  crossorigin="anonymous"
	/>
	<script
	  defer
	  src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
	  integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
	  crossorigin="anonymous"
	></script>

Building with Bootstrap

The main difference between an application built with Bootstrap and with custom CSS styles is that most of the styling can be done using provided Bootstrap classes. Generally speaking, there should only be a small amount of custom CSS when working with Bootstrap, as the utility classes provided by the framework are pretty comprehensive.

Layout with Bootstrap

One of the reasons many people choose Bootstrap is how easy it is to create responsive layouts. Bootstrap uses Flexbox and pre-written breakpoints to make layout easy.

To understand and use Bootstrap layout well, one needs to understand some Bootstrap concepts such as Grid System, Containers, Columns, Rows, Breakpoints etc

The Grid System

According to bootstrap, the grid system is a powerful mobile first flexbox grid that can be used to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass variables and mixins, and dozens of predefined classes. It is built with CSS Flexbox.

To use the grid system, one needs to familiarize himself to a number of predefined classes. See the example below:

txt 
	<div class="container">
	  <div class="row">
	    <div class="col-md-4">Column 1</div>
	    <div class="col-md-4">Column 2</div>
	    <div class="col-md-4">Column 3</div>
	  </div>
	</div>

In summary, the code snippet above creates a responsive layout with three columns centered horizontally in the middle of screens ranging from medium to extra-large size. While the container class provides a structured layout and responsive spacing around your content, the row class creates 12 columns, and the col-md-4 allocates four columns per div.

Bootstrap divides the page into 12 columns. We can specify how many columns each element takes up and, importantly for responsive websites, how many columns it takes up at various screen widths using the bootstrap breakpoints.

The 12 column structure is used because it offers a great variety of layouts, for example, 3 items of 4 columns, or 2 items of 6 columns, and so on.

Bootstrap grid system

Containers

Containers are the basic building blocks of building a responsive layout with Bootstrap and are created using the container class. There are two main types of containers in Bootstrap:

  • .container
  • .container-fluid
  • Responsive Container
.container

The .container class creates a fixed-width container that is centered on the page. It provides responsive padding on both sides, ensuring your content doesn’t stretch too wide on larger screens. For example:

html 
	<div class="container">
	  <p>Your content stays in the middle of the page with equal padding left and right.</p>
	</div>
.container-fluid

The .container-fluid class creates a full-width container that spans the entire width of the viewport. It’s suitable for creating fluid, edge-to-edge layouts. For Example:

html 
	<div class="container-fluid">
	  <p>Your content spans the entire width</p>
	</div>
Responsive Containers

These are containers with a breakpoint specifying a layout that is 100% wide until the specified breakpoint is reached, after which we apply max-widths for each of the higher breakpoints. For example:

html 
	<div class="container-sm">100% wide until small breakpoint</div>
	<div class="container-md">100% wide until medium breakpoint</div>
	<div class="container-lg">100% wide until large breakpoint</div>
	<div class="container-xl">100% wide until extra large breakpoint</div>
	<div class="container-xxl">100% wide until extra extra large breakpoint</div>

Breakpoints

Breakpoints are customizable widths that determine how your responsive layout behaves across device or viewport sizes in Bootstrap.

Here is a list of Bootstrap’s breakpoints.

Breakpoint name Class infix Default dimensions
Extra small None <576px
Small sm >= 576px
Medium md >= 768px
Large lg >= 992px
Extra large xl >= 1200px
Extra extra large xxl >= 1400px

Rows

The next element we will need in our Bootstrap layout is a row which is created with the row class. This will be used to group columns together. A row implicitly has 12 columns on which content can be laid out.

html 
	<div class="container">
	  <div class="row">// Columns go here</div>
	</div>

Columns

And finally, columns are used to set how many columns each item takes up and uses the col class.

html 
	<div class="container">
	  <div class="row">
	    <div class="col">// Column content goes here</div>
	  </div>
	</div>

To determine how many columns each column should take up, you can add a number to the col class. For example, col-2 would set the column to take up two of the twelve columns for that row. If your total number of columns per row exceeds 12, it will wrap onto a new line.

html 
	<div class="container">
	  <div class="row">
	    <div class="col-8">// Column content goes here</div>
	    <div class="col-4">// Column content goes here</div>
	  </div>
	</div>

In the above example, the first col element would take up 8 columns, and the second col element would take up 4 columns, but this would only be on mobile. Working mobile-first, we can add how many columns an element should take up at specific breakpoints. For example, col-sm-6 would set an element to take up 6 columns on small devices (sm for small).

html 
	<div class="container">
	  <div class="row">
	    <div class="col-6 col-sm-7 col-md-8 col-xl-9">// Column content goes here</div>
	    <div class="col-6 col-sm-5 col-md-4 col-xl-3">// Column content goes here</div>
	  </div>
	</div>

In the above example, the first and second columns would be equal-sized on mobile. On small devices, the first column will take up 7 columns, and the second column 5 columns. Then on medium devices 8 and 4 columns, respectively, and on extra large devices, they’ll take up 9 and 3 columns.

Watch the following video showing the basics of laying out a page with Bootstrap: Introduction to layout with Bootstrap (4m 59s).

You can read more about layout here: Bootstrap Breakpoints.

Bootstrap Classes

Bootstrap exposes its functionality via a system of CSS Classes. These can be combined in various ways to build many different layouts. Within Bootstrap, there are Utility and Component classes available:

Utility Classes

One of the most important features of Bootstrap is the provision of Utility Classes which can be used to avoid writing custom CSS for common tasks.

You can read more about the utility classes here: Bootstrap Utility Classes.

Spacing

When managing margins, padding and gaps (spacing) for HTML elements, there is a suite of classes that can be used to keep these values consistent:

txt 
	.m-0    >     No margin on all sides
	.m-1    >     Smallest margin on all sides
	.m-2    >     Small margin on all sides
	.m-3    >     Medium margin on all sides
	.m-4    >     Large margin on all sides
	.m-5    >     Largest margin on all sides

As well as -<number> suffixes that control margin sizing, the location of the padding can also be controlled:

txt 
	.mt-1    >     Smallest margin on top
	.mb-2    >     Small margin on bottom
	.my-3    >     Medium margin on top and bottom
	.mx-4    >     Large margin on left and right

In Bootstrap, left and right are referred to as start and end, respectively. This ensures that the syntax makes sense to users that read from left to right (LTR) as well as right to left (RTL).

txt 
	.ms-1    >     Smallest margin at start (left)
	.me-2    >     Small margin at end (right)

You can read more about spacing utility classes here: Spacing Utility Classes.

Flexbox

Bootstrap is built with flexbox and provides direct access to flex styles through a system of classes.

txt 
	.d-flex                  >     Display flex
	.flex-column             >     Arrange as a column
	.flex-row                >     Arrange as a row
	.flex-wrap               >     Wrap items
	.flex-nowrap             >     Do not wrap items
	.justify-content-center  >     Centre align items along the main axis
	.align-items-center      >     Centre align items along the cross axis

For example, to centre align items on both axes, you can use the following classes:

html 
	<div class="d-flex align-items-center justify-content-center">
	  <div class="border p-5">Centre</div>
	</div>

You can read more about the flexbox system here: Flexbox.

Other utilities

There are many more utility classes that can be used to customise Bootstrap. These include classes to control:

  • Text alignment
  • Text style
  • Font weight
  • Font size
  • Text colour
  • Background colour
  • Border
  • Shadow
  • Position
  • Overflow

Before writing custom CSS in a Bootstrap project, it is worth spending some time to research if a Bootstrap class can handle this instead.

###=# Component Classes

Unlike utility classes, which refer directly to a specific style, component classes represent a group of styles used to build a specific component. For example, we may use the btn component to add styles to an element that the user can interact with:

html 
	<div class="btn-group">
	  <button class="btn btn-primary">Primary</button>
	  <div class="btn btn-info">Info</div>
	  <a href="#" class="btn btn-danger">Danger</a>
	  <input type="reset" class="btn btn-warning" value="Warning" />
	  <input type="submit" class="btn btn-success" value="Success" />
	</div>
Info
Danger

All of these classes enable an HTML element to be styled in a consistent way. You can read more about the button component here: Button Component.

Other popular components include:

These component groups form the basis of the Bootstrap framework and should be used like lego blocks to build up a layout.

Lesson task

Brief

For this task, you will create a single-page application that uses Bootstrap. You should not customise Bootstrap in any way or use custom CSS at all.

You can use an existing project, an upcoming or planned project, or a fictional project.

Design a landing page for your project that includes a header, navigation, and footer. The navigation should scroll you to the correct location on the page. Include a form that allows the user to register their interest in your project.

Process

  1. Design a simple one-page landing page
  2. Create a new project folder
  3. Link the CDN Bootstrap CSS and JS files to your HTML
  4. Use HTML + Bootstrap CDN to build the page

Additional resources