Bootstrap 5 Introduction

What is Bootstrap?

  • Bootstrap is a free front-end framework for faster and easier web development
  • Bootstrap includes design templates based on HTML and CSS for layout, forms, buttons, tables, navigation, modals, image carousels, and more
  • Bootstrap provides a rich set of JavaScript plugins
  • Bootstrap makes it easy to create responsive designs

What is responsive web design?

Responsive web design aims to create websites that can automatically adjust to enhance the user experience on all devices, whether mobile or large desktop computers.

Bootstrap 5 Example

<div class="container-fluid p-5 bg-primary text-white text-center">
  <h1>My First Bootstrap Page</h1>
</div>
<div class="container mt-5">
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1: Spring</h3>
      <p>On a fine day, I seek the fragrance by the Si River, and the boundless scenery is new at one time.</p>
      <p>At ease, I recognize the face of the东风, and the myriad of red and purple is always spring.</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2: A Late Spring Couplet</h3>
      <p>The red and purple have become dust, and the summer season is new in the sound of the cuckoo.</p>
      <p>The mulberry and hemp along the road cannot be counted, and I realize that I am a peaceful person.</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3: Mountain Journey</h3>
      <p>Going up the steep stone path of the cold mountain, there are people's homes where the white clouds rise.</p>
      <p>Sitting by the parking lot, loving the maple forest in the evening, the frosty leaves are redder than the flowers in February.</p>
    </div>
  </div>
</div>

Try It Yourself

Bootstrap versions

Bootstrap 5 (released in 2021) is the latest version of Bootstrap (released in 2013); it uses new components, faster stylesheet, and provides faster responsiveness.

Bootstrap 5 supports the latest stable versions of all major browsers and platforms. However, it does not support Internet Explorer 11 and earlier versions.

The main difference between Bootstrap 5 and Bootstrap 3 & 4 is that Bootstrap 5 has switched to Vanilla JavaScript instead of jQuery.

Comments:The team still supports critical bug fixes and documentation changes for Bootstrap 3 and Bootstrap 4, so it is completely safe to continue using them. However, no new features will be added to them.

Why use Bootstrap?

Advantages of Bootstrap:

  • Ease of use:Anyone with a basic understanding of HTML and CSS can start using Bootstrap immediately
  • Responsive features:Bootstrap's responsive CSS can be adjusted for mobile, tablet, and desktop
  • Mobile-first approach:In Bootstrap, mobile-first styles are a part of its core framework
  • Browser compatibility:Bootstrap 5 is compatible with all modern browsers (Chrome, Firefox, Edge, Safari, and Opera).

Note:If you need to support IE11 and earlier versions, you must use BS4 or BS3.

Where to get Bootstrap 5?

There are two methods to use Bootstrap 5 on your own website.

You can:

  • Contains Bootstrap 5 from CDN
  • Download Bootstrap 5 from getbootstrap.com

Bootstrap 5 CDN

If you do not want to download and host Bootstrap 5 yourself, you can refer to it from the CDN (Content Delivery Network).

CodeW3C.com provides CDN support for Bootstrap's CSS and JavaScript:

MaxCDN:

<!-- Latest compiled and compressed CSS -->
<link href="https://www.codew3c.com/lib/bs/bootstrap.css" rel="stylesheet">
<!-- Latest compiled JavaScript -->
<script src="https://www.codew3c.com/lib/bs/bootstrap.js"></script>

One of the advantages of using Bootstrap 5 CDN:

Many users have already downloaded Bootstrap 5 from jsDelivr when visiting another site. Therefore, when they visit your website, it will be loaded from the cache, thereby shortening the loading time. In addition, most CDNs will ensure that once a user requests a file from them, it will be served from the server closest to them, which also leads to faster loading times.

JavaScript?

Bootstrap 5 uses JavaScript for different components (such as modals, tooltips, pop-ups, etc.). However, if you only use the CSS part of Bootstrap, you do not need them.

Download Bootstrap 5

If you want to download and host Bootstrap 5 yourself, please visit https://getbootstrap.com/and then follow the instructions there.

Create your first web page with Bootstrap 5

1. Add HTML5 Document Type

Bootstrap 5 uses HTML elements and CSS properties that require the HTML5 doctype.

Always include the HTML5 doctype at the beginning of the page, as well as the lang attribute and the correct title, charset:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap 5 Example</title>
    <meta charset="utf-8">
  </head>
</html>

2. Mobile-First Bootstrap 5

The design goal of Bootstrap 5 is responsive to mobile devices. Mobile-first styles are part of the core framework.

To ensure correct rendering and touch zoom, please <head> Add the following inside the element <meta> Tag:

<meta name="viewport" content="width=device-width, initial-scale=1">

width=device-width Sets the page width to follow the device's screen-width (which varies by device).

initial-scale=1 Sets the initial zoom level when the browser first loads the page.

3. Container

Bootstrap 5 still needs an element to wrap the site content.

There are two container classes to choose from:

  1. .container class provides a responsive fixed-width container
  2. .container-fluid class provides a full-width container that spans the entire width of the viewport

Two Basic Bootstrap 5 Pages

Container Example

The following example shows the code for a basic Bootstrap 5 page (with a responsive fixed-width container):

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://www.codew3c.com/lib/bs/bootstrap.css" rel="stylesheet">
  <script src="https://www.codew3c.com/lib/bs/bootstrap.js"></script>
</head>
<body>
<div class="container">
  <h1>My First Bootstrap Page</h1>
  <p>This section is within the .container class.</p>
  <p>The .container class provides a responsive fixed-width container.</p>
</div>
</body>
</html>

Try It Yourself

Container Fluid Example

The following example shows the code for a basic Bootstrap 5 page (with a full-width container):

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://www.codew3c.com/lib/bs/bootstrap.css" rel="stylesheet">
  <script src="https://www.codew3c.com/lib/bs/bootstrap.js"></script>
</head>
<body>
<div class="container-fluid">
  <h1>My First Bootstrap Page</h1>
  <p>This section is within the .container-fluid class.</p>
  <p>The .container-fluid class provides a full-width container that spans the entire width of the viewport.</p>
</div>
</body>
</html>

Try It Yourself