My Blog

Bootstrap Input Groups

In this tutorial you will learn how to use the Bootstrap input group component. Extending Form Controls with Bootstrap Bootstrap input group component is a very flexible and powerful component for creating interactive and elegant form controls, however, it is limited to text input, select, and textarea only. In the following sections you will see…

November 7, 2022
Creating Toggle Switches

The switch markup is similar to custom checkbox—the only difference is—it uses the .form-switch class to render a toggle switch. Switches also support the disabled attribute. Let’s try out the following example to understand how it basically works: Example — The output of the above example will look something like this: You can also customize the select dropdown menus…

November 7, 2022
Bootstrap Custom Forms

In this tutorial you will learn how to create custom form controls with Bootstrap. Creating Custom Form Controls Bootstrap enables you to customize the browser’s default form controls to create even more elegant form layouts. Now you can create completely customized and cross-browser compatible radio buttons and checkboxes, file inputs, select dropdowns, range inputs, and…

November 7, 2022
Creating Inline Form Layout

Sometimes you may want to display a series of form controls, and buttons in a single horizontal row to compact the layout. You can do this easily by using the Bootstrap’s grid classes. Let’s take a look at following example and see how it actually works: Example — The output of the above example will look…

November 7, 2022
Bootstrap Forms

In this tutorial you will learn how to create elegant form layouts with Bootstrap. Creating Forms with Bootstrap HTML forms are an integral part of the web pages and applications, but creating the form layouts or styling the form controls manually one by one using CSS are often boring and tedious. Bootstrap greatly simplifies the…

November 7, 2022
Bootstrap List Groups

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

November 7, 2022
Placing Ordered and Unordered List Items Inline

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…

November 7, 2022
Bootstrap Lists

In this tutorial you will learn how to style HTML lists with Bootstrap. Creating Lists With Bootstrap You can create three different types of HTML lists: See the tutorial on HTML lists, to learn more about the different lists types. Unstyled Ordered and Unordered Lists Sometimes you might need to remove the default styling form the…

November 7, 2022
Creating Responsive Tables with Bootstrap

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…

November 7, 2022
Enabling Hover State on Table Rows

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…

November 7, 2022