BS5 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 5 Example
<div class="container-fluid p-5 bg-primary text-white text-center">
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<div class="container mt-5">
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
</div>
Bootstrap Versions
The most recent iteration of Bootstrap, launched in 2013, is called Bootstrap 5 (released in 2021); it features new components, a quicker stylesheet, and more responsiveness.
The most recent, stable versions of all the major browsers and systems are supported by Bootstrap 5. Internet Explorer 11 and lower, however, is not supported.
The primary distinction between Bootstrap 3 and 4 and Bootstrap 5 is that the latter has moved from jQuery to vanilla JavaScript.
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 5?
To begin utilizing Bootstrap 5 on your own website, there are two methods.
One may:
- Put Bootstrap 5 from a CDN in there.
- Get Bootstrap 5 by visiting getbootstrap.com.
Bootstrap 5 CDN
It is possible to incorporate Bootstrap 5 from a CDN (Content Delivery Network) if you do not wish to download and host it yourself.
CDN support for Bootstrap’s JavaScript and CSS is offered by jsDelivr:
MaxCDN:
<!-- Latest compiled and minified CSS -->
<link data-minify="1" href="https://codingask.com/wp-content/cache/min/1/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css?ver=1730385537" rel="stylesheet">
<!-- Latest compiled JavaScript -->
<script data-minify="1" src="https://codingask.com/wp-content/cache/min/1/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js?ver=1730385538" defer></script>
One advantage of using the Bootstrap 5 CDN:
While browsing another website, many visitors have already downloaded Bootstrap 5 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.
JavaScript?
JavaScript is used by Bootstrap 5 for a variety of components, including tooltips, popovers, and modals. They are not necessary, though, if you only utilize Bootstrap’s CSS component.
Downloading Bootstrap 5
Visit https://getbootstrap.com/, follow the instructions, and download and host Bootstrap 4 yourself.
Create Your First Web Page With Bootstrap 5
1. Add the HTML5 doctype
The HTML5 doctype is necessary for the use of CSS attributes and HTML elements in Bootstrap 5.
Always start a page with the HTML5 doctype, the lang attribute, the appropriate title, and the appropriate character set:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 Example</title>
</head>
</html>
2. Bootstrap 5 is mobile-first
The responsive design of Bootstrap 5 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.
Two Basic Bootstrap 5 Pages
The code for a basic Bootstrap 5 page (with a responsive fixed width container) is displayed in the example below:
Container Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link data-minify="1" href="https://codingask.com/wp-content/cache/min/1/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css?ver=1730385537" rel="stylesheet">
<script data-minify="1" src="https://codingask.com/wp-content/cache/min/1/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js?ver=1730385538" defer></script>
</head>
<body>
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This part is inside a .container class.</p>
<p>The .container class provides a responsive fixed width container.</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 basic Bootstrap 5 page (with a full width container) is displayed in the example below:
Container Fluid Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link data-minify="1" href="https://codingask.com/wp-content/cache/min/1/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css?ver=1730385537" rel="stylesheet">
<script data-minify="1" src="https://codingask.com/wp-content/cache/min/1/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js?ver=1730385538" defer></script>
</head>
<body>
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This part is inside a .container-fluid class.</p>
<p>The .container-fluid class provides a full width container, spanning the entire width of the viewport.</p>
</div>
</body>
</html>
