Bootstrap 4 Cheatsheet

This site is a reference for Bootstrap

Last updated on 09 March, 2021 at 13:59:41 Optimized for

Bootstrap is a high-level CSS framework directed at responsive frontend development. It is amongst the most starred projects at Github with more than 140k stars.

Website logo
For the full experience we recommend viewing this website on a desktop or tablet.

Notation

On The Use of Asterisks (*)

Whenever you see a class like .float-*-* the first asterisk is a replacement a class specifier (e.g. left) and the second is a breakpoint specifier (e.g. md). In action this is the same as float-<direction>-<breakpoint> e.g. float-right-lg

Starter Template

Copy this starter template and use it as a basis to get going instantly

<!DOCTYPE html>
<html lang="en">
<head>    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">    <!-- Main CSS -->
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    <div class="container"><h1>Hello, world!</h1>
        <div class="row">
            <div class="col-sm-6">Left Column</div>
            <div class="col-sm-6">Right Column</div>
        </div>
    </div><!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>    <!-- Main JS -->
<script src="js/main.js"></script>
</body>
</html>
Navbar

Use this navbar as a starting point

<nav class="navbar navbar-toggleable-md navbar-dark bg-primary">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <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>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown link </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </li>
        </ul>
    </div>
</nav>
Modal

Use this navbar as a starting point

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> Launch demo modal</button><!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body"><h2>Modal body heading</h2>
                <p>Modal body text description</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>
Forms

Use this navbar as a starting point

<form>
    <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
        <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
    </div>
    <div class="form-group"><label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    </div>
    <div class="checkbox">
        <label><input type="checkbox"> Check me out </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>
Responsive Embed

<div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="..."></iframe>
</div>
Tables

<table class="table">
    <thead class="thead-default">
    <tr>
        <th>#</th>
        <th>table head-default</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th scope="row">1</th>
        <td>Nina</td>
    </tr>
    </tbody>
</table>
<table class="table">
    <thead class="thead-inverse">
    <tr>
        <th>#</th>
        <th>thead-inverse</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th scope="row">1</th>
        <td>Nina</td>
    </tr>
    </tbody>
</table>
Cards

<div class="card" style="width: 20rem;">
    <img class="card-img-top w-100" src="https://dummyimage.com/600x400/563d7c/fff" alt="Card image cap">
    <div class="card-body">
        <h4 class="card-title">Card title</h4>
        <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>
Jumbotron

<div class="jumbotron jumbotron-fluid">
    <div class="container">
        <h1 class="display-3">Fluid jumbotron</h1>
        <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
    </div>
</div>
Breadcrumbs

<ol class="breadcrumb">
    <li><a href="#">Home</a></li>
    <li><a href="#">Library</a></li>
    <li class="active">Data</li>
</ol>
Breaking Points

Syntax Description
Extra small

< 544px

Small

≥ 544px

Medium

≥ 768px

Large

≥ 992px

Extra large

≥ 1200px

Colors

Syntax Description
text-primary

text-secondary

text-success

text-danger

text-warning

text-info

text-light

text-dark

text-white

bg-primary

bg-secondary

bg-success

bg-danger

bg-warning

bg-info

bg-light

bg-dark

bg-white

Buttons

Syntax Description
btn

Needs to be added to all buttons - sets margin and padding

btn-*

Replace asterisks with any color. E.g. primary, secondary, dark. Adds color to the button

btn-outline-*

Same as above but does not adds a background color to the button

btn-lg

A larger button with more padding

btn-sm

A smaller button with less padding

Typography

Classname Description
text-left

Left aligned text

text-center

Center aligned text

text-right

Right aligned text

text-justify

Justified text

text-nowrap

No wrap text

text-lowercause

Lowercase text

text-uppercase

Uppercase text

text-capitalize

Capitalized text

lead

Good for first paragraph of article

blockquote

h1 ... h6

This feature is useful for SEO when you want the size of a h3 header but your previous heading was a h2. Now you can accomplish that without weakening your SEO

display-#

Display 1-4. If you need big headings. These are bigger than h1

Lists

Syntax Description
list-unstyled

Removes default list margin

dl-horizontal

Makes list items two columns

list-inline

Makes list items inline

list-inline-item

Added to each li

Images

Syntax Description
img-fluid

Make an image responsive

rounded

Adds rounded corners to image

rounded-circle

Crops image to be circle

img-thumbnail

Adds rounded corner + border

Floats

Syntax Description
float-left

Floats item left

float-right

Floats item right

float-none

Removes float

float-*-*

Add breakpoints if needed