Bootstrap

Bootstrap is the most popular CSS framework with more than 160k ⭐ on GitHub. Some redeeming features from my point of view are

  • 💫 easy to learn
  • 🐉 responsive (adapt to many screen resolutions)
  • 🖼️ a lot of examples (to copy-paste and adapt)
  • 🤙 a lot of features (tabs, dropdowns, popover...)
  • 📖 relatively nice looking

Refer to the documentation. For 5.2.3, you could use the code below

<head>
    <meta charset="utf-8">
+   <meta name="viewport" content="width=device-width, initial-scale=1">
+   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
+   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</head>

Learn Bootstrap

➡️ The best way to learn Bootstrap is to copy and paste examples. You can find them here.

  • Click on an example to your liking
  • Use CTRL+U or "View page source" to see the code
  • Copy-paste it inside your project and tune it

➡️ Additionally, open the documentation, and search what you want to do. For instance, a navbar. You will see

  • the code
  • a preview of the expected output

➡️ See also W3Schools/Bootstrap 5 and exercises.

📖 Bootstrap basics 📖

Like all CSS frameworks, Bootstrap is defining CSS classes, and you will simply have to use them on your HTML elements.

<someHTMLtag class="add bootstrap classes here" />

➡️ If your IDE isn't providing autocompletion for Bootstrap classes, you might consider downloading Bootstrap sources here, and adding them to your project.

For instance, to have this button:

You will have to set the text to black (text-dark), to have rounded corners, you will have to add btn, and to have a yellow button, you need btn-warning.

<button class="btn btn-warning text-dark">xxx</button>

🎨 Colors 🖌️

Usage:

  • Change the color of one element: text-<color>
  • Change the background of one element: bg-<color> 
<p class="text-success">green text</p>
<p class="bg-success">green background</p>

See Colors.

  • xxx-success
  • xxx-warning
  • xxx-danger
  • xxx-info
  • xxx-muted
  • And "xxx-dark" for black

🎬 Breakpoints🎬

See breakpoints.

Many CSS classes have variants based on a breakpoint. Basically, these are classes based on a media query that will only "enable" them if the screen fits the condition.

  • <none>: every screen size
  • sm: any screen of at least 576px (mobile)
  • md: any screen of at least 768px (tablet)
  • lg: any screen of at least 992px (pc)
  • xl: any screen of at least 1200px (big)
  • xll: any screen of at least 1400px (big too)

➡️ This is only useful to make more responsive interfaces.

For instance, with d-none that allows us to hide an element.

  • d-none: always hidden
  • d-sm-none: hidden for all aside from mobiles
  • d-md-none: hidden for all aside from mobiles+tablets
  • ...

If you want to hide something on mobile only, you will have to combine two classes:

  • d-none: always hidden
  • d-md-block: always shown if the screen is at least 768px long

When the screen size is at least 768px long, the latter being more specific takes precedence over the former.

📦 Useful classes 📦

Visibility

  • d-none: hide something (support breakpoints)
  • d-block: show something (support breakpoints)
  • d-print-none: do not show when printing the page

Alignment

  • align-self-center: align center (vertically)
  • justify-content-center: align center (horizontally)
  • text-center: center text (horizontally)
  • text-start/text-end: align text (left/right)

Text

  • h1/h2/.../h6: give the same style as the matching header
  • lead: give a special style to a paragraph
  • display-n (1 to 6): huge titles

Less used/useful

  • text-truncate/text-break
  • text-lowercase/text-uppercase

Margins/Padding (see Margins/Padding, support breakpoints)

  • p-0/p-1/.../p-5: padding levels
  • m-0/m-1/.../m-5: margin levels
  • pt/pb/ps/pe-<level>: padding on only one corner (s=left, e=right)
  • mt/mb/ms/me-<level>: margin on only one corner (s=left, e=right)
  • mx-<level>/my-<level>: margin on both s/e or t/b
  • px-<level>/py-<level>: padding on both s/e or t/b
  • mx-auto/my-auto: center horizontally/vertically
<p class="pt-5 mx-0">Padding-top level 5 (=3rem)</p>
<p class="mx-3">Margin x and y, level 3 (=1rem)</p>

Style

  • rounded-0/.../rounded-5: rounded corners
  • border-<color>: used to set border-color

Size

  • w-auto/w-0/w-25/w-50/w-75/w-100: width (w-50=50%)
  • h-auto/h-0/h-25/h-50/h-75/h-100: height (h-50=50%)
  • mw-100: max-width 100% (ex: prevent horizontal overflow for images)
  • hw-100: max-height 100%

🏙️ Row and columns 🏙️

Rows are allowing us to add items next to each other. Using breakpoints, we can do things like display one element per "row" on mobile, two on tablets, and three or more on computers.

<div class="row mx-0">
    <div class="col-md-6 col-12"></div>
    <div class="col-md-6 col-12"></div>
</div>

A row is 12 columns. A row will keep elements on the same line if their sum is less than 12, otherwise, they will go to the next line.

In the code above, on mobile, each element will take 12 columns (ex: a whole line), but on tablets (md), each element will take 6 columns, so we will be able to put two on the same line.

This code is a simplified version of the previous one, doing the same. row-cols-md-2 means that we should have 2 columns on md or higher, otherwise, we will have one (as there is no other rule).

<div class="row row-cols-lg-2">
    <div></div>
    <div></div>
</div>

Other notes

  • col: without a number, columns are of equal size

📊 Tables 🗓️

See Tables.

Everything is starting by adding the table class.

<table class="table"></table>

Then, as always, you can add more classes.

Style

  • table-hover: hover the current row
  • table-striped: alternate colors between rows
  • table-<color>: tune the table using the color (danger/warning...)

Borders

By default, there are only borders between rows.

  • table-bordered: add all borders
  • table-borderless: remove all borders

Special

  • table-responsive: add a scrollbar if the screen is too small

🌠 Components 🌠️

  • Alerts: useful to show a message (ex: announcement, errors...)
<p class="alert alert-danger">xxx</p>

👻 To-do 👻

Stuff that I found, but never read/used yet.

h-100
fs-4
fw-bold
align-middle
btn-outline-info
list-inline + list-inline-item