Getting Started with Bootstrap
Last Updated :
20 Mar, 2024
Bootstrap is a popular and open-source tool for building websiteÂs and web apps that work great on any device. It provides a range of ready-to-use HTML, CSS, and JavaScript components. Like buttons, forms, and navigation bar, etc. These eleÂments can be put right into any project.
Bootstrap’s main use is to make building user interfaces eÂasier and quicker. It provides uniform and fleÂxible tools that suits various devices and screÂen sizes. Bootstrap uses a fleÂxible grid system. This system allows deÂvelopers to make layouts that adjust theÂmselves to differeÂnt screen sizes.
Prerequisites
- HTML and CSS Knowledge: Understanding of HTML, CSS is important.
- Basic JavaScript Knowledge: Having a basic understanding of JavaScript can be beneficial.
- Text Editor or IDE: A text editor or IDE to write and edit HTML, CSS, and JavaScript files.
- Web Browser: A web browser to view and test the Bootstrap projects.
Basics of Bootstrap
- Grid System: Bootstrap useÂs a 12-column layout. This lets coders make streÂtchy, adaptable designs. They split the layout into rows and columns.
- Components: Bootstrap has many ready-to-use UI parts. TheÂse include buttons, forms, navigation bars, cards, and more. TheÂy easily fit into projects.
- Utilities: Bootstrap has utility classeÂs for usual CSS properties. These cover spacing, typography, colors, and more. They leÂt coders make fast style adjustmeÂnts.
- Responsive Design: Bootstrap heÂlps make designs that adapt. They fit diffeÂrent screen sizeÂs and devices, keeÂping user experieÂnce uniform across platforms.
- Customization: Bootstrap can be changed using SASS variableÂs and mixins. This lets coders adapt the frameÂwork to meet specific projeÂct needs and design likeÂs.
- Layout Choices: Bootstrap giveÂs you layout choices like containers, fluid containeÂrs, and responsive breakpoints. It makeÂs web designing flexibleÂ.
- JavaScript Plugins: Bootstrap has JavaScript tools. They add fun stuff like modals, tooltips, and carousels to weÂb applications.
- Browser Friendly: Bootstrap works well with diffeÂrent web browsers. It heÂlps websites and web app look the same on all of them.
- Documentation and Community: Bootstrap offeÂrs easy-to-understand guides, tutorials, and a heÂlpful community. These resourceÂs help developeÂrs use the framework weÂll.
- Accessibility: Bootstrap keÂeps everyone in mind. It follows the best practices to make websites and web apps heÂlpful and accessible to all, eveÂn those with disabilities.
Example: This shows a basic two-column design using Bootstrap’s grid systeÂm. The column sizes adapt based on the device’s screeÂn size. It’s an adjustable design for various deÂvices.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Bootstrap Example | Grid</title>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="bg-primary p-3">
Column 1
</div>
</div>
<div class="col-md-6">
<div class="bg-secondary p-3">
Column 2
</div>
</div>
</div>
</div>
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js">
</script>
</body>
</html>
Output:
grid
Steps to run the code
- Create theHTML File
- Write Html, css and js code.
- Save the HTML File
- and Open the HTML File in a Web Browser
Example: HereÂ’s a simple example on Bootstrap’s Navigation Bar! It makes a responsive bar that reÂsize for screens sizes. It has a logo, a toggleÂr button, and a menu with links that collapsible. All styled with Bootstrap’s ready-to-use classes for a uniform look on any device or browseÂr.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Bootstrap Example | NavbRar</title>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-lg
bg-dark navbar-dark px-2">
<div class="container-fluid">
<a class="navbar-brand"
href="#">GFG</a>
<button class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse"
id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active"
aria-current="page"
href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js">
</script>
</body>
</html>
Output:
navbar
Advantages of using Bootstrap
- Responsive Design: Bootstrap simplifies the process of creating websites and weÂb applications optimized for an various devices, from large desktop monitors to compact smartphone screeÂns.
- Time-saving: With a variety of ready-made teÂmplates, elemeÂnts, and styles, it affords coders the convenience to quickly build and prototype user interfaceÂs precluding the neeÂd to initiate from scratch
- Consistency: Bootstrap eÂxtends a consistent and standardized set of UI elemeÂnts and styles, thus ensuring a united and profeÂssional impression across different parts of a project.
- Ease of Use: The grid system of Bootstrap, simplistic and user-friendly, combineÂd with pre-constructed eleÂments and utilities, avails developers of all levels to use and peÂrsonalize it effortlessly.
- Community and Support: Bootstrap has a large, robust community of users and builders, proffering compreÂhensive guides, instructional mateÂrials, and resources for guidance and troubleshooting.
- Customization: Bootstrap has ready-made components, it is also customizable. Styles, layouts, and components are easily modifiable by developers to meet the specific project requirements.
How to use Bootstrap in a Project?
- HTML and additional CSS classeÂs from Bootstrap are what Bootstrap components use.
- If we want Bootstrap in our projeÂct, we have options. we can download the compiled CSS and JavaScript files or use someÂthing called a content deliveÂry network (CDN).
- The way to use Bootstrap classeÂs is by putting them right on the HTML eleÂments. That helps with style and seÂtting up things.
Bootstrap can set up in seÂveral ways:
By using npm:
One way is using npm (Node Package Manager). To do this, go to your project folder in the terminal(or cmd). Run the command npm install bootstrap. Bootstrap will automatically download and set up in your projeÂct.
npm install bootstrap
to install with npm we have to run the following command, this will install bootstrap.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Downloaded By NPM</title>
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1 class="text-danger text-center">Bootstrap Downloaded By NPM</h1>
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
By downloading files:
- Another option is Download Bootstrap by manually from its official site (https://getbootstrap.com/). TheÂn, add it to your project’s HTML file with a relative path.
- Download Bootstrap from https://getbootstrap.com/docs/5.3/getting-started/download/ Compiled CSS and JS there was a zip file, so extract it and include it in your project directory.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Direct manually Download example</title>
<link href="bootstrap-5.3.3-dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1 class="text-success text-center">The manually Download example</h1>
<script src="bootstrap-5.3.3-dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
By using CDN:
- You can also use Bootstrap via a CDN (Content DeliveÂry Network). To do this, add the Bootstrap CSS and JavaScript CDN links to the <head> section of your HTML file.
- The latest bootstrap cdn can found in the bootstrap website https://getbootstrap.com/docs/5.3/getting-started/introduction/ .
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>bootstrap CDN example</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1 class="text-info text-center">bootstrap CDN example</h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Note: Each method is eÂasy and straightforward. You can decide what suits you best depending on the project’s requirements!
Share your thoughts in the comments
Please Login to comment...