Create Responsive Web Pages using Bootstrap

Intro

Bootstrap is a fairly popular frontend “toolkit” that’s very similar to TailwindCSS. In the simplest way to explain it, it’s a list of pre-built CSS classes to use in HTML or libraries that use HTML such as React or Next.js. It uses a grid system of rows and columns to control the layout of your pages. To understand how Bootstrap runs, let’s look at the basics of it.

Containers, Rows, and Columns

To start using Bootstrap’s grid system, we need to know about containers, rows, and columns. Let’s start with Containers.

container is the starting class to break into Bootstrap’s grid system. It auto-adds margin and padding to your pages as well as sets you up for styling your elements within. So right now we are here:

<div class="container">

</div>

Note: There are two types of containers, container and container-fluid. container automatically adds padding and margin to a page, which is really useful for a main. container-fluid doesn’t apply margin or padding so the element will always reach the edges of your screen, useful for nav bars.

The next thing to look at is row. Pretty self-explanatory, these control the rows, horizontally, inside of your containers. These are great for separating your content into sections.

Now we are one level down and look like this:

<div class="container">
	<div class="row">
	</div>
</div>

The last thing to look at for the grid system is columns or col. These vertical columns are the basic way to determine the width of your elements. Bootstrap works off of 12 columns so no matter what the screen size is, the screen will always be 12 columns wide.

Now we are down to this: container > row > col

<div class="container">
	<div class="row">
		<div class="col">
		</div>
	</div>
</div>

Responsive Layouts

Now that we know the basics, we can start working on our elements being dynamic. The first thing to think about, and where you’ll do most of your coding, is the columns. Since these determine the width of your elements, you’ll decide how many of those 12 columns the elements take up. Bootstrap makes this easy by just adding a - and a number between 1 and 12, col-1 through col-12.

Note: If we don’t specify an amount of columns, it will default to 12.

For instance, if we have two elements that we want to take up 6 columns each on the same row, we would write that out like this:

<div class="container">
	<div class="row">
		<div class="col-6">
		</div>
		<div class="col-6">
		</div>
	</div>
</div>

It’s that easy!

But this may not be practical for smaller screens. This is where breakpoints, or infix are used. Bootstrap has a list of pre-determined breakpoints that you can use to decide what you want to happen on what screen size. Here is a table that you can see all of the breakpoints from Bootstrap’s website:

To write how many columns we want our element to span on certain screen sizes, we write it like this: col-{screen-size}-{column-amount}. For example, to specify that we only want our element to span 12 columns on small screens and 6 columns on medium screens, we would write that like this:

<div class="container">
	<div class="row">
		<!-- The next two divs will span the width of your page, 
				right next to each other -->
		<div class="col col-md-6">
		</div>
		<div class="col col-md-6">
		</div>
		<!-- These next two elements will also span the full width of your page, 
				but below the two elements above without specifying a new row-->
		<div class="col col-md-2">
		</div>
		<div class="col col-md-10">
		</div>
	</div>
</div>

Note: When you specify a screen size, it applies to that screen size and up unless a wider screen size is specified. sm applies for small screens and up, md doesn’t apply to small screens but applies to medium screens and up.

Note 2.0: The screen size syntax used on the columns, is exactly how it’s used for other styling choices such as colors - text-sm-primary or text-md-secondary. This would make our text blue on small screens and gray on medium screens and up.

Outro

These are what I would consider as the basics of bootstrap. You can mix and match these to place elements exactly how you want on your page on different screen sizes. Below I’ve listed a couple of resources from Bootstrap if you want to learn more about responsive design using Bootstrap.

Resources

Bootstrap Containers

Bootstrap Grid

Bootstrap Breakpoints