BS Get Started
What is Bootstrap?
- Bootstrap is a free front-end framework for faster and easier online development.
- It provides HTML and CSS design templates for typography, forms, buttons, tables, navigation, modals, picture carousels, and more.
- It also supports optional JavaScript plugins.
- Bootstrap also enables you to simply develop responsive designs.
What is Responsive Web Design?
Responsive web design is the process of building websites that automatically change to look nice on any platform, from mobile phones to giant PCs.
Bootstrap 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 History
Bootstrap was created by Mark Otto and Jacob Thornton at Twitter and distributed as an open source product on GitHub in August 2011.
In June 2014 Bootstrap was the No.1 project on GitHub!
Why Use Bootstrap?
Advantages of Bootstrap:
- Easy to use: Anyone with a basic understanding of HTML and CSS may start using Bootstrap.
- Responsive features: Bootstrap’s responsive CSS adapts to smartphones, tablets, and desktops.
- Mobile-first approach: Bootstrap 3’s core foundation includes mobile-first styling.
- Browser compatibility:Â Bootstrap is compatible with all modern browsers, including Chrome, Firefox, Internet Explorer, Edge, Safari, and Opera.
Bootstrap Versions
This tutorial covers Bootstrap 3, which was released in 2013. However, we also cover subsequent versions, like Bootstrap 4 (released in 2018) and Bootstrap 5 (issued in 2021).
Bootstrap 5 is the most recent version of the framework, featuring new components, quicker stylesheets, increased responsiveness, and other improvements. It supports the most recent, stable versions of all major browsers and platforms. However, Internet Explorer 11 and below are not supported.
The biggest difference between Bootstrap 5 and Bootstrap 3 and 4 is that Bootstrap 5 uses JavaScript instead of jQuery.
Note: The team continues to support Bootstrap 3 and Bootstrap 4 for major bug fixes and documentation revisions, and they are absolutely safe to use. However, no new functionality will be added to them.
Where to Get Bootstrap?
There are two ways to get started with Bootstrap on your own website.
You can do:
- Download Bootstrap from getbootstrap.com.
- Include bootstrap from a CDN.
Downloading Bootstrap
If you wish to download and host Bootstrap yourself, visit getbootstrap.com and follow the instructions there.
Bootstrap CDN
If you don’t want to download and host Bootstrap yourself, you can use a Content Delivery Network (CDN).
MaxCDN offers CDN support for Bootstrap’s CSS and JavaScript. You should also include jQuery:
MaxCDN:
<!-- Latest compiled and minified CSS -->
<link data-minify="1" rel="stylesheet" href="https://codingfind.com/wp-content/cache/min/1/bootstrap/3.4.1/css/bootstrap.min.css?ver=1753836495">
<!-- jQuery library -->
<script data-minify="1" src="https://codingfind.com/wp-content/cache/min/1/ajax/libs/jquery/3.7.1/jquery.min.js?ver=1743971328" defer></script>
<!-- Latest compiled JavaScript -->
<script data-minify="1" src="https://codingfind.com/wp-content/cache/min/1/bootstrap/3.4.1/js/bootstrap.min.js?ver=1743310438" defer></script>
One benefit of utilizing the Bootstrap CDN:
Many users have already downloaded Bootstrap from MaxCDN while visiting another website. As a result, when people visit your website, it will be loaded from cache, resulting in a faster load time. Also, most CDNs will ensure that when a user requests a file from it, it is served from the server nearest to them, resulting in speedier loading times.
jQuery
Bootstrap employs jQuery for JavaScript plugins (such as modals and tooltips). However, if you only use the CSS component of Bootstrap, you do not need jQuery.
Create First Web Page With Bootstrap
1. Add the HTML5 doctype
Bootstrap employs HTML elements and CSS features that require the HTML5 doctype.
Always include the HTML5 doctype at the beginning of the page, together with the lang attribute and the appropriate character set:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
</html>
2. Bootstrap 3 is mobile-first
Bootstrap 3 is designed to be mobile-responsive. Mobile-first styles are part of the core architecture.
To enable appropriate rendering and touch zooming, include the following <meta> tag in the <head> element:
<meta name="viewport" content="width=device-width, initial-scale=1">
The width=device-width parameter specifies that the page’s width should be determined by the device’s screen width.
The initial-scale=1 parameter specifies the initial zoom level when the page is first loaded by the browser.
3. Containers
Bootstrap also requires a contained element to wrap the site’s content.
There are two container classes to select from:
1.The .container class creates a responsive fixed-width container.
2.The .container-fluid class provides a full width container that stretches the entire width of the viewport.
Two Basic Bootstrap Pages
The following example demonstrates the code for a basic Bootstrap page (with a responsive fixed width 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" rel="stylesheet" href="https://codingfind.com/wp-content/cache/min/1/bootstrap/3.4.1/css/bootstrap.min.css?ver=1753836495">
<script data-minify="1" src="https://codingfind.com/wp-content/cache/min/1/ajax/libs/jquery/3.7.1/jquery.min.js?ver=1743971328" defer></script>
<script data-minify="1" src="https://codingfind.com/wp-content/cache/min/1/bootstrap/3.4.1/js/bootstrap.min.js?ver=1743310438" 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 following example shows the code for a basic Bootstrap page (with a full width 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" rel="stylesheet" href="https://codingfind.com/wp-content/cache/min/1/bootstrap/3.4.1/css/bootstrap.min.css?ver=1753836495">
<script data-minify="1" src="https://codingfind.com/wp-content/cache/min/1/ajax/libs/jquery/3.7.1/jquery.min.js?ver=1743971328" defer></script>
<script data-minify="1" src="https://codingfind.com/wp-content/cache/min/1/bootstrap/3.4.1/js/bootstrap.min.js?ver=1743310438" defer></script>
</head>
<body>
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
</body>
</html>
