Bootstrap 5 Learning Kit

XSXSSMSMMDMDLGLGXLXLXXLXXL
Extra small: <576pxSmall: ≥576pxMedium: ≥768pxLarge: ≥992pxExtra large: ≥1200pxExtra extra large: ≥1400px
Page Navigation:
DefaultActive itemDisabled itemLinksButtonsFlushNumberedHorizontalEqual-width list group itemContextual color classesBadgesCustom contentChecks and radiosTab panels

List group

Default

  • List group item one
  • List group item two
  • List group item three
<ul>
  <li>List group item one</li>
  <li>List group item two</li>
  <li>List group item three</li>
</ul>
<ul> <li>List group item one</li> <li>List group item two</li> <li>List group item three</li> </ul>

Active item

  • List group item one
  • List group item two
  • List group item three
<ul>
  <li>List group item one</li>
  <li>List group item two</li>
  <li>List group item three</li>
</ul>
<ul> <li>List group item one</li> <li>List group item two</li> <li>List group item three</li> </ul>

Disabled item

  • List group item one
  • List group item two
  • List group item three
<ul>
  <li>List group item one</li>
  <li>List group item two</li>
  <li>List group item three</li>
</ul>
<ul> <li>List group item one</li> <li>List group item two</li> <li>List group item three</li> </ul>

Links

<div>
  <a>List group item one</a>
  <a>List group item two</a>
  <a>List group item three</a>
</div>
<div> <a>List group item one</a> <a>List group item two</a> <a>List group item three</a> </div>

Buttons

<div>
  <button>List group item one</button>
  <button>List group item two</button>
  <button>List group item three</button>
</div>
<div> <button>List group item one</button> <button>List group item two</button> <button>List group item three</button> </div>

Flush

  • List group item one
  • List group item two
  • List group item three
<ul>
  <li>List group item one</li>
  <li>List group item two</li>
  <li>List group item three</li>
</ul>
<ul> <li>List group item one</li> <li>List group item two</li> <li>List group item three</li> </ul>

Numbered

  1. List group item one
  2. List group item two
  3. List group item three
<ol>
  <li>List group item one</li>
  <li>List group item two</li>
  <li>List group item three</li>
</ol>
<ol> <li>List group item one</li> <li>List group item two</li> <li>List group item three</li> </ol>

Horizontal

All breakpoints

  • List group item one
  • List group item two
  • List group item three

Small and up

  • List group item one
  • List group item two
  • List group item three

Medium and up

  • List group item one
  • List group item two
  • List group item three

Large and up

  • List group item one
  • List group item two
  • List group item three

Extra large and up

  • List group item one
  • List group item two
  • List group item three
<h4 class="h5 text-muted mt-3">All breakpoints</h4>
<ul>
  <li>List group item one</li>
  <li>List group item two</li>
  <li>List group item three</li>
</ul>
<h4 class="h5 text-muted mt-3">Small and up</h4>
<ul>
  <li>List group item one</li>
  <li>List group item two</li>
  <li>List group item three</li>
</ul>
<h4 class="h5 text-muted mt-3">Medium and up</h4>
<ul>
  <li>List group item one</li>
  <li>List group item two</li>
  <li>List group item three</li>
</ul>
<h4 class="h5 text-muted mt-3">Large and up</h4>
<ul>
  <li>List group item one</li>
  <li>List group item two</li>
  <li>List group item three</li>
</ul>
<h4 class="h5 text-muted mt-3">Extra large and up</h4>
<ul>
  <li>List group item one</li>
  <li>List group item two</li>
  <li>List group item three</li>
</ul>
<h4 class="h5 text-muted mt-3">All breakpoints</h4> <ul> <li>List group item one</li> <li>List group item two</li> <li>List group item three</li> </ul> <h4 class="h5 text-muted mt-3">Small and up</h4> <ul> <li>List group item one</li> <li>List group item two</li> <li>List group item three</li> </ul> <h4 class="h5 text-muted mt-3">Medium and up</h4> <ul> <li>List group item one</li> <li>List group item two</li> <li>List group item three</li> </ul> <h4 class="h5 text-muted mt-3">Large and up</h4> <ul> <li>List group item one</li> <li>List group item two</li> <li>List group item three</li> </ul> <h4 class="h5 text-muted mt-3">Extra large and up</h4> <ul> <li>List group item one</li> <li>List group item two</li> <li>List group item three</li> </ul>

Equal-width list group item

  • List group item one
  • List group item two
  • List group item three
<ul>
  <li>List group item one</li>
  <li>List group item two</li>
  <li>List group item three</li>
</ul>
<ul> <li>List group item one</li> <li>List group item two</li> <li>List group item three</li> </ul>

Contextual color classes

Normal list group

  • Default list group item
  • Primary list group item
  • Secondary list group item
  • Succcess list group item
  • Danger list group item
  • Warning list group item
  • Info list group item
  • Light list group item
  • Dark list group item

