Bootcamp
Search…
📅
Course Schedule
0: Language and Tooling Teaching Guide
1: Frontend Basics Teaching Guide
2: Backend Basics Teaching Guide
3: Backend Applications Teaching Guide
4: Backend Structure Teaching Guide
5: Full-Stack Applications Teaching Guide
6: Frontend Infrastructure Teaching Guide
7: React Teaching Guide
8: Advanced React Teaching Guide
9: Advanced Topics Teaching Guide
🧮
Algorithms Teaching Guide
💼
Interview Prep Teaching Guide
☺
User Experience Teaching Guide
CSS.6: Bootstrap

Introduction

​Bootstrap is an open-source CSS library created at Twitter and open-sourced in 2011. It provides a set of styles for a 12-column grid, and CSS and JS for common UI elements, such as carousels and alert boxes.

Why use Bootstrap

There are three parts to Bootstrap:
  1. 1.
    CSS and DOM manipulation library "components" that creates things like carousels and modals. You must use the bootstrap Javascript for these features.
  2. 2.
    A common UI look and feel with things like navbars, tabs and alerts. These come with their own color schemes and things like rounded corners and button hover animations.
  3. 3.
    This section mostly covers the most complex CSS part of Bootstrap- the Responsive Grid.
When using Bootstrap, do not name custom CSS classes the same as Bootstrap CSS classes to prevent conflicts.
Do not add any box model or layout styles to an element that already has a Bootstrap layout class on it, such as margin.

Responsive Grid

Bootstrap CSS allows a developer to write HTML classes and create mobile-first responsive layouts easily.

Equal 2-column Layout

Responsive Columns

Resize the window to see the columns resize themselves!

Bootstrap Starter Code

1
<!doctype html>
2
<html lang="en">
3
<head>
4
<!-- Required meta tags -->
5
<meta charset="utf-8">
6
<meta name="viewport" content="width=device-width, initial-scale=1">
7
​
8
<!-- Bootstrap CSS -->
9
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
10
​
11
<title>Hello, world!</title>
12
</head>
13
<body>
14
<h1>Hello, world!</h1>
15
​
16
<!-- Optional JavaScript; -->
17
<!-- Will need JS is using any components: https://getbootstrap.com/docs/5.0/components -->
18
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
19
</body>
20
</html>
Copied!

Responsive Breakpoint Cheatsheet

Bootstrap grid has built-in mobile first responsive media query breakpoints. When setting media queries to match up with the bootstrap breakpoints here are the pixel widths:
size
xs <576px
sm ≥576px
md ≥768px
lg ≥992px
xl ≥1200px
xxl ≥1400px
Container max-width
None (auto)
540px
720px
960px
1140px
1320px
Class prefix
.col-
.col-sm-
.col-md-
.col-lg-
.col-xl-
.col-xxl-

Exercise

​Codepen fork the responsive column Codepen from above and change the grid measurements of the columns to see them change width, e.g, col-6 to col-2.
Inspect the CSS of the columns to see how the column widths are being set.

Further Reading For Bootstrap Day 1:

Introduction
getbootstrap

Bootstrap Day 2

Required Reading

Breakpoints
getbootstrap
Containers
getbootstrap
Forms
getbootstrap
Read all the sub-categories in Forms
Cards
getbootstrap
Dropdowns
getbootstrap
Navbar
getbootstrap
Flex
getbootstrap
Navs and tabs
getbootstrap
​
Last modified 7h ago