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 how to extend form controls by adding the text, icons and buttons before, after, or on both sides of it to make your form more attractive. Creating Prepended and Appended Inputs Input groups are created using the class .input-group. It act as a container for inputs and addons. Further, wrap the text or icon in a <span> element as well as apply the class .input-group-text on it and place it before or after the input. Let’s take a look at the following example: Example — The output of the above example will look something like this: Since Bootstrap 5 you can also prepend or append select box dropdown and textarea form controls. Let’s try out the following example and see how it basically works: Example — The output of the above example will look something like this: Similarly, you can prepend or append addons to Bootstrap’s custom file input, like this: Example — The output of the above example will look something like this: Checkboxes and Radio Buttons Addons Similarly, you can place checkbox or radio button within input group’s addon instead of text. Example — The output of the above example will look something like this: Placing Multiple Inputs or Addons You can also place multiple inputs side-by-side within an input group easily, like this: Example — The output of the above example will look something like this: Similarly, you can also place multiple addons side-by-side within an input group. You can also mix it with checkbox and radio inputs, as shown in the following example: Example — The output of the above example will look something like this: Buttons Addons for Form Controls You can also prepend or append buttons to the form controls like text. Simply, place as many buttons as you like within the .input-group, as shown in the following example: Example — The output of the above example will look something like this: Adding Button Dropdowns You can even add buttons with dropdowns to a form control if you want to perform more than one action from a button. Also, in case of input group you don’t need the .dropdown wrapper element, which is otherwise normally required. Let’s check out an example: Example — The output of the above example will look something like this: Adding Segmented Dropdown Button Groups Similarly, you can define the segmented dropdown button group where dropdown button is placed besides the other buttons, as shown in the following example: Example — The output of the above example will look something like this: Height Sizing of Input Groups You can also add the relative form sizing classes such as .input-group-lg or .input-group-sm to the .input-group element itself to make it larger or smaller in height. The contents within the .input-group will automatically resize — there is no need for repeating the form control size classes on each element. Here’s an example: Example — The output of the above example will look something like this:

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 more. In the following sections, you’ll see how to create those custom form elements one by one. Creating Custom Checkboxes To create custom checkboxes wrap each checkbox <input> and their corresponding <label> in a <div> element, and apply the classes as shown in the following example: Example — The output of the above example will look something like this: Creating Custom Radio Buttons Similarly, you can create custom radio buttons using the Bootstrap like this: Example — The output of the above example will look something like this: Inline Checkboxes and Radio Buttons You can also place these custom checkboxes and radio buttons inline by simply adding the class .form-check-inline on the wrapper .form-check element. The following example will display the checkboxes inline (i.e., in the same line). Example — The output of the above example will look something like this: Similarly, you can place the radio buttons inline, as shown in the following example: Example — The output of the above example will look something like this: Disabling Custom Checkboxes and Radios Custom checkboxes and radio buttons can also be disabled. Just add the boolean attribute disabled to the <input> element, as shown in the following example: Example — The output of the above example will look something like this: 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: Creating Custom Select Menu You can also customize the select dropdown menus by simply adding the class .form-select on the <select> element. However, this custom styling is limited only to the initial appearance of the <select> and cannot modify the <option>s due to browser limitations. Example — The output of the above example will look something like this: You can also add the disabled attribute on a custom select to give it a grayed out appearance and remove pointer events, as shown in the following example: Example — The output of the above example will look something like this: You can also create large and small variant of the custom selects to match the height of similarly sized Bootstrap’s text inputs using the classes .form-select-lg and .form-select-sm on the <select> element, respectively. Let’s take a look at the following example: Example — The output of the above example will look something like this: Bootstrap custom select also supports multiple and size attributes like normal select: Example Creating Custom Range Inputs To create custom range inputs just apply the class .form-range to the <input type=”range”>. Example — The output of the above example will look something like this: You can also add disabled attribute on the range inputs to give it a grayed out appearance and remove pointer events, as shown in the following example: Example — The output of the above example will look something like this: Setting the Min and Max Values By default range inputs have implicit values for min and max—0 and 100, respectively. But, you may specify new values for those using the min and max attributes. Also, range inputs “snap” to integer values by default. To change this, you can specify a step value. In the following example, we’ve doubled the number of steps by using the step=”0.5″. Example

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 process of styling and alignment of form controls like labels, input fields, selectboxes, textareas, buttons, etc. through predefined set of classes. Bootstrap provides three different types of form layouts: The following section will give you the detailed overview of all these form layouts as well as the various form related Bootstrap components one by one. Well let’s get started. Creating Vertical Form Layout To create vertical form layouts simply use the predefined margin utility classes for grouping the labels, form controls, optional form text, and form validation messages. Here’s an example in which form controls are vertically stacked with labels on the top. Example Try this code » — The output of the above example will look something like this: You will learn about custom checkboxes and other custom form controls in the next chapter. Note: All textual form controls, such as <input> and <textarea> requires the class.form-control, while <select> requires the class .form-select for general styling. These classes also makes the forms controls 100% wide. To change their width or use them inline, you can utilize the Bootstrap’s predefined grid classes. Tip: It is recommend to use margin-bottom utility classes (e.g., mb-2, mb-3, etc.) to add vertical spacing between the form groups. As, using single direction margin throughout in the form prevent margin collapsing and create more consist form. Creating Horizontal Form Layout You can also create horizontal form layouts where labels and form controls are aligned side-by-side using the Bootstrap grid classes. To create a horizontal form layout add the class .row on form groups and use the .col-*-* grid classes to specify the width of your labels and controls. Also, be sure to apply the class .col-form-label on the <label> elements, so that they’re vertically centered with their associated form controls. Let’s check out an example: Example Try this code » — The output of the above example will look something like this: 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 Try this code » — The output of the above example will look something like this: Check out the snippets section for examples of some beautifully designed Bootstrap forms. Tip: It is recommended to include a label for every form inputs otherwise screen readers will have trouble with your forms. However, in case of inline form layouts you can hide the labels using the .visually-hidden class, so that only screen readers can read it. Creating Responsive Form Layout You can also make your forms responsive through using the grid classes with specific breakpoints. The following example will create a form which laid out inline on medium devices and up (i.e., viewport width ≥768px), but will become vertically stacked on smaller viewports. Example Try this code » Creating Static Form Control There might be a situation when you just want to display a plain text value next to a form label instead of a working form control. You can do this easily by replacing the class .form-control with the .form-control-plaintext and applying the attribute readonly. The .form-control-plaintext class removes the default styling from the form field, but preserves the correct margin and padding. Let’s take a look at an example: Example Try this code » — The output of the above example will look something like this: Column Sizing of Form Controls You can also match the size of your inputs, textareas and select boxes to the Bootstrap grid column sizes. Simply, place your form controls (i.e. <input>, <textarea>, and <select>) in grid columns. 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: Placing Checkboxes and Radio Buttons Inline By default, any number of custom checkboxes and radio buttons that are immediate sibling will be vertically stacked and appropriately spaced with .form-check class. But, you can also place these custom checkboxes and radio buttons inline (i.e., in the same line) by simply adding the class .form-check-inline to .form-check element, like this: Example — The output of the above example will look something like this: Similarly, you can place the radio buttons inline, as shown in the following example: Example — The output of the above example will look something like this: Adding Help Text to Form Controls Placing help text for the form controls in an efficient way to guide users to enter the correct data in a form. You can place block level help text for a form control using the class .form-text. The block help text is typically displayed at the bottom of the control. Here’s an example: Example — The output of the above example will look something like this: Similarly, you can also place inline help text using the <small> element. No need to use .form-text in this case. The following example shows how to implement this: Example Try this code » — The output of the above example will look something like this: Creating Disabled Form Controls To disable individual form controls such as <input>, <textarea>, <select> just add the attributes disabled to them and Bootstrap will do the rest. Here’s an example: Example — The output of the above example will look something like this: However, if you want to disable all controls within a <form> at once, place them inside a <fieldset> element and apply the attribute disabled on it, as shown in the following example: Example — The output of the above example will look something like this: Creating Readonly Inputs You can also add the readonly boolean attribute on an input or textarea to prevent the modification of its value. Read-only inputs appear in lighter background (just like disabled inputs), but it retain the standard text cursor. Check out the following example to see how it works: Example Try this code » — The output of the above example will look something like this: Height Sizing of Form Controls You can easily change the height of your text inputs

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. Example — The output of the above example will look something like this: Tip: List groups are 100% wide by default. To set their width explicitly you can either use the Bootstrap’s width utility classes (e.g. w-25, w-50, etc.) or place them inside grid columns. Indicate Disabled and Active Items You can simply add the class .active to a .list-group-item to indicate the current active selection. Similarly, you can add .disabled to a .list-group-item to make it look like disabled. Example — The output of the above example will look something like this: Tip: In case of list group with linked items, the .disabled class only make the link look like disabled, but the link is still clickable. To actually disable links you need to remove the anchor’s href attribute either using the JavaScript or manually. Edge-to-Edge List Groups You can optionally add the class .list-group-flush to the list-group element to remove outer borders and rounded corners to create list groups that are edge-to-edge with their parent container. Let’s check out the following example to understand how it actually works: Example — The output of the above example will look something like this: Creating Numbered List Groups You can also create list groups where items are numbered through simply adding the modifier class .list-group-numbered on the .list-group element, like this: Example — The output of the above example will look something like this: Note: Numbers are generated via CSS (as opposed to <ol> element’s default browser styling) for better placement inside list group items and to allow for better customization. See the CSS counter-reset and counter-increment properties to learn more about it. List Group with Checkboxes and Radios You can also place Bootstrap’s custom checkboxes and radio buttons within the list group items. The following example will create a list group with custom checkboxes: Example — The output of the above example will look something like this: Similarly, you can place custom radio buttons within list group items, like this: Example — The output of the above example will look something like this: You’ll learn about custom checkboxes and radio buttons in the Bootstrap custom forms chapter. List Group with Linked Items You can also link list group items with the little change in HTML markup. Just replace the <li> with <a> tag and use <div> element as a parent instead of <ul>. You can also add icons and badges to this list group to make it more elegant. Here’s an example: Example — The output of the above example will look something like this: Tip: You can use the Bootstrap list group component for creating the sidebar navigation menu, e.g. displaying the list of products or categories on your website. List Group with Custom Content You can also add nearly any HTML within the list groups with the help of flexbox utilities. Here’s an example of a linked list group with headings and paragraph. Example — The output of the above example will look something like this: List Group with Contextual States Like most of the other components you can also use contextual classes on the list group items to apply extra emphasis on them. Here’s an example: Example — The output of the above example will look something like this: Similarly, you can use these contextual classes to the linked list group items. You can also use the class .active to specify the active list group item. Here’s an example: Example Please, check out the Bootstrap tabs chapter to learn how to create dynamic vertical tabs using the Bootstrap list group component without using any JavaScript code.

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 list items. You can do this by simply applying the class .list-unstyled to the respective <ul> or <ol> elements. Example — The output of the above example will look something like this: Note: The .list-unstyled class removes the default list-style and left padding only from the list items which are immediate children of the <ul> or <ol> element. 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 like this: Creating Horizontal Definition Lists The terms and descriptions in a definition list can also be aligned horizontally side-by-side using the Bootstrap grid system’s predefined classes. Here’s an example: Example — The output of the above example will look something like this:

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 tables. Creating a Simple Table with Bootstrap You can create tables with basic styling that has horizontal dividers and small cell padding (8px by default), by just adding the Bootstrap’s class .table to the <table> element. Example — The output of the above example will look something like this: Creating Accented Tables 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 something like this: Similarly, you can use other contextual classes. For instance, the following example uses the class .table-success on the .table to create green colored variant of a table. Example — The output of the above example will look something like this: Check out the snippets section for examples of some beautifully designed Bootstrap tables. Tip: You can use these contextual classes on the .table base class to create colored version of any table such as stripped, hoverable, bordered, compact table, and so on. Similar to the tables you can also use these contextual classes to emphasize the rows within a table. Here’s an example of a table with emphasized rows, let’s take a look: Example — The output of the above example will look something like this: Creating Tables with Striped Rows 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 class, as shown in the following example: Example — The output of the above example will look something like this: Creating Borderless Tables You can also create borderless tables using the class .table-borderless on the .table element. Example — The output of the above example will look something like this: 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 through adding the modifier class .table-sm to the .table base class. The .table-sm class makes the table compact by cutting all cell padding in half. Let’s take a look at the following example: Example — The output of the above example will look something like this: Setting Table Head Colors Similar to light and dark tables, you can use the modifier classes .table-light or .table-dark on the <thead> element to make it appear in light or dark gray. The following example will create a table with light gray background head. Example — The output of the above example will look something like this: The following example will create a table with dark gray background head. Example — The output of the above example will look something like this: 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 understand how it basically works: Example

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 the style on element’s text same as headings. Example — The output of the above example will look something like this: Customizing Headings Additionally, you can use the <small> tag with .text-muted class to display the secondary text of any heading in a smaller and lighter variation. Here’s an example: Example — The output of the above example will look something like this: Display Headings 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 a line-height of 1.5 (typically 24px), which is applied to the <body> element as well as all the paragraphs i.e. the <p> elements. In addition to that margin-bottom of 1rem is also applied to all the paragraphs. You can also make a paragraph stand out by adding the class .lead on it. Example — The HTML code in the above examples will produce the following result: Tip: In CSS rem stands for “root em”. 1rem is equal to the font size of the root element (i.e. the <html> element), which is 16px in most browsers by default. Text Alignment You can easily align text to left, right, and center using the text alignment classes. Example — The output of the above example will look something like this: You can also align text based on screen size using the responsive text alignment classes. These classes use the same viewport width breakpoints as the grid system. Example Text Formatting You are free to use text formatting tags like <strong>, <i>, <small> to make your text bold, italic, small and so on, in the same way you do in simple HTML page. Here’s an example: Example — The output of the above example will look something like this: Text Transformation 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 as showing success message in green color, warning or error message in red color, etc. Example — The output of the above example will look something like this: Please, check out the Bootstrap helper classes chapter to learn about other text coloring and background coloring classes, as well as various other utility classes. Styling Blockquotes You can also give pretty look to your blockquotes — Just define the blockquotes using the standard <blockquote> element and bootstrap’s style sheet will do the rest. Example — The output of the above example will look something like this: When providing attribution, wrap your <blockquote> in a <figure> element and use a <figcaption> or a block level element (e.g., <p>) with the .blockquote-footer class, like this: Example — The output of the above example will look something like this: You can also align blockquotes to the right or center by simply applying the text alignment classes .text-end or .text-center on the <blockquote> or <figure> element. Truncating Long Text For longer text, you can use the class .text-truncate to truncate the text with an ellipsis. The display property value of the element must be inline-block or block. It is particularly helpful in a situation where you want to display a piece of text in a single line but there is no enough space available. Let’s try out an example and see how it works: Example Text wrapping and Overflow You can use the class .text-wrap to wrap the text within an element by overwriting its white-space property if it is set to pre or nowrap, such as Bootstrap badge components. Similarly, you can use the class .text-nowrap to prevent text from wrapping within an element. Let’s try out the following example to understand how it basically works: Example Wrapping Long Word You can use the class .text-break to prevent long word from breaking your layout. Let’s try out the following example to understand how it basically works: Example

