In this tutorial you will learn how to use Bootstrap list group component. Creating List Groups with Bootstrap The list groups are very useful and flexible component for displaying lists of elements in a beautiful manner. In most basic form a list group is simply an unordered list with the class .list-group whereas, the list items having the class .list-group-item.…

If you want to create a horizontal menu using the ordered or unordered list you need to place all list items in a single line (i.e. side by side). You can do this simply by adding the class .list-inline to the <ul> or <ol>, and the class .list-inline-item to the child <li> elements. Example — The output of the above example will look something…

You can also create responsive tables to enable horizontal scrolling on small devices. To make any table responsive just place it inside a <div> element and apply the .table-responsive class on it. You can also specify when the table should have a scrollbar, based on the viewport width (i.e. breakpoints), using the classes .table-responsive{-sm|-md|-lg|-xl}. Let’s try out the following example to…

You can also enable a hover state on table rows within a <tbody> element by adding the modifier class .table-hover to the .table base class. Let’s try out the following example: Example — The output of the above example will look something like this: Creating Small or Compact Tables You can also make your tables more compact and save the space…

You can also add zebra-striping to the table rows within the <tbody> by simply adding an additional class .table-striped to the .table base class, as shown below: Example — The output of the above example will look something like this: Creating Bordered Tables You can add borders on all sides of the table and cells by adding the modifier class .table-bordered to the .table base…

Bootstrap even provides a handful of contextual classes such as .table-primary, .table-secondary, .table-success, .table-danger, .table-warning, .table-info, .table-light and .table-dark to color tables, table rows or individual cells. For example, you can create a dark version of the table (i.e. table with light text on dark backgrounds) by adding the contextual class .table-dark to the .table base class, like this: Example — The output of the above example will look…

In this tutorial you will learn how to create elegant tables with Bootstrap. What is Table? The HTML tables are used to present data in grid manner like row and columns. Using Bootstrap you can greatly improve the appearance of table in a quick and easy way. See the tutorial on HTML tables to learn more about…

You can also transform the text to lowercase, uppercase or make them capitalize. Example — The output of the above example will look something like this: Text Coloring Colors are the powerful method of conveying important information in website design. Bootstrap has handful of emphasis utility classes that can be used for this purpose such…

Bootstrap also provides display headings that can be used when you need a heading to stand out. Display headings are displayed in larger font-size but lighter font-weight. Six different display headings are available. Here’s is an example: Example — The output of the above example will look something like this: Working with Paragraphs Bootstrap’s global default font-size is 1rem (typically 16px), with…

In this tutorial you will learn about the styling and formatting of text content like headings, paragraphs, blockquotes, and so on with Bootstrap. Working with Headings You can define all HTML headings, <h1> through <h6> — In the same way you define in simple HTML document. You can also utilize the heading classes .h1 through .h6 on other elements, if you want to apply…