Language: EN
LuisLlamas Logo
Search
⏲️ ~ 6 minutes Beginner
cheatsheet-bootstrap

Bootstrap Cheatsheet

Bootstrap is a front-end development framework that allows you to create responsive and modern websites using HTML, CSS, and JavaScript.

Bootstrap Installation

You can install Bootstrap through CDN or integrate it into your project by downloading the files.

Installation via npm

If you are using NPM, you can install Bootstrap with the following command:

npm install bootstrap

Then, import Bootstrap into your JavaScript or CSS file:

import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

Installation from CDN

<link href="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>

Direct Download

Download from https://getbootstrap.com.

Basic Structure

Basic HTML with Bootstrap

Basic structure of an HTML file that includes Bootstrap.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Project</title>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-center">Hello, Bootstrap!</h1>
</body>
</html>

Containers

Containers are elements that encapsulate content and are essential for the grid system. You can use two types of containers:

Fixed Container

Has a maximum width that adapts to different screen sizes.

<div class="container">
<!-- Content -->
</div>

Fluid Container

Takes up 100% of the width.

<div class="container-fluid">
  <!-- Content -->
</div>

Rows

Rows (.row) are necessary to group columns (.col). The grid system is based on 12 columns.

<div class="container">
  <div class="row">
    <div class="col-md-6">Column 1</div>
    <div class="col-md-6">Column 2</div>
  </div>
</div>

Grid System

Grid Structure

The grid system uses 12 columns per row and is responsive.

<div class="container">
  <div class="row">
    <div class="col-md-6">Column 1 (6 columns)</div>
    <div class="col-md-6">Column 2 (6 columns)</div>
  </div>
</div>

Column Classes

Bootstrap allows you to adjust the behavior of columns at different screen sizes:

  • col-: Extra small (mobile)
  • col-sm-: Small (screens ≥ 576px)
  • col-md-: Medium (screens ≥ 768px)
  • col-lg-: Large (screens ≥ 992px)
  • col-xl-: Extra large (screens ≥ 1200px)

Column Alignment

  • Vertical alignment:
<div class="row align-items-center">...</div>
  • Horizontal alignment:
<div class="row justify-content-center">...</div>

Utility Classes

Spacing

Spacing classes allow you to control the margins and padding of elements. You can use classes that affect all sides or just one or two specific sides.

Margins

Margin classes: m-{t|b|l|r|x|y}-{breakpoint}-{size}

  • t: Top
  • b: Bottom
  • l: Left
  • r: Right
  • x: Horizontal (left and right)
  • y: Vertical (top and bottom)

Breakpoints: sm, md, lg, xl, xxl to apply margins at different screen sizes.

Sizes: Values from 0 to 5, where 0 removes the margin and 5 applies the maximum.

<div class="m-3">Margin on all sides</div>
<div class="mt-3 mb-3">Margin top and bottom of 3</div>
<div class="mx-auto">Horizontal center</div>

Padding

Padding classes: p-{t|b|l|r|x|y}-{breakpoint}-{size} with the same rules as margins.

<div class="p-3">Padding on all sides</div>
<div class="py-2">Padding top and bottom of 2</div>
<div class="px-4">Padding left and right of 4</div>

Alignment

Alignment classes allow you to easily align text and elements.

  • text-left: Left alignment
  • text-center: Center alignment
  • text-right: Right alignment
  • text-justify: Justified text
<p class="text-center">Centered text</p>
<p class="text-right">Right-aligned text</p>

Alignment of flexible elements (using Flexbox):

  • align-items-start: Align to start
  • align-items-center: Align to center
  • align-items-end: Align to end
  • justify-content-between: Space between elements
<div class="d-flex justify-content-between">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

Background Colors

You can apply background colors to elements using Bootstrap’s predefined classes.

Background classes: bg-{color}

  • Available colors: primary, secondary, success, danger, warning, info, light, dark, white, and transparent.
<div class="bg-primary text-white">Blue background</div>
<div class="bg-danger text-white">Red background</div>
<div class="bg-light text-dark">Light background</div>

Typography and Texts

