Bootstrap 5 alpha has arrived

Summary, download, next releases & tutorial

Bootstrap 5 Tutorial - check our video

This video is available as text (below) as well as 1,5 crash course which you can watch on the right side.


Summary of the tutorial:

Do you want to be up to date with Bootstrap 5 news and get notification about new Bootstrap 5 tutorials? Sign up for our newsletter

General
Software Updates

By subscribing you agree to receive the newsletter & commercial information from StartupFlow s.c. Kijowska 7, Warsaw. Policy

Bootstrap 5 tutorial - crash course for beginners


Download & documentation

Download Bootstrap 5 Bootstrap 5 documentation

Installation

Starter

The easiest way is to download this starting package. It contains all required css and js as well as index.html file with all dependencies included.

Manual / CDN

If you have an existing project you can either download css/js files from here.

Copy them into your project directory and link as follows:


              <!DOCTYPE html>
              <html lang="en">
                <head>
                  <!-- Import Bootstrap CSS -->
                  <link rel="stylesheet" href="css/bootstrap.css" />
                  [...]
                </head>

                <body>
                  [...]
                  <!-- Import Bootstrap dependency (Popper) and JS -->
                  <script src="https://unpkg.com/@popperjs/core@2.4.0/dist/umd/popper.min.js"></script>
                  <script src="js/bootstrap.js"></script>
                </body>
              </html>
            


Bootstrap buttons

Standard:



Outline:



Sizing:


          <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>

          <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>

          <button type="button" class="btn btn-outline-primary btn-lg">Primary XL</button>
          <button type="button" class="btn btn-outline-primary">Primary</button>
          <button type="button" class="btn btn-outline-primary btn-sm">Primary sms</button>
        

Bootstrap cards

Basic card

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum unde incidunt nobis doloremque exercitationem nihil accusantium voluptatibus? Doloribus optio doloremque nihil veritatis, magni, blanditiis modi dicta temporibus voluptates suscipit ab.
 
              <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <p class="card-text">
                    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Hic ut
                    dolore quia officia earum nemo libero, culpa neque error! Provident,
                    asperiores itaque. Ipsam molestiae deserunt quo. Id pariatur repellat
                    aperiam.
                  </p>
                </div>
              </div>
  
          

Card with image

Card title

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Hic ut dolore quia officia earum nemo libero, culpa neque error! Provident, asperiores itaque. Ipsam molestiae deserunt quo. Id pariatur repellat aperiam.


            <div class="card my-3" style="width: 18rem;">
              <img
                class="card-img-top"
                src="https://mdbootstrap.com/img/Marketing/mdb-press-pack/mdb-dark.jpg"
                alt=""
              />
              <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">
                  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Hic ut
                  dolore quia officia earum nemo libero, culpa neque error!
                  Provident, asperiores itaque. Ipsam molestiae deserunt quo. Id
                  pariatur repellat aperiam.
                </p>
              </div>
            </div>
          

Typography

Hadings preview:

h1 heading

h2 heading

h3 heading

h4 heading

h5 heading
h6 heading

    <h1>h1 heading</h1>
    <h2>h2 heading</h2>
    <h3>h3 heading</h3>
    <h4>h4 heading</h4>
    <h5>h5 heading</h5>
    <h6>h6 heading</h6>
              

Heading classes

If for some reason you can't use heading tag, you can easily style other elements like paragraphs to imitate Headings.

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading

h6. Bootstrap heading


                  <p class="h1">h1. Bootstrap heading</p>
    <p class="h2">h2. Bootstrap heading</p>
    <p class="h3">h3. Bootstrap heading</p>
    <p class="h4">h4. Bootstrap heading</p>
    <p class="h5">h5. Bootstrap heading</p>
    <p class="h6">h6. Bootstrap heading</p>
              

Displays

If you need something more verbose - use display classes.

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6


                  <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>
    <h1 class="display-5">Display 5</h1>
    <h1 class="display-6">Display 6</h1>
              

Inline text elements

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.


               <p>You can use the mark tag to <mark>highlight</mark> text.</p>
    <p><del>This line of text is meant to be treated as deleted text.</del></p>
    <p><s>This line of text is meant to be treated as no longer accurate.</s></p>
    <p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
    <p><u>This line of text will render as underlined</u></p>
    <p><small>This line of text is meant to be treated as fine print.</small></p>
    <p><strong>This line rendered as bold text.</strong></p>
    <p><em>This line rendered as italicized text.</em></p>
              

Responsive images


      <img class="img-fluid rounded" src="https://mdbootstrap.com/img/Marketing/mdb-press-pack/mdb-dark.jpg">

              

You can also add classes like rounded to round image corners.


