My Web Training

📖 Bootstrap Library

Bootstrap is a popular open-source, front-end library used to speed up the development process for responsive websites. It includes HTML and CSS based design templates for common user interface components like Typography, Forms, Buttons, Tables, Navigations, Dropdowns, Alerts, Modals, Tabs, Accordion, Carousel and many others as well as optional JavaScript extensions.

The Bootstrap library is maintained by a group of dedicated developers. All Bootstrap elements, functions and methods are explained at https://getbootstrap.com/. This is the site for developers looking to increase their understanding of Bootstrap. It includes instructions on how to install and use Bootstrap.

Bootstrap has gone through several updates and versions. Currently, the latest version is Bootstrap 5. Bootstrap 5 has removed the jQuery dependency and combined the required JavaScript files into one resource. We will be referencing this version in this article.

Advantages of Bootstrap

Save time: You can save time and effort using the Bootstrap predefined design templates and classes.
Responsive features: Make your web pages appear more appropriately on different devices and screen resolutions without any change in markup.
Consistent design: All Bootstrap components share the same design templates and styles through a central library, so the design and layout of your web pages are consistent throughout your application.
Easy to use: Anybody with the basic working knowledge of HTML and CSS can start development with Bootstrap.
Compatible with browsers: Bootstrap is compatible with all modern browsers such as Mozilla Firefox, Google Chrome, Safari, Internet Explorer, and Opera.
Open Source: Bootstrap is completely free to download and use.

Installation and Setup

Bootstrap is a collection of CSS and JavaScript files. All you have to do is link the files to your webpage and you can start using Bootstrap. To quickly get started using Bootstrap, visit the Getting Started Introduction page at Get Bootstrap dot com.

There are 2 methods for adding Bootstrap to your page. You can link to a CDN (Content Delivery Network) server or you can download and install the supporting Bootstrap files to your server installation. The biggest difference in installation choices is whether you will need to customize the Bootstrap files. If not, it is easier, faster and more reliable to use the CDN. There are many Bootstrap CDNs hosted around the world. Any of them should be able to provide the essential Bootstrap files.

All you need to do to start using Bootstrap is to add a couple of links to the CDN in your page. The style sheet link is added to the head section of your page using the same syntax as any other style sheet link. The JavaScript link is normally put at the bottom of your page just before the closing body tag. That way Bootstrap will not load until after the HTML in the page has loaded. This is important because Bootstrap is applied to the HTML elements and can't be applied until after the browser receives the HTML code.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">

    <!-- Custom CSS -->
    <link rel="stylesheet" href="mystyles.css">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional Custom JavaScript -->
    <script src="myJavaScript.js"></script>
    <!-- Bundled Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>

Containers

Bootstrap requires a containing element to wrap site contents. There are two container classes to choose from. For more information on using containers, see the Containers Overview page.

The .container class provides a responsive fixed width container.
The .container-fluid class provides a full width container, spanning the entire width of the viewport.

Bootstrap Grid System is used to create page layouts through a series of rows and columns that organize your content.

Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
Use rows to create horizontal groups of columns.
Content should be placed within columns, and only columns may be immediate children of rows.
Predefined grid classes like .row and .col-xs-4 are available for quickly making grid layouts.
Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows.
The negative margin is why the examples below are outdented. It's so that content within grid columns is lined up with non-grid content.
Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-xs-4.
If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, e.g. applying any .col-md-* class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg-* class is not present.

Bootstrap comes with three different containers:

.container, which sets a max-width at each responsive breakpoint.
.container-fluid, which is width: 100% at all breakpoints.
.container-{breakpoint}, which is width: 100% until the specified breakpoint.

The table below illustrates how each container’s max-width compares to the original .container and .container-fluid across each breakpoint.

Bootstrap 5 Container Breakpoints
Container Class	Extra small <576px	Small ≥576px	Medium ≥768px	Large ≥992px	X-Large ≥1200px	XX-Large ≥1400px
`.container`	100%	540px	720px	960px	1140px	1320px
`.container-sm`	100%	540px	720px	960px	1140px	1320px
`.container-md`	100%	100%	720px	960px	1140px	1320px
`.container-lg`	100%	100%	100%	960px	1140px	1320px
`.container-xl`	100%	100%	100%	100%	1140px	1320px
`.container-xxl`	100%	100%	100%	100%	100%	1320px
`.container-fluid`	100%	100%	100%	100%	100%	100%

Examples

Below is an example of a basic form with only Bootstrap styles applied. There is no other JavaScript or CSS applied. Visit the Bootstrap Docs to see more Bootstrap form examples. For details on creating the collapsible navbar, go to the Bootstrap Navbar docs. To learn how to use the buitl-in Bootstrap grid system based on Flexbox, go to https://getbootstrap.com/docs/5.0/layout/grid/.