Bootstrap provides several classes to adjust typography and text styling.

Headings

  • Use heading classes for predefined styles.
<h1 class="display-1">Large Heading</h1>
<h2 class="display-2">Medium Heading</h2>
<h3 class="display-3">Small Heading</h3>

Text Alignment

In addition to text alignment, you can apply other formatting classes.

<p class="text-center">Centered text</p>
<p class="text-right">Right-aligned text</p>

Text Colors

Text classes: text-{color}

  • Available colors: primary, secondary, success, danger, warning, info, light, dark, muted, white.
<p class="text-primary">Primary text</p>
<p class="text-danger">Red text</p>
<p class="text-muted">Muted text</p>

Font Change

Bootstrap offers classes to change font style.

  • font-weight-bold: Bold
  • font-weight-light: Light
  • font-italic: Italic
  • font-monospace: Monospace font
<p class="font-weight-bold">Bold text</p>
<p class="font-italic">Italic text</p>
<p class="font-monospace">Text with monospace font</p>

Visibility

Control the visibility of elements at different screen sizes.

Visibility classes: d-{breakpoint}-{value}

  • d-none: Hides the element
  • d-block: Shows the element as block
  • d-inline: Shows the element inline
<div class="d-none d-md-block">Visible only on medium screens and above</div>

Borders

Apply classes to control border styles.

border, border-{color}, rounded, rounded-{size}

<div class="border border-primary rounded">Div with blue border and rounded corners</div>

Shadows

Add shadows to elements for greater depth.

shadow, shadow-sm, shadow-lg

<div class="shadow">Div with normal shadow</div>
<div class="shadow-lg">Div with large shadow</div>

Tables and Lists

Tables

Table with Default Style

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Name</th>
      <th scope="col">Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Luis</td>
      <td>luis@example.com</td>
    </tr>
  </tbody>
</table>

Table with Colors and Stripes

<table class="table table-striped table-hover">
  <thead>
    <tr>
      <th>#</th>
      <th>Product</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>Product A</td>
      <td>$50</td>
    </tr>
  </tbody>
</table>

Lists

Inline List

<ul class="list-inline">
  <li class="list-inline-item">Item 1</li>
  <li class="list-inline-item">Item 2</li>
  <li class="list-inline-item">Item 3</li>
</ul>

Grouped List

<ul class="list-group">
  <li class="list-group-item">Item 1</li>
  <li class="list-group-item">Item 2</li>
  <li class="list-group-item">Item 3</li>
</ul>

Common Components

Buttons

Buttons with Different Styles

Buttons in Bootstrap have predefined classes for colors and sizes.

<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-danger">Danger</button>

Buttons with Sizes

<button class="btn btn-primary btn-lg">Large</button>
<button class="btn btn-primary btn-sm">Small</button>

Buttons with Icons (using Font Awesome or similar)

<button class="btn btn-primary">
  <i class="fas fa-download"></i> Download
</button>

Forms

Basic Form

Forms in Bootstrap are easily styled.

<form>
  <div class="mb-3">
    <label for="email" class="form-label">Email address</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="mb-3">
    <label for="password" class="form-label">Password</label>
    <input type="password" class="form-control" id="password">
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Inline Form

<form class="row row-cols-lg-auto g-3 align-items-center">
  <input class="form-control" type="email" placeholder="Email">
  <button class="btn btn-primary" type="submit">Subscribe</button>
</form>

Cards

Basic Card

<div class="card" style="width: 18rem;">
  <img src="image.jpg" class="card-img-top" alt="Image">
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">Brief description of the card.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Card with Grouped List

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Item 1</li>
    <li class="list-group-item">Item 2</li>
    <li class="list-group-item">Item 3</li>
  </ul>
</div>

Basic Navigation Bar

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Brand</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link active" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
    </ul>
  </div>
</nav>
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <form class="form-inline">
    <button class="btn btn-outline-success" type="button">Action</button>
  </form>
</nav>

Modals

Basic Modal

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
  Open Modal
</button>

<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="myModalLabel">Modal Title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Modal content.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

On this page