Edit on Codeply

Beautiful content starts here.

Consistent

Foremost, Bootstrap provides a consistent, uniform appearance and design. With very little effort, Bootstrap can be used to transform a hodge-podge site into a professional, visually appealing design.

Responsive

Sites created with Bootstrap are designed to look & function well on any device including desktops, laptops, tablets and smartphones. Bootstrap is "mobile-first" which means the design for smaller mobile devices is considered foremost.


Compatible

Bootstrap is a mature, tested code-base that is entirely based on standards and cross-browser compliance. Sites that properly utilize what Bootstrap offers will also benefit from this compatibility. The CSS is the most essential part of Bootstrap. The Bootstrap CSS can be used alone, without the Bootstrap JavaScript components. Generally speaking, Bootstrap’s CSS provides two things…

Element Styles

These are built-in styles for HTML elements such as Buttons, fonts, colors, badges, typography, progress bars, alerts, etc… Using any of these Bootstrap Components is very easy. It’s just a matter of referencing the appropriate Bootstrap CSS class in the HTML markup.


The Bootstrap Grid

Layout helpers using “rows” and “columns”. The Bootstrap Grid System is used for layout, specifically Responsive Layouts. Understanding how it works is vital to understanding Bootstrap. The Grid is made up of groupings of Rows & Columns inside 1 or more Containers.


Customization

You may want to customize Bootstrap for several reasons. You may want to change some aspect of the look or styles such as colors, fonts, or borders. You may want to change some aspect of the responsive layout like grid breakpoints or gutter widths. Additionally, you may want to extend Bootstrap classes with new custom classes (ie; btn-custom).

Creating Themes

Of course customization is important since not everyone wants that overly recognizable Bootstrap look. Using the methods (CSS or SASS) described it’s fairly easy to transform your Bootstrap 4 sites with a unique look. Once you understand the basic of customization you're on the way to creating custom Bootstrap themes.

JavaScript

The Bootstrap documentation, has a very large “Components” section that includes most of the stylized CSS Components that I explained before. However, there’s overlap between the Bootstrap CSS and JavaScript Components. CSS is used to style Components, while JavaScript is used to make Components functional. Some Bootstrap Components only provide CSS-driven formatting and style so they don’t utilize JavaScript. These CSS-only Components were explored earlier in the Bootstrap CSS section: Badges, Breadcrumbs, Buttons, Cards, Form inputs, Jumbotron, Pagination.

Primary

With supporting text below as a natural lead-in to additional content.

Outline

Primary

With supporting text below as a natural lead-in to additional content.

Outline

Content

This is example content only for demonstration purposes.

Outline

List

With supporting text below as a natural lead-in to additional content.

Outline

Card

With supporting text below as a natural lead-in to additional content.

Outline
25% width 25% width 50% width
Data More data 123,203
Data More data 123,203
Responsive More data 53,203
Columns More data 123,203
Grid More data 12,303
Data More text 73,233

Card

With supporting text below as a natural lead-in to additional content.

Outline

Ad

Display supporters and advertisements here.

C-T-A

Themes?

Find more Bootstrap 4 themes at http://themes.guide

Go

Learning Bootstrap?

How-to: A Complete Guide to Bootstrap 4

Go