What is Responsive Web Design Responsive web design is a process of designing and building websites to provide better accessibility and optimal viewing experience to the user by optimizing it for different devices. With the growing trend of smart phones and tablets, it has become almost unavoidable to ignore the optimization of sites for mobile devices. Responsive web design is a preferable alternative and an efficient way to target a wide range of devices with much less efforts. Responsive layouts automatically adjust and adapts to any device screen size, whether it is a desktop, a laptop, a tablet, or a mobile phone. See the following Illustration. Creating Responsive Layout with Bootstrap With the Bootstrap powerful mobile first flexbox grid system creating the responsive and mobile friendly websites and applications has become much easier. Bootstrap is responsive and mobile friendly from the start. Its six tier grid classes provides better control over the layout as well as how it will be rendered on different types of devices like mobile phones, tablets, laptops and desktops, large screen devices, and so on. The following example will create a responsive layout that is rendered as 4 column layout in extra-large devices (viewport ≥ 1200px), and 3 column layout in large devices (992px ≤ viewport < 1200px), whereas 2 column layout in medium devices (768px ≤ viewport < 992px), and 1 column layout in small and extra-small devices (viewport < 768px). Let’s try it out and see how it works: Example

Creating Fluid Layout with Bootstrap In Bootstrap you can use the class .container-fluid to create fluid layouts to utilize the 100% width of the viewport across all devices (extra small, small, medium, large, extra large, and extra-extra large). The class .container-fluid simply applies the width: 100% instead of different width for different viewport sizes. However, the layout will still responsive and you can use the grid classes as usual. See the tutorial on Bootstrap grid system to learn more about grid classes. The following example will create a fluid layout that covers 100% width of the screen. Example — The output of the above example will look something like this:

