Bootstrap 4 Tutorial
BS4 Introduction BS4 Getting Started BS4 Containers BS4 Typography BS4 Grid Basics BS4 Tables BS4 Images BS4 Jumbotron BS4 Buttons BS4 Button Groups BS4 Spinners BS4 Alerts BS4 Dropdowns BS4 Collapse BS4 Navs BS4 Navbars BS4 Pagination BS4 Breadcrumbs BS4 Badges BS4 Progress Bars BS4 List Groups BS4 Cards BS4 Forms BS4 Inputs BS4 Input Groups BS4 Custom Forms BS4 Carousel BS4 Modal BS4 Tooltips BS4 Popovers BS4 Toast BS4 Scrollspy BS4 Media Objects BS4 Filters BS4 Utilities Bootstrap 3 vs. Bootstrap 4
Bootstrap 4 Grid
BS4 Grid System BS4 Grid XSmall BS4 Grid Small BS4 Grid Medium BS4 Grid Large BS4 Grid XLarge
Bootstrap 4 Reference
JS Alert JS Carousel JS Collapse JS Dropdown JS Modal JS Popover JS Tab JS Toasts JS Tooltip

Bootstrap 4 Getting Started

In this chapter you will learn how to incorporate Bootstrap 4 into your web pages.


Adding Bootstrap 4 to Your Web Pages

There are two ways to use Bootstrap 4:

  • Download the Bootstrap 4 library from getbootstrap.com
  • Include Bootstrap 4 from a CDN

Downloading Bootstrap 4

If you want to download and host Bootstrap 4 yourself, go to getbootstrap.com, and follow the instructions there.


Including Bootstrap 4 from CDN

If you don't want to download and host Bootstrap 4 yourself, you can include it from a CDN (Content Delivery Network).

CSS

Use the below compiled Bootstrap's CDN of CSS in your project:

JS

Many of Bootstrap 4 components require the use of JavaScript to function.

Place the following <script> near the end of your pages, right before the closing </body> tag, to enable them:

Advantage of using the Bootstrap 4 CDN:

CDNs can offer a performance benefit by hosting Bootstrap 4 on servers spread across the globe. This also offers an advantage that if the visitor to your webpage has already downloaded a copy of Bootstrap 4 from the same CDN, it won't have to be re-downloaded.

jQuery and Popper:

Bootstrap 4 use jQuery and Popper.js for JavaScript components (like modals, tooltips, dropdown, popovers etc). However, if you don't use JavaScript components, you don't need them.

Curious which components explicitly require jQuery and Popper.js? Click the show components below:

Show components requiring JavaScript
  • Alerts for dismissing
  • Buttons for toggling states and checkbox/radio functionality
  • Carousel for all slide behaviors, controls, and indicators
  • Collapse for toggling visibility of content
  • Dropdowns for displaying and positioning (also requires Popper.js)
  • Modals for displaying, positioning, and scroll behavior
  • Navbar for extending our Collapse plugin to implement responsive behavior
  • Tooltips and popovers for displaying and positioning (also requires Popper.js)
  • Scrollspy for scroll behavior and navigation updates


Create First Web Page With Bootstrap 4

1. Essential elements

Always include the HTML5 doctype at the beginning of the page, along with the lang attribute and the correct character set:

Note: The meta name="viewport" enables touch zooming and ensure proper rendering on mobile devices.

2. Making the above code a Bootstrap 4 Template

To make the above code a Bootstrap 4 template, just include the appropriate Bootstrap 4 CSS and Javascript files:

That’s all you need for overall page requirements.

The following example shows the code for a basic Bootstrap 4 page:

My First Bootstrap Page
Column 1

Bootstrap 4 is a powerful and popular mobile first front-end framework for building responsive mobile first sites on the web. Bootstrap 4 is a latest version of Bootstrap, which uses HTML, CSS and JavaScript.

Column 2

Bootstrap 4 is a powerful and popular mobile first front-end framework for building responsive mobile first sites on the web. Bootstrap 4 is a latest version of Bootstrap, which uses HTML, CSS and JavaScript.

Column 3

Bootstrap 4 is a powerful and popular mobile first front-end framework for building responsive mobile first sites on the web. Bootstrap 4 is a latest version of Bootstrap, which uses HTML, CSS and JavaScript.

Run code