Jahab: Bootstrap

Bootstrap:-

------------

-it's a popular open-source(free) front-end framework used to build responsive Web design

-mobile-first websites quickly.

-Bootstrap (the front-end CSS framework)

Responsive Web design:

--------------------------------

* Responsive web design is about creating web sites which automatically adjust themselves to look good on all devices, from small phones to large desktops.

History of Bootstrap:-

-----------------------

*2010 – Bootstrap was created by Mark Otto and Jacob Thornton while working at Twitter. It was initially called Twitter Blueprint and was developed to make web interfaces more consistent across projects.

*August 2011 – Bootstrap was released as an open-source project under the MIT License. It quickly became popular because it made responsive web design easier.

*Bootstrap 2 (2012) – Introduced built-in responsive design, allowing websites to adapt to different screen sizes such as desktops, tablets, and phones.

*Bootstrap 3 (2013) – Adopted a mobile-first approach, meaning layouts were designed for mobile devices first and then enhanced for larger screens. It also introduced the 12-column responsive grid system that became widely used.

*Bootstrap 4 (2018) – Replaced Less with Sass, introduced Flexbox for improved layouts, and modernized many components and utilities.

*Bootstrap 5 (2021) – Removed the dependency on jQuery, added more utility classes, improved customization, enhanced RTL (right-to-left) support, and updated components for modern web development.

Features:-

-----------

*Responsive Grid System: 12-column layout for creating responsive designs.

*Prebuilt Components: Buttons, cards, modals, navbars, alerts, forms, carousels, and more.

*Utility Classes: Easily control spacing, colors, typography, display, flexbox, etc.

*JavaScript Components: Interactive elements like dropdowns, tooltips, accordions, and modals.

Why Use Bootstrap?

*Faster web development.

*Mobile-first responsive design.

*Consistent UI across browsers.

*Large community and extensive documentation.

*Easy customization.

Common Bootstrap Classes:-

------------------------------------

Purpose Example

------------- -----------------

*Container : container, container-fluid

*Grid : row, col, col-md-6

*Buttons : btn, btn-primary, btn-danger

*Text : text-center, text-primary, fw-bold

*Spacing : m-3, mt-4, p-2

*Colors : bg-success, bg-warning, text-white

*Flexbox : d-flex, justify-content-center, align-items-center

------------------------------------------------------

1. Container:-

--------------

-A container is used to wrap your content and provide proper alignment and responsive padding.

-Bootstrap provides three main types of containers:

1. .container

2. .container-fluid

3. Responsive Containers

1. .container : A responsive fixed-width container.

Ex:

<h1>Hello Bootstrap</h1>

<p>This is inside a fixed-width container.</p>

</div>

2. .container-fluid : Always spans the entire width of the screen.

Ex:

<h1>Full Width</h1>

<p>This container is always 100% wide.</p>

</div>

3. Responsive Containers : These are full-width until the specified breakpoint.

Ex:

<div class="container-sm">Small breakpoint</div>

<div class="container-md">Medium breakpoint</div>

<div class="container-lg">Large breakpoint</div>

<div class="container-xl">Extra large breakpoint</div>

<div class="container-xxl">Extra extra large breakpoint</div>

-------------------------------------------------------------------------------

Program 1: Fixed-width .container

<!DOCTYPE html>

<head>

<title>Bootstrap Container Example</title>

</head>

<body>

<h1 class="text-primary">Welcome to Bootstrap</h1>

<p>This content is inside a Bootstrap container.</p>

<button class="btn btn-success">Click Me</button>

</div>

</body>

</html>

----------------------------------------

Program 2 : Full-width .container-fluid

<!DOCTYPE html>

<head>

<title>Bootstrap Container Example</title>

</head>

<body>

<h2>Container Fluid</h2>

<p>This container takes the full width of the screen.</p>

</div>

</body>

</html>

-----------------------------

Program 3: Responsive containers

<!DOCTYPE html>

<head>

<title>Responsive Container</title>

<style>

body {

margin: 0;

font-family: Arial, sans-serif;

background: #f4f4f4;

}

.container {

width: 90%;

max-width: 1200px;

margin: 0 auto;

padding: 20px;

background: white;

}

