Category: 3. Boostrap

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…

What is Bootstrap Grid System? Bootstrap grid system provides an easy and powerful way to create responsive layouts of all shapes and sizes. It is built with flexbox with mobile-first approach. Also, it is fully responsive and uses twelve column system (12 columns available per row) and six default responsive tiers. You can use the Bootstrap’s predefined…

Creating Containers with Bootstrap Containers are the most basic layout element in Bootstrap and are required when using the grid system. Containers are basically used to wrap content with some padding. They are also used to align the content horizontally center on the page in case of fixed width layout. Bootstrap provides three different types…

Getting Started with Bootstrap In this tutorial you will learn how easy it is to create a web page using Bootstrap. But before begin, be sure to have a code editor and some working knowledge of HTML and CSS. If you’re just starting out in the world of web development, start learning from here » Well,…