Bootstrap Lists Examples

< View Code Snippets Library

  • Multiple Column Grid Block List Using Flexbox

    Multiple Column Grid Block List Using Flexbox

     All Bootstrap Versions

    This code example uses flexbox to create a grid of list items. You can specify two, three, or four columns by adjusting the list item width.

  • Unordered List with Font Awesome Checkmark Bullets

    Unordered List with Font Awesome Checkmark Bullets

     Bootstrap 4

    This example uses the Font Awesome icon library to add a custom unordered list bullet. You often see list with checkmarks on ecommerce or marketing sites that would like to call out features or benefits.

    I also created a custom class .list-display to add more white space between the bullets. This helps overall readability and makes each line item stand out more.

  • Remove Auto Truncation on Horizontal Definition Lists

    Remove Auto Truncation on Horizontal Definition Lists

     Bootstrap 3

    The default horizontal definition list auto truncates the definition title which may not be ideal for usability. This customization removes that and adds some spacing below each definition item to it can breathe visually.

Looking for something else?

Suggest or contribute a code snippet to be added to the library.

Other Code Snippet Categories