Author: saqibkhan

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

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…

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

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

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

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…

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…

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…

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…

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…