Bootstrap gives you option further to scaling a button up or down. To make buttons larger add an extra class .btn-lg to the buttons, like this: Example — The output of the above example will look something like this: Similarly, to make buttons smaller add an extra class .btn-sm to the buttons, like this: Example — The output of…

In this tutorial you will learn how to create and modify buttons with Bootstrap. Creating Buttons with Bootstrap Buttons are the integral part of a website and application. They are used for various purposes like, submit or reset an HTML form, performing interactive actions such as showing or hiding something on a web page on click…

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…

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…

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…

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…

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…

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…

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…