List group with links

<h4 class="h5 text-muted mt-3">Normal list group</h4>
<ul>
  <li>Default list group item</li>
  <li>Primary list group item</li>
  <li>Secondary list group item</li>
  <li>Succcess list group item</li>
  <li>Danger list group item</li>
  <li>Warning list group item</li>
  <li>Info list group item</li>
  <li>Light list group item</li>
  <li>Dark list group item</li>
</ul>
<h4 class="h5 text-muted mt-3">List group with links</h4>
<div>
  <a>Default list group item</a>
  <a>Primary list group item</a>
  <a>Secondary list group item</a>
  <a>Success list group item</a>
  <a>Danger list group item</a>
  <a>Warning list group item</a>
  <a>Info list group item</a>
  <a>Light list group item</a>
  <a>Dark list group item</a>
</div>
<h4 class="h5 text-muted mt-3">Normal list group</h4> <ul> <li>Default list group item</li> <li>Primary list group item</li> <li>Secondary list group item</li> <li>Succcess list group item</li> <li>Danger list group item</li> <li>Warning list group item</li> <li>Info list group item</li> <li>Light list group item</li> <li>Dark list group item</li> </ul> <h4 class="h5 text-muted mt-3">List group with links</h4> <div> <a>Default list group item</a> <a>Primary list group item</a> <a>Secondary list group item</a> <a>Success list group item</a> <a>Danger list group item</a> <a>Warning list group item</a> <a>Info list group item</a> <a>Light list group item</a> <a>Dark list group item</a> </div>

Badges

  • List group item one #
  • List group item two ##
  • List group item three ### 
<ul>
  <li>
    List group item one
    <span>#</span>
  </li>
  <li>
    List group item two
    <span>##</span>
  </li>
  <li>
    List group item three
    <span>###</span>
  </li>
</ul>
<ul> <li> List group item one <span>#</span> </li> <li> List group item two <span>##</span> </li> <li> List group item three <span>###</span> </li> </ul>

Custom content

<div>
  <a>
    <h4>Active item</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.</p>
    <small>Etiam eleifend velit leo.</small>
  </a>
  <a>
    <h4>Normal item</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.</p>
    <small>Etiam eleifend velit leo.</small>
  </a>
  <a>
    <h4>Disabled item</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.</p>
    <small>Etiam eleifend velit leo.</small>
  </a>
</div>
<div> <a> <h4>Active item</h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.</p> <small>Etiam eleifend velit leo.</small> </a> <a> <h4>Normal item</h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.</p> <small>Etiam eleifend velit leo.</small> </a> <a> <h4>Disabled item</h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.</p> <small>Etiam eleifend velit leo.</small> </a> </div>

Checks and radios

Checks

Radios

<h4 class="h5 text-muted mt-3">Checks</h4>
<div>
  <label>
    <input id="checkbox1">
    Checkbox 1
  </label>
  <label>
    <input id="checkbox2">
    Checkbox 2
  </label>
  <label>
    <input id="checkbox3">
    Checkbox 3
  </label>
</div>
<h4 class="h5 text-muted mt-3">Radios</h4>
<div>
  <label>
    <input id="radio1">
    Radio 1
  </label>
  <label>
    <input id="radio2">
    Radio 2
  </label>
  <label>
    <input id="radio3">
    Radio 3
  </label>
</div>
<h4 class="h5 text-muted mt-3">Checks</h4> <div> <label> <input id="checkbox1"> Checkbox 1 </label> <label> <input id="checkbox2"> Checkbox 2 </label> <label> <input id="checkbox3"> Checkbox 3 </label> </div> <h4 class="h5 text-muted mt-3">Radios</h4> <div> <label> <input id="radio1"> Radio 1 </label> <label> <input id="radio2"> Radio 2 </label> <label> <input id="radio3"> Radio 3 </label> </div>

Tab panels

Tab pane 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.
Tab pane 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.
Tab pane 3: Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.
<div class="row">
  <div class="col-4">
    <div>
      <a id="tab-1">Tab pane 1</a>
      <a id="tab-2">Tab pane 2</a>
      <a id="tab-3">Tab pane 3</a>
    </div>
  </div>
  <div class="col-8">
    <div>
      <div id="tab-pane-1">Tab pane 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.</div>
      <div id="tab-pane-2">Tab pane 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.</div>
      <div id="tab-pane-3">Tab pane 3: Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.</div>
    </div>
  </div>
</div>
<div class="row"> <div class="col-4"> <div> <a id="tab-1">Tab pane 1</a> <a id="tab-2">Tab pane 2</a> <a id="tab-3">Tab pane 3</a> </div> </div> <div class="col-8"> <div> <div id="tab-pane-1">Tab pane 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.</div> <div id="tab-pane-2">Tab pane 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.</div> <div id="tab-pane-3">Tab pane 3: Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.</div> </div> </div> </div>