Bootstrap Tutorial

Bootstrap is the most popular front end framework that uses HTML, CSS and Javascript. It is powerful mobile first front-end framework for faster and easier web development.

Bootstrap Beginner's Guide

Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains CSS and JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components.

You can quickly style the border and border-radius of an element. It can be used for images, buttons, or any other element.

Bootstrap uses the .progress as a wrapper to indicate the max value of the progress bar. Use the inner .progress-bar to indicate the progress so far. The .progress-bar also requires some role and aria attributes to make it accessible. Bootstrap does not uses the HTML5 <progress> element.

Toast is a push notifications to your visitors with a lightweight and easily customizable alert message. Toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems. They are built with flexbox.

Jumbotron is used for showcasing hero unit style content.

Navigation available in Bootstrap share general markup and styles, from the base .nav class. The base .nav component is built with flexbox and provide a strong foundation for building all types of navigation components. It is generated by using unordered list element with each list element containing anchors.

Bootstrap provides some classes that can be used to apply styles to the images. These images turn into responsive behavior, so they never become larger than their parent elements.

Carousel is a slideshow for cycling through series of content - images or slides of text. It also includes support for previous or next controls and indicators.

A 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. Cards replaced panels, wells, and thumbnails from earlier bootstrap versions.

The basis of the Bootstrap framework relies in its grid system. Bootstrap offers components that allow to structure a website in a responsive grid layout. By letting you define a set of rows, each one having a set of independent columns, it allows you to build a solid grid system for your web page. Also, each column can have different sizes to perfectly fit your template.

You can apply button classes for hyperlinks (<a>)button elements (<button>), and inputs (<input>). You need to add class .btn to make a link or element look like a button. Bootstrap provides many options to style buttons.

Breadcrumbs are used to indicate the current page’s location within a navigational hierarchy. A breadcrumb trail consists of a list of links to the parent pages of the current page in hierarchical order. It helps users find their place within a website or web application. The hierarchy is created as ordered list.

Badges are used for small count and labelling. Badges scale to match the size of the immediate parent element. Badges can be used as part of links or buttons to provide a counter.

Alerts provide contextual feedback messages for typical user actions. For proper styling, use one of the required contextual classes. Alerts can also contain additional HTML elements like headings, paragraphs and dividers.

Bootstrap has some contextual classes that is used to provide meaning through colors.

A form contains many fields (also known as form controls) with optional labels and submit button.

The base .nav class provides a strong foundation for building all types of navigation. You can use this class with <ul> element, <ol> element or with a <nav> element. Similar to navbars, add class .nav-item to <li> tag and .nav-link to <a> tag.

To start with, navbars require three things - a wrapping .navbar with .navbar-expand{-sm|-md|-lg|-xl} for responsive collapsing and color scheme classes. You can use spacing and flex utility classes for controlling spacing and alignment within navbars.

Bootstrap provides a nice and clean layout for building tables. If you want some light padding and horizontal dividers, add the base class: .table. Along with the base table class, you can use additional classes to style the table.

Bootstrap's global default font-size is 14px, with a line-height of 1.428. This is applied to the <body> and all paragraphs. In addition, all <p> elements have a bottom margin that equals half their computed line-height (10px by default).

You can include Bootstrap in your webpages from a Content Delivery Network (CDN).