Bootstrap | Notion

Bootstrap - CSS Framework

For Complete Reference

Importing via CDN

<link href="<https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css>" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="<https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js>" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

Bootstrap Typography

Display headings: display-1 to display-6 Make paragraph standout: lead

    <p class="display-1">Display - 1</p>
    <p class="display-2">Display - 2</p>
    <p class="display-3">Display - 3</p>
    <p class="display-4">Display - 4</p>
    <p class="display-5">Display - 5</p>
    <p class="display-6">Display - 6</p>

    <p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto veritatis ipsum ea molestiae, nisi neque eligendi voluptates quo? Ipsa fugit repellendus exercitationem voluptate et hic? Eum ipsum, cumque dolore nostrum fugit tempore sequi illo praesentium corporis quisquam, nisi eius voluptatem facilis provident, cupiditate quod voluptatibus. Ducimus, quis eius? Hic, quae!</p>

Output

Text Align

<p class="text-start">This is a paragraph with left-aligned text.</p>
<p class="text-center">This is a paragraph with center-aligned text.</p>
<p class="text-end">This is a paragraph with right-aligned text.</p>

Output

Text Color Classes

<p class="text-primary">This is a paragraph with primary text color.</p>
<p class="text-secondary">This is a paragraph with secondary text color.</p>
<p class="text-success">This is a paragraph with success text color.</p>
<p class="text-danger">This is a paragraph with danger text color.</p>
<p class="text-warning">This is a paragraph with warning text color.</p>
<p class="text-info">This is a paragraph with info text color.</p>
<p class="text-light bg-dark">This is a paragraph with light text color.</p>
<p class="text-dark">This is a paragraph with dark text color.</p>
<p class="text-muted">This is a paragraph with muted text color.</p>
<p class="text-white bg-dark">This is a paragraph with white text color.</p>
<p class="text-black-50">This is a paragraph with black-50 text color.</p>

Output

List Classes

<ul class="list-unstyled">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
<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>
<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>

Output

Colored Links

Untitled

<a class="link-primary" href="#">Primary Link</a>
<a  class="link-secondary" href="#">Secondary Link</a>

Background Colors Classes

<p class="bg-primary">This is a paragraph with primary background color.</p>
<p class="bg-secondary">This is a paragraph with secondary background color.</p>
<p class="bg-success">This is a paragraph with success background color.</p>
<p class="bg-danger">This is a paragraph with danger background color.</p>
<p class="bg-warning">This is a paragraph with warning background color.</p>
<p class="bg-info">This is a paragraph with info background color.</p>
<p class="bg-light">This is a paragraph with light background color.</p>
<p class="bg-dark">This is a paragraph with dark background color.</p>
<p class="bg-white">This is a paragraph with white background color.</p>
<p class="bg-transparent">This is a paragraph with transparent background color.</p>
<p class="bg-gradient">This is a paragraph with gradient background color.</p>

Output

Image Classes

img-fluid

Output

img-thumbnail

Output

rounded

Output

float-start

Output

float-end

Output

d-block mx-auto

Output

Border Colors

<div class="container">
    <h1>Border Colors</h1>
    <p>Use <code>.border-*</code> classes to set the border color of an element.</p>
    <div class="row">
        <div class="col-4">
            <div class="border border-primary p-3">Primary</div>
        </div>
        <div class="col-4">
            <div class="border border-secondary p-3">Secondary</div>
        </div>
        <div class="col-4">
            <div class="border border-success p-3">Success</div>
        </div>
    </div>
    <div class="row">
        <div class="col-4">
            <div class="border border-danger p-3">Danger</div>
        </div>
        <div class="col-4">
            <div class="border border-warning p-3">Warning</div>
        </div>
        <div class="col-4">
            <div class="border border-info p-3">Info</div>
        </div>
    </div>
    <div class="row">
        <div class="col-4">
            <div class="border border-light p-3">Light</div>
        </div>
        <div class="col-4">
            <div class="border border-dark p-3">Dark</div>
        </div>
        <div class="col-4">
            <div class="border border-white p-3">White</div>
        </div>
    </div>
</div>

Border width

border-1 border-2 border-3 border-4 border-5

Border radius:

rounded rounded-top rounded-end rounded-bottom rounded-start rounded-circle rounded-pill

Shadow classes:

shadow-sm shadow shadow-lg

Sizing classes:

w-25 (width:25%) w-50 w-75 w-100 h-25 h-50 h-75 h-100

Spacing classes:(Size values are 0 to 5)

m mt mb ms me mx my p pt pb ps pe

Display property classes:

d-inline d-block d-flex

Table classes:

table table-striped table-dark table-hover table-bordered table-borderless table-sm

Untitled