Bootstrap 4

Bootstrap 4 is a CSS framework with a mobile-first flexbox grid system, extensive prebuilt components, and powerful utility classes.

<!-- CSS -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
/>

<!-- JS (requires jQuery and Popper) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-md-8">Main content</div>
    <div class="col-md-4">Sidebar</div>
  </div>
</div>

         576        768        992        1200
'     '     '     '     '     '     '     '
<--------^----------^----------^----------^------>
   xs        sm         md         lg        xl
 (phone)  (tablet)   (laptop)  (desktop)  (wide)

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
);

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

All columns equal width.

<div class="row">
  <div class="col-12 col-md-8">.col-12 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

Mobile-first responsive layout.

<div class="row row-cols-1 row-cols-md-2 row-cols-lg-4">
  <div class="col">Column</div>
  <div class="col">Column</div>
  <div class="col">Column</div>
  <div class="col">Column</div>
</div>

Set columns per row.

<div class="row no-gutters">
  <div class="col">No spacing</div>
  <div class="col">No spacing</div>
</div>

<!-- Vertical alignment -->
<div class="row align-items-start">...</div>
<div class="row align-items-center">...</div>
<div class="row align-items-end">...</div>

<!-- Horizontal alignment -->
<div class="row justify-content-start">...</div>
<div class="row justify-content-center">...</div>
<div class="row justify-content-end">...</div>
<div class="row justify-content-between">...</div>
<div class="row justify-content-around">...</div>

<div class="row">
  <div class="col order-3">First (order-3)</div>
  <div class="col order-1">Second (order-1)</div>
  <div class="col order-2">Third (order-2)</div>
</div>

Reorder columns with flexbox.

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>

<div class="row">
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>

<div class="row">
  <div class="col-sm-9">
    Level 1: .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>

Format: {property}{sides}-{size} or {property}{sides}-{breakpoint}-{size}

<!-- Margin -->
<div class="mt-3">Margin top 1rem</div>
<div class="mb-5">Margin bottom 3rem</div>
<div class="mx-auto" style="width: 200px;">Centered block</div>

<!-- Padding -->
<div class="pt-2">Padding top .5rem</div>
<div class="px-5">Padding x 3rem</div>
<div class="p-0">No padding</div>

<!-- Responsive -->
<div class="mt-3 mt-md-5">Responsive margin</div>

<!-- Negative margins -->
<div class="mt-n3">Negative margin top</div>

<div class="d-flex">Flex container</div>
<div class="d-inline-flex">Inline flex</div>

<div class="d-flex flex-row">Horizontal</div>
<div class="d-flex flex-row-reverse">Reverse</div>
<div class="d-flex flex-column">Vertical</div>
<div class="d-flex flex-column-reverse">Reverse vertical</div>

<div class="d-flex justify-content-start">Start</div>
<div class="d-flex justify-content-end">End</div>
<div class="d-flex justify-content-center">Center</div>
<div class="d-flex justify-content-between">Space between</div>
<div class="d-flex justify-content-around">Space around</div>

<div class="d-flex align-items-start">Start</div>
<div class="d-flex align-items-end">End</div>
<div class="d-flex align-items-center">Center</div>
<div class="d-flex align-items-baseline">Baseline</div>
<div class="d-flex align-items-stretch">Stretch</div>

<div class="align-self-start">Start</div>
<div class="align-self-end">End</div>
<div class="align-self-center">Center</div>
<div class="align-self-baseline">Baseline</div>
<div class="align-self-stretch">Stretch</div>

<div class="d-flex flex-wrap">Wrap</div>
<div class="d-flex flex-nowrap">No wrap</div>
<div class="d-flex flex-wrap-reverse">Wrap reverse</div>

<div class="d-flex">
  <div class="flex-fill">Fill space</div>
  <div class="flex-fill">Equal fill</div>
</div>

<div class="flex-grow-1">Grow</div>
<div class="flex-grow-0">Don't grow</div>
<div class="flex-shrink-1">Shrink</div>
<div class="flex-shrink-0">Don't shrink</div>

