BS4 Get Started

What is Bootstrap?

A free front-end framework called Bootstrap makes web development quicker and simpler.
In addition to optional JavaScript plugins, Bootstrap offers HTML and CSS based design templates for modals, image carousels, forms, buttons, tables, navigation, and many other uses.
Additionally, Bootstrap makes it simple to construct responsive designs.

What is Responsive Web Design?

The goal of responsive web design is to build websites that appear well on all screen sizes, from giant computers to little phones.

Bootstrap 4 Example

				
					<div class="jumbotron text-center">
  <h1>My First Bootstrap Page</h1>
  <p>Resize this responsive page to see the effect!</p>
</div>

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
</div>

Bootstrap Versions

This lesson uses Bootstrap 4, an update to Bootstrap 3 that was launched in 2018 and has additional components, faster stylesheets, increased responsiveness, etc.

The most recent version of Bootstrap, version 5, was released in 2021 and is compatible with the most recent stable versions of all major browsers and platforms. Internet Explorer 11 and lower, however, is not supported.

The primary distinction between Bootstrap 3 and 4 and Bootstrap 5 is that the latter now uses JavaScript in place of jQuery.

Note: It is safe to keep using Bootstrap 3 and Bootstrap 4 since the team continues to support them for important bugfixes and documentation updates. They won’t, however, get any further features.

Why Use Bootstrap?

Benefits of using Bootstrap:

Easy to use: Anyone may begin using Bootstrap with only a basic understanding of HTML and CSS.

Responsive features: The responsive CSS of Bootstrap adapts to computers, tablets, and phones.

Mobile-first approach: Mobile-first styles are included into the basic structure of Bootstrap.

Browser compatibility: All current browsers (Chrome, Firefox, Internet Explorer 10+, Edge, Safari, and Opera) are compatible with Bootstrap 4.

Where to Get Bootstrap 4?

To begin utilizing Bootstrap 4 on your own website, there are two methods.

You can:

Put Bootstrap 4 from a CDN in there.
Visit getbootstrap.com to get Bootstrap 4.

Bootstrap 4 CDN

Use a CDN (Content Delivery Network) to add Bootstrap 4 if you don’t want to download and host it yourself.

JavaScript and CSS from Bootstrap are supported by CDNs thanks to jsDelivr. Moreover, jQuery must be included:

jsDelivr:

				
					<!-- Latest compiled and minified CSS -->
<link data-minify="1" rel="stylesheet" href="https://codingfind.com/wp-content/cache/min/1/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css?ver=1753848490">

<!-- jQuery library -->
<script data-minify="1" src="https://codingfind.com/wp-content/cache/min/1/npm/jquery@3.7.1/dist/jquery.slim.min.js?ver=1743539888" defer></script>

<!-- Popper JS -->
<script data-minify="1" src="https://codingfind.com/wp-content/cache/min/1/npm/popper.js@1.16.1/dist/umd/popper.min.js?ver=1743539888" defer></script>

<!-- Latest compiled JavaScript -->
<script data-minify="1" src="https://codingfind.com/wp-content/cache/min/1/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js?ver=1743539888" defer></script>

One advantage of using the Bootstrap 4 CDN:

While browsing another website, many visitors have already downloaded Bootstrap 4 from jsDelivr. When people visit your site, it will therefore load from cache, which speeds up loading times. Faster loading times are also achieved by most CDNs, which guarantee that a file requested by a user will be provided from the server nearest to them.

jQuery and Popper?

Popper.js and jQuery are used by Bootstrap 4 for JavaScript elements (including tooltips, popovers, modals, etc.). They are not necessary, though, if you only utilize Bootstrap’s CSS component.

Downloading Bootstrap 4

Visit https://getbootstrap.com/, follow the instructions, and download and host Bootstrap 4 yourself.

Create First Web Page With Bootstrap 4

1. Add the HTML5 doctype

The HTML5 doctype is necessary for the use of CSS attributes and HTML elements in Bootstrap 4.

The HTML5 doctype, the lang attribute, and the appropriate character set should always be included at the top of the page:

				
					<!DOCTYPE html>
<html lang="en">
  <head>
    
  </head>
</html>

2. Bootstrap 4 is mobile-first

The responsive design of Bootstrap 4 is intended for mobile devices. Mobile-first styles are integrated into the main structure.

Within the <head> element, add the following <meta> tag to guarantee appropriate rendering and touch zooming:

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

The width of the page is set to follow the device’s screen width (which varies based on the device) by using the width=device-width component.

When the browser loads the page for the first time, the initial zoom level is determined by the initial-scale=1 component.

3. Containers

To wrap the contents of a website, Bootstrap 4 additionally needs a contained element.

There are two sorts of containers available:

1. A responsive fixed width container is offered by the .container class.

2. A full width container that spans the whole width of the viewport is offered by the .container-fluid class.

Two Basic Bootstrap 4 Pages

The code for a simple Bootstrap 4 page (with a responsive fixed width container) is displayed in the example below:

Container Example

				
					<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Example</title>
  
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link data-minify="1" rel="stylesheet" href="https://codingfind.com/wp-content/cache/min/1/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css?ver=1753848490">
  <script data-minify="1" src="https://codingfind.com/wp-content/cache/min/1/npm/jquery@3.7.1/dist/jquery.slim.min.js?ver=1743539888" defer></script>
  <script data-minify="1" src="https://codingfind.com/wp-content/cache/min/1/npm/popper.js@1.16.1/dist/umd/popper.min.js?ver=1743539888" defer></script>
  <script data-minify="1" src="https://codingfind.com/wp-content/cache/min/1/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js?ver=1743539888" defer></script>
</head>
<body>

<div class="container">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p>
</div>

<script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
</html>

The code for a simple Bootstrap 4 page (with a full width container) is displayed in the example below:

Container Fluid Example

				
					<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Example</title>
  
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link data-minify="1" rel="stylesheet" href="https://codingfind.com/wp-content/cache/min/1/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css?ver=1753848490">
  <script data-minify="1" src="https://codingfind.com/wp-content/cache/min/1/npm/jquery@3.7.1/dist/jquery.slim.min.js?ver=1743539888" defer></script>
  <script data-minify="1" src="https://codingfind.com/wp-content/cache/min/1/npm/popper.js@1.16.1/dist/umd/popper.min.js?ver=1743539888" defer></script>
  <script data-minify="1" src="https://codingfind.com/wp-content/cache/min/1/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js?ver=1743539888" defer></script>
</head>
<body>

<div class="container-fluid">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p>
</div>

</body>
</html>

BS4 Get Started

What is Bootstrap?

Bootstrap 4 Example

Bootstrap Versions

Why Use Bootstrap?

Where to Get Bootstrap 4?

Bootstrap 4 CDN

jsDelivr:

Downloading Bootstrap 4

Create First Web Page With Bootstrap 4

Two Basic Bootstrap 4 Pages

Container Example

Container Fluid Example

Top Tutorials

Top Tutorials

Top Tutorials

Top Tutorials