Bootstrap is a popular front-end framework used to create responsive and mobile-first websites quickly. It provides ready-made CSS classes, components, utilities, and JavaScript features that help developers build modern web pages without writing everything from scratch.
Bootstrap is a free and open-source front-end framework for building responsive websites and web applications.
It provides predefined classes for layouts, buttons, forms, navigation bars, cards, alerts, tables, modals, and many other UI elements.
<button class="btn btn-primary">
Click Me
</button>
Bootstrap makes website development faster and easier.
Bootstrap is a front-end framework. It works mainly on the part of a website that users see and interact with.
HTML provides the structure, CSS provides styling, and JavaScript provides interactive behavior.
Bootstrap is free to use. Developers can use it for personal projects, educational websites, business websites, and many other web projects.
Bootstrap is open-source software. Its source code is publicly available, and developers can use and customize it according to their project needs.
Bootstrap works together with HTML. Bootstrap classes are added to HTML elements to apply predefined styles.
<h1 class="text-primary">
Welcome
</h1>
Bootstrap contains a large collection of CSS rules. Instead of creating every style manually, developers can use Bootstrap classes.
<p class="text-success">
Success Message
</p>
Some Bootstrap components use JavaScript for interactive behavior. Examples include modals, dropdowns, carousels, tooltips, popovers, offcanvas menus, and collapse components.
Responsive web design means creating websites that adjust their layout according to the screen size.
A responsive website can work properly on mobile phones, tablets, laptops, and desktop computers.
Bootstrap follows a mobile-first approach. This means websites are designed to work well on smaller screens first and can then be adapted for larger screens.
Bootstrap provides a powerful grid system for creating page layouts. The grid is based on rows and columns.
<div class="container">
<div class="row">
<div class="col">Column 1</div>
<div class="col">Column 2</div>
</div>
</div>
Containers are used to provide proper horizontal spacing and control the width of page content.
Common container classes include:
.container.container-fluid
The .row class is used to create a horizontal row in the
Bootstrap grid system.
<div class="row">
...
</div>
Columns are used to divide a row into different sections.
<div class="row">
<div class="col">
Left
</div>
<div class="col">
Right
</div>
</div>
Bootstrap provides many utility classes that can be used for common styling tasks.
Examples include:
mt-3 – margin-topp-3 – paddingtext-center – center textfw-bold – bold textd-flex – flex display
Bootstrap provides ready-made button styles using the .btn
class.
<button class="btn btn-primary">
Primary
</button>
<button class="btn btn-success">
Success
</button>
<button class="btn btn-danger">
Delete
</button>
Bootstrap provides predefined contextual colors that can be applied to text, buttons, backgrounds, alerts, and other components.
Bootstrap provides classes for controlling text alignment, font weight, text transformation, headings, and other typography features.
<p class="text-center">
Center Text
</p>
<p class="fw-bold">
Bold Text
</p>
Cards are flexible containers used to display related information. They are commonly used for products, courses, profiles, blog posts, and dashboard sections.
<div class="card">
<div class="card-body">
<h5>My Course</h5>
<p>Learn Bootstrap.</p>
</div>
</div>
Alerts are used to display important messages to users.
<div class="alert alert-success">
Registration successful!
</div>
Bootstrap provides classes that make it easier to create attractive and responsive forms.
<input type="text" class="form-control" placeholder="Enter Name">
Bootstrap provides navigation components such as navigation bars, dropdown menus, and responsive navigation systems.
The navbar component is commonly used for website headers and menus. It can contain a brand name, links, dropdowns, and buttons.
<nav class="navbar navbar-expand-lg
navbar-light bg-light">
<a class="navbar-brand"
href="#">
My Website
</a>
</nav>
Bootstrap provides many ready-made components that reduce development time.
Utility classes allow developers to quickly apply common CSS properties without writing custom CSS.
<div class="text-center p-4 mt-3">
Bootstrap Utilities
</div>
Bootstrap Icons is a separate icon library designed to work well with Bootstrap projects. It provides many icons that can be used in buttons, menus, cards, and other interface elements.
Bootstrap includes interactive components that can be controlled with JavaScript.
Examples include:
A CDN can be used to include Bootstrap files directly in an HTML page without downloading Bootstrap files manually.
A typical Bootstrap project includes the Bootstrap CSS file and, when needed, Bootstrap's JavaScript bundle.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<h1 class="text-primary">
Welcome to Bootstrap
</h1>
<p class="lead">
Learn Bootstrap step by step.
</p>
<button class="btn btn-success">
Get Started
</button>
</div>
</body>
</html>
This example uses a container, heading, paragraph, text color, spacing utility, and Bootstrap button.
To learn Bootstrap effectively, follow these steps:
By completing this tutorial, you will be able to create responsive websites using Bootstrap components and utility classes.
Question: What is Bootstrap?