<div class="d-flex">
  <div>Left</div>
  <div class="ml-auto">Pushed right</div>
</div>

<div class="d-flex">
  <div class="mr-auto">Left</div>
  <div>Right</div>
</div>

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="..." />
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Replaces panels/wells/thumbnails.

<div class="card">
  <div class="card-header">Featured</div>
  <div class="card-body">
    <h5 class="card-title">Special title</h5>
    <p class="card-text">With supporting text.</p>
    <a href="#" class="btn btn-primary">Go</a>
  </div>
  <div class="card-footer text-muted">2 days ago</div>
</div>

<!-- Background colors -->
<div class="card text-white bg-primary">...</div>
<div class="card text-white bg-success">...</div>
<div class="card text-white bg-danger">...</div>
<div class="card text-white bg-warning">...</div>
<div class="card text-white bg-info">...</div>
<div class="card text-white bg-dark">...</div>

<!-- Border colors -->
<div class="card border-primary">...</div>
<div class="card border-danger">...</div>

<!-- Card group -->
<div class="card-group">
  <div class="card">...</div>
  <div class="card">...</div>
  <div class="card">...</div>
</div>

<!-- Card deck -->
<div class="card-deck">
  <div class="card">...</div>
  <div class="card">...</div>
  <div class="card">...</div>
</div>

<!-- Card columns (masonry) -->
<div class="card-columns">
  <div class="card">...</div>
  <div class="card">...</div>
  <div class="card">...</div>
</div>

<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item"><a class="nav-link active" href="#">Active</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
    </ul>
  </div>
  <div class="card-body">...</div>
</div>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Brand</a>
  <button
    class="navbar-toggler"
    type="button"
    data-toggle="collapse"
    data-target="#navbarNav"
  >
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#"
          >Home <span class="sr-only">(current)</span></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>
</nav>

Requires .navbar-expand-* for collapse.

<!-- Light -->
<nav class="navbar navbar-light bg-light">...</nav>
<nav class="navbar navbar-light" style="background-color: #e3f2fd;">...</nav>

<!-- Dark -->
<nav class="navbar navbar-dark bg-dark">...</nav>
<nav class="navbar navbar-dark bg-primary">...</nav>

Needs both color AND background.

<!-- Fixed top -->
<nav class="navbar fixed-top">...</nav>

<!-- Fixed bottom -->
<nav class="navbar fixed-bottom">...</nav>

<!-- Sticky top -->
<nav class="navbar sticky-top">...</nav>

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" />
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">
      Search
    </button>
  </form>
</nav>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="collapse navbar-collapse">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">
          Dropdown
        </a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
        </div>
      </li>
    </ul>
    <span class="navbar-text">Navbar text</span>
  </div>
</nav>

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

<input class="form-control form-control-lg" placeholder="Large" />
<input class="form-control" placeholder="Default" />
<input class="form-control form-control-sm" placeholder="Small" />

<!-- Custom checkbox -->
<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="check1" />
  <label class="custom-control-label" for="check1">Check this</label>
</div>

<!-- Custom radio -->
<div class="custom-control custom-radio">
  <input type="radio" class="custom-control-input" id="radio1" name="radio" />
  <label class="custom-control-label" for="radio1">Option 1</label>
</div>

<!-- Custom switch -->
<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="switch1" />
  <label class="custom-control-label" for="switch1">Toggle</label>
</div>

<!-- Custom select -->
<select class="custom-select">
  <option selected>Open this select</option>
  <option value="1">One</option>
  <option value="2">Two</option>
</select>

<!-- Valid -->
<input class="form-control is-valid" />
<div class="valid-feedback">Looks good!</div>

<!-- Invalid -->
<input class="form-control is-invalid" />
<div class="invalid-feedback">Please provide a valid value.</div>

<form class="form-inline">
  <label class="sr-only" for="name">Name</label>
  <input
    type="text"
    class="form-control mb-2 mr-sm-2"
    id="name"
    placeholder="Name"
  />

  <label class="sr-only" for="email">Email</label>
  <input
    type="email"
    class="form-control mb-2 mr-sm-2"
    id="email"
    placeholder="Email"
  />

  <button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>

