Morioh
Login
Shannon Atkinson

Shannon Atkinson

11 months ago

Bootstrap Cheatsheet: Everything You Need to Know to Get Started

Learn the essentials of Bootstrap, a popular CSS framework, with this comprehensive cheatsheet for beginners. Get started with building responsive, mobile-first websites quickly and easily, with code examples and clear explanations.

Welcome to the Bootstrap Cheatsheet featuring the best Bootstrap code snippets and cheat sheets. Our collection includes essential Bootstrap fundamentals, useful methods and components, and a variety of beautifully designed Bootstrap snippets and CSS classes. Whether you are a beginner looking to learn the basics or an experienced developer in need of a quick reference, our cheat sheets are the perfect tool to help you improve your Bootstrap skills and develop stunning web pages. Browse our collection now and take your Bootstrap knowledge to the next level.

General

Import Bootstrap

<html>
<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</head>
<body>
  <div class="container">
    <!-- Content here -->
  </div>
</body>
</html>

More info

Grid

Equal column width grid

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

More info

Auto-layout columns grid

<div class="container">
  <div class="row">
    <div class="col-8">col-8</div>
    <div class="col-4">col-4</div>
  </div>
</div>

More info

Nested grids

<div class="container">
  <div class="row">
    <div class="col-sm-3">
      Level 1: .col-sm-3
    </div>
    <div class="col-sm-9">
      <div class="row">
        <div class="col-8 col-sm-6">
          Level 2: .col-8 .col-sm-6
        </div>
        <div class="col-4 col-sm-6">
          Level 2: .col-4 .col-sm-6
        </div>
      </div>
    </div>
  </div>
</div>

More info

Responsive grid

<div class="row">
    <div class="col-sm-3 col-md-6">Hello</div>
    <div class="col-sm-3 col-md-6">Hello</div>
    <div class="col-sm-3 col-md-6">Hello</div>
    <div class="col-sm-3 col-md-6">Hello</div>
</div>

More info

Buttons

Standard buttons

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>

More info

Outline buttons

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

Large buttons

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>

Small buttons

<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>

More info

Forms

Inputs

<form>
  <label for="email" class="form-label">Email address</label>
  <input type="email" class="form-control" id="email" placeholder="name@example.com">

  <label for="description" class="form-label">Example text area</label>
  <textarea class="form-control" id="description" rows="3"></textarea>
</form>

Flexbox

Justify content

<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>
<div class="d-flex justify-content-evenly">...</div>

More info

Navigation

Responsive navigation

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</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" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

More info

Cards

Simple card

<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

More info

Utility Classes

Background

<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-dark">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-body text-dark">.bg-body</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>

More info

Borders

<span class="border"></span>
<span class="border-top"></span>
<span class="border-end"></span>
<span class="border-bottom"></span>
<span class="border-start"></span>

More info

Colors

<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning bg-dark">.text-warning</p>
<p class="text-info bg-dark">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>

More info

Display property

<div class="d-inline">
  display inline
</div>
<span class="d-block">
  display block
</span>
<span class="d-flex">
  display flex
</span>
<span class="d-none">
  display none
</span>
<div class="d-none d-lg-block">
  Visible on large screens, hidden on smaller resolutions
</div>

More info

Shadows

<div class="shadow-none">No shadow</div>
<div class="shadow-sm">Small shadow</div>
<div class="shadow">Regular shadow</div>
<div class="shadow-lg">Larger shadow</div>

More info

Text

<p class="text-center">Center aligned text</p>
<p class="text-end">End aligned text</p>
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>
<p class="fw-bold">Bold text.</p>
<p class="text-decoration-underline">This text has a line underneath it.</p>
<p class="text-decoration-line-through">This text has a line going through it.</p>
<a href="#" class="text-decoration-none">This link has its text decoration removed</a>

More info

Spacing

Margin

<div class="m-0">
  No margin
</div>
<div class="mt-5">
  Large margin top
</div>
<div class="mt-5 mr-5">
  Large margin top and right
</div>
<div class="m-5">
  Large margin
</div>
<div class="m-3 ml-1">
  Medium margin and small margin left
</div>

More info

Padding

<div class="p-0">
  No padding
</div>
<div class="pt-5">
  Large padding top
</div>
<div class="pt-5 pr-5">
  Large padding top and right
</div>
<div class="p-5">
  Large padding
</div>
<div class="p-3 pl-1">
  Medium padding and small padding left
</div>

More info

Image

Responsive image


<img src="..." class="img-fluid" alt="...">

More info

#bootstrap #css #html

Bootstrap Cheatsheet: Everything You Need to Know to Get Started
18.30 GEEK