My Blog

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…

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…

In this tutorial you will learn how to create elegant tables with Bootstrap. 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…

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…

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…

In this tutorial you will learn about the styling and formatting of text content like headings, paragraphs, blockquotes, and so on with Bootstrap. 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…

In this tutorial you will learn how to create responsive websites with Bootstrap framework. 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…

In this tutorial you will learn how to create fluid layouts with Bootstrap. 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…

Bootstrap Fixed Layout In this tutorial you will learn how to create fixed layouts with Bootstrap. 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…