<form>
  <div class="form-group row">
    <label for="email" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="email" />
    </div>
  </div>
  <div class="form-group row">
    <div class="col-sm-10 offset-sm-2">
      <button type="submit" class="btn btn-primary">Sign in</button>
    </div>
  </div>
</form>

<form>
  <div class="form-row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name" />
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name" />
    </div>
  </div>
</form>

Tighter gutters than .row.

<div class="d-none">Hidden on all</div>
<div class="d-block">Block on all</div>
<div class="d-inline">Inline on all</div>
<div class="d-inline-block">Inline block</div>

<!-- Hide on mobile, show on md+ -->
<div class="d-none d-md-block">Hidden below md</div>

<!-- Show on mobile only -->
<div class="d-block d-md-none">Visible below md only</div>

<!-- Hide on tablet -->
<div class="d-block d-md-none d-lg-block">Hidden on md</div>

<div class="d-print-none">Hidden when printing</div>
<div class="d-none d-print-block">Only visible when printing</div>

<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>

Larger, lighter headings.

<p class="lead">Lead paragraph stands out.</p>

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

<!-- Responsive -->
<p class="text-sm-center">Center on sm+</p>

<p class="text-lowercase">LOWERCASED TEXT</p>
<p class="text-uppercase">uppercased text</p>
<p class="text-capitalize">capitalized text</p>

<p class="font-weight-bold">Bold text</p>
<p class="font-weight-bolder">Bolder weight</p>
<p class="font-weight-normal">Normal weight</p>
<p class="font-weight-light">Light weight</p>
<p class="font-weight-lighter">Lighter weight</p>
<p class="font-italic">Italic text</p>

<p class="text-truncate">Truncated text with ellipsis</p>
<p class="text-nowrap">No wrapping text</p>
<p class="text-break">Break long words</p>
<p class="text-monospace">Monospace text</p>

<p class="text-primary">Primary text</p>
<p class="text-secondary">Secondary text</p>
<p class="text-success">Success text</p>
<p class="text-danger">Danger text</p>
<p class="text-warning">Warning text</p>
<p class="text-info">Info text</p>
<p class="text-light bg-dark">Light text</p>
<p class="text-dark">Dark text</p>
<p class="text-muted">Muted text</p>
<p class="text-white bg-dark">White text</p>

• No more -xs infix: col-xs-6 becomes col-6
• Flexbox by default: Grid, navbar, cards all use flexbox
• Panels → Cards: Single component for panels, wells, thumbnails
• Inverted responsive utilities: Use d-none d-md-block instead of hidden-xs hidden-sm
• Push/Pull → Order: Use order-* classes for column reordering
• Navbar requires expand class: Must specify .navbar-expand-lg etc.
• Navbar color separation: Use both .navbar-light AND .bg-light
• Glyphicons removed: Must use third-party icon library
• jQuery still required: BS4 components need jQuery (removed in BS5)
• New spacing utilities: m-* and p-* classes for margin/padding

⚠️ No more -xs infix: col-xs-6 → col-6. The xs breakpoint doesn't use an infix.

⚠️ Navbar requires .navbar-expand-*: Without it, navbar won't collapse on mobile.

⚠️ Navbar needs BOTH color scheme AND background: Use navbar-light bg-light not just navbar-light.

⚠️ Panels/wells/thumbnails all replaced by Cards: Single unified component.

⚠️ Glyphicons removed: Must use Font Awesome or other third-party icons.

⚠️ .hidden-* replaced with .d-none .d-{bp}-block: Inverted logic compared to BS3.

⚠️ Push/pull replaced with flexbox order-* classes: No more .col-md-push-4.

⚠️ jQuery still required in BS4: Dropped in Bootstrap 5, but BS4 needs it.

⚠️ BS4.6.2 is the FINAL release: No more updates. Consider migrating to Bootstrap 5.

⚠️ Custom controls require specific markup: Use .custom-control wrapper with .custom-control-input and .custom-control-label.