Category: 3. Bootstrap

Bootstrap Nav Components Bootstrap provides an easy and quick way to create basic navigation as well as components like tabs and pills which are very flexible and elegant. All the Bootstrap’s nav components, including tabs and pills, share the same base markup and styles through the base .nav class. Creating Basic Nav with Bootstrap You can use…

Using Icons in Bootstrap 5 Bootstrap now includes over 1,300 high quality icons, which are available in SVGs, SVG sprite, or web fonts format. You can use them with or without Bootstrap in any project. The advantage of using font icons is, you can create icons of any color just through applying the CSS color property. Also, to…

Using the Media Object in Bootstrap Bootstrap media object has been discontinued from version 5. However, you can still create a layout that contains left- or right-aligned media object like images or video alongside the textual content such as blog comments, Tweets, etc. using the flex and spacing utility classes. Example — The output of…

Using the Bootstrap Cards Bootstrap card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. Card replaces panel, well, and thumbnail components in old Bootstrap 3 version. In the following sections, you will see what you can do…

Styling Images with Bootstrap Images are very common in modern web design. So styling images and placing it properly on the web pages is very important for improving the user experience. Using the Bootstrap built-in classes you can easily style images such as making the round cornered or circular images, or give them effect like…

Creating Button Groups with Bootstrap In the previous chapter you’ve learnt how to create different types of individual buttons and modify them with predefined classes. Bootstrap however, also allows you to group a series of buttons together in a single line through the button group component. To create a button group just wrap a series…

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 of the button, redirecting user to another page, and so on. Bootstrap provides a…

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