Bootstrap 5 Learning Kit

XSXSSMSMMDMDLGLGXLXLXXLXXL
Extra small: <576pxSmall: ≥576pxMedium: ≥768pxLarge: ≥992pxExtra large: ≥1200pxExtra extra large: ≥1400px
Page Navigation:
Color and backgroundComponents

Color and background

Color and background

Background primary color with contrasting color.

Background secondary color with contrasting color.

Background success color with contrasting color.

Background danger color with contrasting color.

Background warning color with contrasting color.

Background info color with contrasting color.

Background light color with contrasting color.

Background dark color with contrasting color.

<p>Background primary color with contrasting color.</p>
<p>Background secondary color with contrasting color.</p>
<p>Background success color with contrasting color.</p>
<p>Background danger color with contrasting color.</p>
<p>Background warning color with contrasting color.</p>
<p>Background info color with contrasting color.</p>
<p>Background light color with contrasting color.</p>
<p>Background dark color with contrasting color.</p>
<p>Background primary color with contrasting color.</p> <p>Background secondary color with contrasting color.</p> <p>Background success color with contrasting color.</p> <p>Background danger color with contrasting color.</p> <p>Background warning color with contrasting color.</p> <p>Background info color with contrasting color.</p> <p>Background light color with contrasting color.</p> <p>Background dark color with contrasting color.</p>

Components

Badge

Info

Card

Card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.

Button 
<h4 class="h5 text-muted mt-3">Badge</h4>
<div class="badge">Info</div>

<h4 class="h5 text-muted mt-3">Card</h4>
<div class="card w-50">
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.</p>
    <a href="#" class="btn btn-warning">Button</a>
  </div>
</div>
<h4 class="h5 text-muted mt-3">Badge</h4> <div class="badge">Info</div> <h4 class="h5 text-muted mt-3">Card</h4> <div class="card w-50"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.</p> <a href="#" class="btn btn-warning">Button</a> </div> </div>