.box {

background: #4CAF50;

color: white;

padding: 20px;

text-align: center;

margin-top: 20px;

border-radius: 8px;

}

@media (max-width: 768px) {

.container {

width: 95%;

padding: 15px;

}

</style>

</head>

<body>

<h1>Responsive Container</h1>

This container adjusts based on screen size.

</div>

</body>

</html>

-------------------------------------

Bootstrap 5 Grid System:

-------------------------------

* Bootstrap's grid system is built with flexbox and allows up to 12 columns across the page.

* If you do not want to use all 12 columns individually, you can group the columns together to create wider columns:

span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1

span 4 span 4 span 4

span 4 span 8

span 6 span 6

span 12

* The grid system is responsive, and the columns will re-arrange automatically depending on the screen size.

* Make sure that the sum adds up to 12 or fewer (it is not required that you use all 12 available columns).

Grid Classes:-

The Bootstrap 5 grid system has six classes:

.col- (extra small devices - screen width less than 576px)

.col-sm- (small devices - screen width equal to or greater than 576px)

.col-md- (medium devices - screen width equal to or greater than 768px)

.col-lg- (large devices - screen width equal to or greater than 992px)

.col-xl- (xlarge devices - screen width equal to or greater than 1200px)

.col-xxl- (xxlarge devices - screen width equal to or greater than 1400px)

Ex:

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

</head>

<body>

<h1>Three equal width columns</h1>

<p>Note: Try to add a new div with class="col" inside the row class - this will create four equal-width columns.</p>

</div>

</body>

</html>

----------------------------------------------

Ex2:

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

</head>

<body>

<h1>Responsive Columns</h1>

<p>Resize the browser window to see the effect.</p>

<p>The columns will automatically stack on top of each other when the screen is less than 576px wide.</p>

</div>

</body>

</html>

------------------------------------------------

Color

-------

The classes for text colors are: .text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-body (default body color/often black) and .text-light

Ex:

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

</head>

<body>

<div class="container mt-3"> mt-3 - padding top

<h2>Colors</h2>

<p class="text-muted">This text is muted.</p>

<p class="text-primary">This text is important.</p>

<p class="text-success">This text indicates success.</p>

<p class="text-info">This text represents some information.</p>

<p class="text-warning">This text represents a warning.</p>

<p class="text-danger">This text represents danger.</p>

<p class="text-secondary">Secondary text.</p>

<p class="text-body">Default body color (often black).</p>

<p class="text-light">This text is light grey (on white background).</p>

<p class="text-white">This text is white (on white background).</p>

</div>

</body>

</html>

-----------------------------------------------------------------------------------

Button

--------

1. Button class:-

---------------

Basic Syntax: <button class="btn btn-primary">Primary Button</button>

Class Description

-------------------------------

.btn - Base button class (required)

.btn-primary - Blue primary button

.btn-secondary - Gray secondary button

.btn-success - Green success button

.btn-danger -Red danger button

.btn-warning -Yellow warning button

.btn-info -Light blue info button

.btn-light -Light-colored button

.btn-dark -Dark-colored button

.btn-link -Button styled as a hyperlink

.btn-lg - Large Button

.btn-sm - Small Button

.btn-outline-primary - Outline Primary

.btn-outline-success - Outline Success

.btn-outline-danger - Outline Danger

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

</head>

<body>

<h2>Button Styles</h2>

<a href="#" class="btn btn-success">Link Button</a>

<button type="button" class="btn">Basic</button>

<button type="button" class="btn btn-primary">Primary</button>

<button type="button" class="btn btn-secondary">Secondary</button>

<button type="button" class="btn btn-success">Success</button>

<button type="button" class="btn btn-warning">Warning</button>

<button type="button" class="btn btn-danger">Danger</button>

<button type="button" class="btn btn-light">Light</button>

<button class="btn btn-primary btn-lg">Large Button</button>

<button class="btn btn-primary">Default Button</button>

<button class="btn btn-primary btn-sm">Small Button</button>

<button class="btn btn-outline-primary">Outline Primary</button>

<button class="btn btn-outline-success">Outline Success</button>

<button class="btn btn-outline-danger">Outline Danger</button>

</div>

</body>

</html>

-------------------------------------

Button group: Bootstrap 5 allows you to group a series of buttons together (on a single line) in a button group:

-----------------

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

</head>

<body>

<button type="button" class="btn btn-primary">Apple</button>

<button type="button" class="btn btn-primary">Samsung</button>

</div>

</body>

</html>

-------------------------------

dropdown

------------

*The .dropdown class is used to indicate a dropdown menu.

*Use the .dropdown-menu class to actually build the dropdown menu.

*To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and data-toggle="dropdown"

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

</head>

<body>

Dropdown button

</button>

</ul>

</div>

</body>

</html>

------------------

Multiple drodown

--------------------

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

</head>

<body>

<button type="button" class="btn btn-primary">Apple</button>

<button type="button" class="btn btn-primary">Samsung</button>

<li><a class="dropdown-item" href="#">Tablet</a></li>

<li><a class="dropdown-item" href="#">Smartphone</a></li>

</ul>

</div>

</body>

</html>

---------------------------------

spinners:

-----------

-To create a spinner/loader, use the .spinner-border class

Class Description

-------------------------------

spinner-border - Circular rotating border spinner

spinner-grow - Growing/fading spinner

spinner-border-sm - Small border spinner

spinner-grow-sm - Small growing spinner

text-primary, text-success, etc. - Change spinner color

d-none - Hide the spinner

Ex:

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap Example</title>

</head>

<body>

</div>

</body>

</html>

-----------------

spinner buttons:

-----------------

You can also add spinners to a button, with or without text:

Ex:

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap Example</title>

</head>

<body>

</button>

</button>

</button>

</button>

</div>

</body>

</html>

--------------------------------------------

Bootstrap 5 Pagination:-

-If you have a web site with lots of pages, you may wish to add some sort of pagination to each page.

Ex:

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

</head>

<body>

<li class="page-item"><a class="page-link" href="#">Previous</a></li>

</ul>

</div>

</body>

</html>

----------------------------------

Nav bar:

---------

-if you want to create a simple horizontal menu, add the .nav

1. nav-tabs - navigation tabs

Ex: <ul class="nav nav-tabs">

2. nav-pills - active menu

Ex: <ul class="nav nav-pills">

3. nav-pills with drown

Ex: <li class="nav-item dropdown">

Ex:

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

</head>

<body>

</li>

<a class="nav-link" href="#">Inbox</a>

</li>

<a class="nav-link" href="#">Send Items</a>

</li>

<a class="nav-link disabled" href="#">Disabled</a>

</li>

</ul>

</div>

</body>

</html>

------------------------

Ex2: nav-pills with dropdrown

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

</head>

<body>

<a class="nav-link active" href="#">Active</a>

</li>

<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Dropdown</a>

</ul>

</li>

</li>

<a class="nav-link disabled" href="#">Disabled</a>

</li>

</ul>

</div>

</body>

</html>

----------------------------------------

Ex3: navbar with dropdown

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

</head>

<body>

</li>

<a class="nav-link" href="#">Aboutus</a>

</li>

<a class="nav-link" href="#">Message</a>

</li>

<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Dropdown</a>

<li><a class="dropdown-item" href="#">Another link</a></li>

<li><a class="dropdown-item" href="#">A third link</a></li>

</ul>

</li>

</ul>

</div>

</nav>

body content

</div>

</body>

</html>

-----------------------------------

Bootstrap 5 Carousel:

---------------------------

-The Carousel is a slideshow for cycling through elements:

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

</head>

<body>

</div>

</div>

</div>

</div>

</button>

</button>

</div>

</body>

</html>

--------------------------

Bootstrap Forms

-----------------------

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

</head>

<body>

<h2>Login form</h2>

<label for="email">Email:</label>

</div>

<label for="pwd">Password:</label>

</div>

<input class="form-check-input" type="checkbox" name="remember"> Remember me

</label>

</div>

<button type="submit" class="btn btn-primary">Submit</button>

</form>

</div>

</body>

</html>

-------------------------

Jahab

Friday, 7 August 2026

Bootstrap

No comments:

Post a Comment

R Basics

Report Abuse