Search...
BS5 Tutorial BS5 Interview Questions BS5 Layout BS5 Content BS5 Components Sign In
Bootstrap Tutorial
Last Updated : 03 Jun, 2025
Bootstrap is a popular front-end framework for building responsive and
mobile-first websites. It provides pre-designed CSS, JavaScript
components, and utility classes to quickly create modern and consistent
user interfaces.
It Includes pre-built responsive grid systems for mobile-first design.
Offers a wide range of UI components like buttons, modals, and
navbars.
Provides built-in support for responsive typography, spacing, and
utilities.
Extensively customizable via Sass variables and Bootstrap's
configuration.
To start with Bootstrap, you need to install it on your project or use the
CDN link. Follow these articles to install depending on your system:
How to install Bootstrap 5?
How to Add Bootstrap in a Project?
Let us now take a look at our first code example.
<html>
<head>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/
bootstrap.min.css"
We use cookies rel="stylesheet"
to ensure you have the best browsing experience on our website. By
integrity="sha384-
using our site, you acknowledge that you have read and understood our Cookie Policy & Got It !
QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+AL
Privacy Policy
EwIH"
crossorigin="anonymous">
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bo
otstrap.bundle.min.js"
integrity="sha384-
YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6j
IeHz"
crossorigin="anonymous"></script>
</head>
<body>
<div class="container text-center">
<h1 class="text-success">
Welcome to GeeksforGeeks
</h1>
<p class="text-dark">A Simple Example of
Bootstrap</p>
</div>
</body>
</html>
Output
FIrst Bootstrap Example
In this example:
Bootstrap CSS and JavaScript files are included via CDNs with integrity
attributes for security.
The container class ensures the content is responsive and aligned.
The text-center class centers the text within the div.
The text-success class adds a green color to the heading, using
Bootstrap's built-in color utilities.
We use cookies to ensure you have the best browsing experience on our website. By
using our site, you acknowledge that you have read and understood our Cookie Policy &
Why Learn Bootstrap? Privacy Policy
Accelerates the development of modern web pages.
Ensures consistent design across devices and browsers.
Reduces the need for writing custom CSS.
Ideal for both beginners and professionals in web development.
Bootstrap Tutorial
Bootstrap Layout
Bootstrap layout is built on a flexible grid layout that adjusts seamlessly to
different screen sizes. It uses a 12-column grid system to create
responsive designs. You can control the width and positioning of columns
by combining classes for different screen sizes (e.g., .col-md-6 for medium
devices).
Breakpoints
Containers
Grid
Columns
Gutters
Utilities
Z-index
We use cookies to ensure you have the best browsing experience on our website. By
using Bootstrap Content
our site, you acknowledge that you have read and understood our Cookie Policy &
Privacy Policy
Bootstrap provides a range of classes to enhance and structure content. It
includes typography classes for headings, paragraphs, and text alignment,
as well as helper classes for spacing and text colors.
Reboot
Typography
Images
Tables
Figures
Bootstrap Forms
Bootstrap simplifies form creation with pre-styled components and
layouts. It includes classes for form controls like text inputs, select menus,
and checkboxes.
Forms
Form Controls
Select
Checks and Radios
Range
Input group
Floating labels
Form Layout
Form Grid
Horizontal Form
Validation
Bootstrap Components
Bootstrap offers a rich set of pre-designed components to streamline UI
development. These include buttons, cards, modals, navbars, and more.
Accordion
We use cookies to ensure you have the best browsing experience on our website. By
Alerts
using our site, you acknowledge that you have read and understood our Cookie Policy &
Badges Privacy Policy
Breadcrumb
Buttons
Button Group
Card
Carousel
Close Button
Collapse
Dropdowns
List Group
Modal
Navbar
Offcanvas
Popovers
Pagination
Progress
Scrollspy
Spinners
Toasts
Tooltips
Bootstrap Helpers
Bootstrap helpers are utility classes that simplify common tasks and
improve readability. They include classes for text alignment, visibility,
display properties, and more.
Clearfix
Colored links
Ratios
Position
Visually Hidden
Stretched link
We use cookies to ensure you have the best browsing experience on our website. By
Text truncation
using our site, you acknowledge that you have read and understood our Cookie Policy &
Privacy Policy
Bootstrap Utilities
Bootstrap utilities are small, reusable classes that provide additional
functionality and control. They include classes for spacing, alignment,
borders, and background colors.
Background
Borders
Colors
Display
Flex
Float
Interactions
Overflow
Position
Shadows
Sizing
Spacing
Text
Vertical align
Visibility
Bootstrap For Interview
Bootstrap Interview Questions And Answers
Bootstrap Exercises, Practice Questions and Solutions
Bootstrap Quiz | Set-1
Bootstrap Quiz | Set-2
Bootstrap Quiz | Set-3
Features of Bootstrap
Grid System: Easily create responsive layouts with a flexible grid
We use cookies
system to ensure
that you have theseamlessly
adjusts best browsing experience
to various on our website.sizes.
screen By
using our site, you acknowledge that you have read and understood our Cookie Policy &
Privacy Policy
Forms: Build user-friendly forms with diverse styles and functionalities,
including validation.
Buttons: Add customizable buttons of all shapes and sizes to enhance
your website's interactivity.
Navigation: Implement intuitive navigation menus, from simple
dropdowns to advanced mega menus.
Alerts: Effectively communicate with dismissible alerts, warnings, and
success notifications.
Images: Improve your website's visual appeal with responsive image
handling.
JavaScript Plugins: Integrate interactive features like modals, tooltips,
and carousels using Bootstrap’s JavaScript plugins.
Applications of Bootstrap
Creating Responsive Websites
Prototyping Web Applications
Developing Admin Dashboards
Building Landing Pages
Designing E-commerce Frontends
Bootstrap vs Other CSS Frameworks
Feature Bootstrap Tailwind Foundation
CSS
Design Pre-designed Pre-designed
Utility-first
Philosophy Components Components
Learning Curve Easy Moderate Moderate
Customization Moderate High Moderate
We use cookies to ensure you have the best browsing experience on our website. By
using our site, you acknowledge that you have
Responsiveness read and understood our
Built-in Cookie Policy &
Built-in Built-in
Privacy Policy
Feature Bootstrap Tailwind Foundation
CSS
Tailored Enterprise
Use Case Quick Prototypes
Designs Websites
Best Approach to Learn Bootstrap
You can complete this Bootstrap tutorial in approximately 8 weeks.
Comment More info
Next Article
Campus Training Program Bootstrap 5 Tutorial
Similar Reads
Bootstrap 5 Tutorial
Bootstrap 5 is a front-end framework that helps developers create
responsive and visually appealing websites quickly and efficiently. Bootstra…
15+ min read
Bootstrap 4 Tutorial
Bootstrap 4 is an open-source framework for creating responsive web
applications. It is the most popular CSS framework for creating mobile-first…
15+ min read
React Bootstrap Tutorial
React-Bootstrap is a popular front-end framework that combines the power
of React with the simplicity of Bootstrap. It provides a modern way to build…
We use cookies to ensure you have the best browsing experience on our website. By
using our site,
15+you
minacknowledge
read that you have read and understood our Cookie Policy &
Privacy Policy
Spring Boot Tutorial
Spring Boot is a Java framework that makes it easier to create and run Java
applications. It simplifies the configuration and setup process, allowing…
15+ min read
Bootstrap 4 | Modal
In simple words, the Modal component is a dialog box/popup window that is
displayed on top of the current page, once the trigger button is clicked.…
15+ min read
Bootstrap Buttons
Bootstrap Buttons are pre-designed styled buttons elements that come in
various styles, colors, and sizes. Bootstrap buttons are pre-defined by…
8 min read
Bootstrap 5 Modal
Bootstrap 5 is the latest major release by Bootstrap in which they have
revamped the UI and made various changes. Modals are used to add dialog…
15+ min read
Bootstrap Forms
Bootstrap Forms make creating user input areas easy with pre-styled
components. They simplify form design from basic text fields to complex…
15+ min read
Bootstrap 4 | Utilities
For ones new to the term, Bootstrap 4 is a free front-end framework for
faster and easier web development. Bootstrap includes HTML and CSS…
15+ mintoread
We use cookies ensure you have the best browsing experience on our website. By
using our site, you acknowledge that you have read and understood our Cookie Policy &
Privacy Policy
Bootstrap 5 Utilities
Bootstrap 5 provides a lot of utilities to make a stylish, mobile-friendly, and
responsive front-end website without using any CSS code. The utility layou…
14 min read
Corporate & Communications Address:
A-143, 7th Floor, Sovereign Corporate
Tower, Sector- 136, Noida, Uttar Pradesh
(201305)
Registered Address:
K 061, Tower K, Gulshan Vivante
Apartment, Sector 137, Noida, Gautam
Buddh Nagar, Uttar Pradesh, 201305
Advertise with us
Company Explore
About Us Job-A-Thon
Legal Offline Classroom Program
Privacy Policy DSA in JAVA/C++
Careers Master System Design
In Media Master CP
Contact Us Videos
Corporate Solution
Campus Training Program
Tutorials DSA
Python
We use cookies to ensure you have the best browsing experience on our website. ByData Structures
Javathat you have read and understood our Cookie Policy &Algorithms
using our site, you acknowledge
C++ Privacy Policy DSA for Beginners
PHP Basic DSA Problems
GoLang DSA Roadmap
SQL DSA Interview Questions
R Language Competitive Programming
Android
Data Science & ML Web Technologies
Data Science With Python HTML
Machine Learning CSS
ML Maths JavaScript
Data Visualisation TypeScript
Pandas ReactJS
NumPy NextJS
NLP NodeJs
Deep Learning Bootstrap
Tailwind CSS
Python Tutorial Computer Science
Python Examples GATE CS Notes
Django Tutorial Operating Systems
Python Projects Computer Network
Python Tkinter Database Management System
Web Scraping Software Engineering
OpenCV Tutorial Digital Logic Design
Python Interview Question Engineering Maths
DevOps System Design
Git High Level Design
AWS Low Level Design
Docker UML Diagrams
Kubernetes Interview Guide
Azure Design Patterns
GCP OOAD
DevOps Roadmap System Design Bootcamp
Interview Questions
School Subjects Databases
Mathematics SQL
Physics MYSQL
Chemistry PostgreSQL
Biology PL/SQL
Social Science MongoDB
English Grammar
We use cookies to ensure you have the best browsing experience on our website. By
Preparationthat
using our site, you acknowledge Corner More
you have read and understood our Cookie Policy & Tutorials
Company-Wise Recruitment Process
Privacy Policy Software Development
Aptitude Preparation Software Testing
Puzzles Product Management
Company-Wise Preparation Project Management
Linux
Excel
All Cheat Sheets
Courses Programming Languages
IBM Certification Courses C Programming with Data Structures
DSA and Placements C++ Programming Course
Web Development Java Programming Course
Data Science Python Full Course
Programming Languages
DevOps & Cloud
Clouds/Devops GATE 2026
DevOps Engineering GATE CS Rank Booster
AWS Solutions Architect Certification GATE DA Rank Booster
Salesforce Certified Administrator Course GATE CS & IT Course - 2026
GATE DA Course 2026
GATE Rank Predictor
@GeeksforGeeks, Sanchhaya Education Private Limited, All rights reserved
We use cookies to ensure you have the best browsing experience on our website. By
using our site, you acknowledge that you have read and understood our Cookie Policy &
Privacy Policy