Creating Fixed Layout with Bootstrap With Bootstrap you can still create web page layouts based on fixed number of pixels, however the container width vary depending on the viewport width and the layout is responsive too. The process of creating the fixed yet responsive layout basically starts with the .container class. After that you can create rows with the .row class to wrap the horizontal groups of columns. Rows must be placed within a .container for proper alignment and padding. Further columns can be created inside a row using the predefined grid classes such as .col, col-{xs|sm|md|lg|xl|xxl}-*, where * represent grid number and should be from 1 to 12. Please check out the tutorial on Bootstrap grid system to learn more about grid classes.. Note: Actual content like text, images, videos, tables, etc. should be placed within columns, and only columns may be the immediate children of rows. The following example will create a fixed width responsive layout that is 720px pixels wide on medium devices like tablets (viewport ≥ 768px), whereas 960px wide on large devices like small laptops (viewport ≥ 992px), 1140px wide on extra large devices like desktops (viewport ≥ 1200px), and 1320px wide on extra-extra large devices like large desktops (viewport ≥ 1400px). However, on small devices such as mobile phones (576px ≤ viewport < 768px) the layout will be 540px wide. But, on extra-small devices (viewport < 576px) the layout will cover 100% width. Also, columns will be stacked vertically and navbar will be collapsed in both cases. Example — The output of the above example will look something like this: We’ve used the margin utility classes such as .mb-3, .ml-auto, mx-2 etc. to adjust spacing between the elements. Whereas the classes .text-dark, .text-muted, .text-md-right are text utility classes to adjust color and alignment of text. You’ll learn about them in later chapters.