Alerts


              
    <div class="alert alert-primary" role="alert">
      A simple primary alert—check it out!
    </div>
    <div class="alert alert-secondary" role="alert">
      A simple secondary alert—check it out!
    </div>
    <div class="alert alert-success" role="alert">
      A simple success alert—check it out!
    </div>
    <div class="alert alert-danger" role="alert">
      A simple danger alert—check it out!
    </div>
    <div class="alert alert-warning" role="alert">
      A simple warning alert—check it out!
    </div>
    <div class="alert alert-info" role="alert">
      A simple info alert—check it out!
    </div>
    <div class="alert alert-light" role="alert">
      A simple light alert—check it out!
    </div>
    <div class="alert alert-dark" role="alert">
      A simple dark alert—check it out!
    </div>
              


Icons


              
    <svg class="bi bi-alarm-fill" width="4rem" height="4rem" viewBox="0 0 16 16" fill="currentColor"
      xmlns="http://www.w3.org/2000/svg">
      <path fill-rule="evenodd"
        d="M5.5.5A.5.5 0 0 1 6 0h4a.5.5 0 0 1 0 1H9v1.07a7.002 7.002 0 0 1 3.537 12.26l.817.816a.5.5 0 0 1-.708.708l-.924-.925A6.967 6.967 0 0 1 8 16a6.967 6.967 0 0 1-3.722-1.07l-.924.924a.5.5 0 0 1-.708-.708l.817-.816A7.002 7.002 0 0 1 7 2.07V1H5.999a.5.5 0 0 1-.5-.5zM.86 5.387A2.5 2.5 0 1 1 4.387 1.86 8.035 8.035 0 0 0 .86 5.387zM13.5 1c-.753 0-1.429.333-1.887.86a8.035 8.035 0 0 1 3.527 3.527A2.5 2.5 0 0 0 13.5 1zm-5 4a.5.5 0 0 0-1 0v3.882l-1.447 2.894a.5.5 0 1 0 .894.448l1.5-3A.5.5 0 0 0 8.5 9V5z" />
    </svg>

    <svg class="bi bi-alt" width="4rem" height="4rem" viewBox="0 0 16 16" fill="currentColor"
      xmlns="http://www.w3.org/2000/svg">
      <path fill-rule="evenodd"
        d="M1 13.5a.5.5 0 0 0 .5.5h3.797a.5.5 0 0 0 .439-.26L11 3h3.5a.5.5 0 0 0 0-1h-3.797a.5.5 0 0 0-.439.26L5 13H1.5a.5.5 0 0 0-.5.5zm10 0a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 0-1h-3a.5.5 0 0 0-.5.5z" />
    </svg>

    <svg class="bi bi-toggles" width="4rem" height="4rem" viewBox="0 0 16 16" fill="currentColor"
      xmlns="http://www.w3.org/2000/svg">
      <path fill-rule="evenodd"
        d="M11.5 1h-7a2.5 2.5 0 0 0 0 5h7a2.5 2.5 0 0 0 0-5zm-7-1a3.5 3.5 0 1 0 0 7h7a3.5 3.5 0 1 0 0-7h-7zm0 9a3.5 3.5 0 1 0 0 7h7a3.5 3.5 0 1 0 0-7h-7zm7 6a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z" />
      <path fill-rule="evenodd"
        d="M8 3.5a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0zM4.5 6a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z" />
    </svg>

    <svg class="bi bi-bar-chart" width="4rem" height="4rem" viewBox="0 0 16 16" fill="currentColor"
      xmlns="http://www.w3.org/2000/svg">
      <path fill-rule="evenodd"
        d="M4 11H2v3h2v-3zm5-4H7v7h2V7zm5-5h-2v12h2V2zm-2-1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1h-2zM6 7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7zm-5 4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-3z" />
    </svg>

    <svg class="bi bi-reply-all-fill" width="4rem" height="4rem" viewBox="0 0 16 16" fill="currentColor"
      xmlns="http://www.w3.org/2000/svg">
      <path
        d="M8.079 11.9l4.568-3.281a.719.719 0 0 0 0-1.238L8.079 4.1A.716.716 0 0 0 7 4.719V6c-1.5 0-6 0-7 8 2.5-4.5 7-4 7-4v1.281c0 .56.606.898 1.079.62z" />
      <path fill-rule="evenodd"
        d="M10.868 4.293a.5.5 0 0 1 .7-.106l3.993 2.94a1.147 1.147 0 0 1 0 1.946l-3.994 2.94a.5.5 0 0 1-.593-.805l4.012-2.954a.493.493 0 0 1 .042-.028.147.147 0 0 0 0-.252.496.496 0 0 1-.042-.028l-4.012-2.954a.5.5 0 0 1-.106-.699z" />
    </svg>
              

Bootstrap 5 & Material Design

MDB has officially released the Material Design UI Kit for Bootstrap 5.

Please remember that this is still an alpha version and is not yet stable. Major changes will follow up to the beta.

Material Design for Bootstrap 5
MDB 5 - Bootstrap 5 & Material Design 2.0

Spreed the word

Bootstrap 5 Alpha released!

Tweet now
Material Design for Bootstrap 5 released!

Tweet now