Table of Contents

What is Atomic CSS?.................................................3

Tailwind CSS – A Utility First CSS Framework......................5
How to Set Up Tailwind CSS.......................................................6
Hands-on Demo....................................................................................7
Advantages of Tailwind CSS........................................................8
Where does Bootstrap fit into all of this?.......................................10
Installing Bootstrap.............................................................................11
What Difference Does Bootstrap Make?........................................12
How do I make headers that are bigger than the defaults?...................13
Are the text display size classes restricted to only header elements?......13
What is the difference between the class names, display-1 and display-4 ?
.......................................................................................... 14
How do I center and justify text with Bootstrap?..............................15
How do I move texts to left or right?............................................16
How do I make a bold, normal or italic text with Bootstrap 4?.............16
How can I style block quotes with Bootstrap?.................................17
How can I style the author of a quote differently in Bootstrap?............18
How do I remove the default padding, margin and style on an unordered
list?..................................................................................... 18
How do I create list items that are arranged side by side?...................18
What color options are available in Bootstrap?................................19
How do I display a colored text in Bootstrap?.................................20
How do I create Responsive Images in Bootstrap?...........................21
How do I create subtle rounded images in Bootstrap?.......................21
Can I create images with just one side having a round border?............22
Are there options for making images with a full circular background?...22
Can I manipulate the rounded edges bootstrap gives?........................22

1
 How do I align images to the right or left?.....................................24

Bootstrap Summary................................................25
1. How to Include Bootstrap...............................................25
A. Using CDN (Content Delivery Network).....................................25
B. Download and Host Locally............................................26
2. Bootstrap Grid System...................................................26
Example: Three Columns Layout...................................................26
Explanation:...................................................................................26
Responsive Columns......................................................................26
3. Bootstrap Components..................................................27
A. Buttons......................................................................................27
B. Navbar.......................................................................................27
C. Cards.........................................................................................28
D. Alerts.........................................................................................28
4. Bootstrap Utilities..........................................................28
Example: Utility Classes................................................................29

2
MODULE 4: RESPONSIVE DESIGN
WITH BOOTSTRAP AND TAILWIND
CSS
What is Atomic CSS?
Before jumping into Tailwind CSS, let's understand what Atomic CSS is. According to CSS
Tricks

"Atomic CSS is the approach to CSS architecture that favours small, single-purpose classes
with names based on visual function."

It's kinda like making classes that are supposed to achieve a single purpose. For example, let's
make a bg-blue class with the following CSS:

.bg-blue {
background-color: rgb(81, 191, 255);
}

Now if we add this class to a <h1> tag, it will get a background of blue with the colour being
rgb(81, 191, 255) as you can see in the code above.

And here's the HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="[Link]" />
</head>
<body>
<div><h1 class="bg-blue">Hello world!</h1></div>
</body>
</html>

So this HTML will result in something like this:

3
Now imagine writing such useful single-purpose CSS rules and keeping them all in a global
CSS file. I know it's a one-time investment but think of this – you can now use these single-
purpose helper classes from anywhere you want.

You just need your HTML file to consume that global CSS file, and that's it. You can now
also use combinations of these helper classes in a single HTML tag.

Let's see another example shall we?

Let's create a CSS file with the following rules:

bg-blue {
background-color: rgb(81, 191, 255);
}
.bg-green {
background-color: rgb(81, 255, 90);
}
.text-underline {
text-decoration: underline;
}
.text-center {
text-align: center;
}
.font-weight-400 {
font-weight: 400;
}

and then consume it in our HTML file as follows:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="[Link]" />
</head>
<body>

4
 <div><h1 class="bg-blue">Hello world 1</h1></div>
<div><h1 class="text-underline">Hello world 2</h1></div>
<div class="text-center">
<h1 class="bg-green font-weight-400 text-underline">Hello world 3</h1>
</div>
</body>
</html>

Well now this will generate the following result:

Points to note here:

 Combining multiple helper classes: Look how I have combined multiple helper
classes in line 14 in the <h1> tag, namely bg-green, font-weight-400 and text-
underline. It all took effect in my Hello world 3 text.

 Reusability of helper classes: In the above example look at how the text-underline
helper class is used multiple times in lines 12 and 14.

See how we were able to add different styles without even leaving the HTML page. Well,
you might say, "Hey we did have to write those helper or utility classes in the global CSS
file... what about that?" Well, I get it. That definitely was the initial investment we had to
make to start with.

And of course, who knows how many of these single-purpose helper or utility classes we
would have to make if we wanted to follow this Atomic CSS architecture.

And that's where Tailwind CSS comes in. The concept of Atomic CSS is not new but
Tailwind CSS takes it to another level.

Tailwind CSS – A Utility First CSS Framework

Tailwind CSS, as per their own website is a "utility-first CSS framework" which provides
several of these opinionated, single-purpose utility classes that you can use directly inside
your markup to design an element.

Some of the utility classes that I frequently use these days are:

 flex: Used to apply Flexbox to a <div>

5
  items-center: to apply the CSS property align-items: center; to a <div>

 rounded-full: to make an image circular, and so on

Seriously, it's not possible for me to list all of them because there are so many of these utility
classes. But the best part is, we do not have to write these utility classes ourselves and keep
them in any global CSS file. We directly get them from Tailwind.

You can get a list of all the utility classes Tailwind has to offer from the documentation page.
Also if you are working in VS Code, you can install an extension called Tailwind CSS
IntelliSense and it will give you auto-suggestions as you keep typing the utility classes, as
shown in the image below.

How to Set Up Tailwind CSS

There are multiple ways you can set up Tailwind CSS in your project, all of which are
mentioned in their documentation.

Tailwind CSS works smoothly with a plethora of frameworks like Next, React, Angular, and
more – and even our OG HTML.

For the below hands-on demo I am using Tailwind CSS with a Next application. To set up
a Next app with Tailwind CSS directly, use the following command:

With npx

npx create-next-app --example with-tailwindcss with-tailwindcss-app

or with yarn

yarn create next-app --example with-tailwindcss with-tailwindcss-app

Once the project has been set up, you can dive into the next step to create a basic card
component

Hands-on Demo
Let's build a card component in a Next project.

6
// [Link] file
// to be rendered in [Link]

import React from "react";

const Card = () => {

return (
<div className="relative w-96 m-3 cursor-pointer border-2 shadow-lg rounded-xl items-
center">
{/* Image */}
<div className="flex h-28 bg-blue-700 rounded-xl items-center justify-center">
<h1 className="absolute mx-auto text-center right text-2xl text-white">
Image goes here
</h1>
</div>

{/* Description */}

<div className="p-2 border-b-2">
<h6>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis
beatae nulla, atque et sunt ad voluptatum quidem impedit numquam quia?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis
beatae nulla, atque et sunt ad voluptatum quidem impedit numquam quia?
</h6>
</div>

{/* Tech stack used */}

<div className="flex flex-wrap items-center m-2">
<span className=" border border-blue-300 rounded-2xl px-2 my-1 mx-1">
#React
</span>
<span className=" border border-blue-300 rounded-2xl px-2 my-1 mx-1">
#Redux
</span>
<span className=" border border-blue-300 rounded-2xl px-2 my-1 mx-1">
#Javascript
</span>
</div>

{/* Links */}

<div className="flex flex-wrap items-center rounded-b-xl border-t-2 bg-white">
<button className="border rounded-2xl bg-blue-600 text-white shadow-sm p-1 px-2
m-2">

7
 Go to Project
</button>
<button className="border-2 border-blue-600 rounded-2xl text-blue-600 shadow-sm p-
1 px-2 m-2">
Github
</button>
</div>
</div>
);
};

export default Card;

This results in the following card that gets rendered in the UI:

Look how easily I am able to style the card component without even leaving the [Link] file.
No need to write any extra CSS files.

Using flex with a <div> applies display: flex; CSS rule to it. Want to add position: relative; to
a <div>? Just add relative in the className and you are done.

We can also add different modifiers like hover, active, focus and so on to conditionally
render utility classes. It is possible to apply complex CSS rules like this:

.some-class-name {
--tw-space-x-reverse: 0;
margin-right: calc(0.5rem * var(--tw-space-x-reverse));
margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}

by just mentioning space-x-2 in the <div> tag. Neat, isn't it?

And do we have to mention these styles explicitly anywhere in some sort of a global CSS
file? Absolutely not! Tailwind automagically does it for us. That's the beauty of Tailwind.

We are not done yet... there's a lot of other advantages. Let's look at them now.

Advantages of Tailwind CSS

Just-In-Time (JIT) mode provides lightning-fast build times

Prior to Tailwind v3, it used to purge through all the styles to remove any unused styles, so
that the production build remained as small as possible.

8
According to Tailwind, the production build used to be between 5-10 kB. But that's the story
in production. In a development environment, CSS might get really big especially if we use a
lot of personalized configuration.

With v3 and above, Tailwind released a new feature called the Just-in-Time compiler. The
JIT compiler avoids compiling all the CSS upfront and compiles only the CSS as and when
we need it.

This results in lightning-fast build times in all the environments. And as the styles are
generated as and when we need them, there is no need to purge unused styles. This means
that the CSS in all the environments will be the same. This helps us get rid of the fear of any
important CSS getting purged in production.

It's opinionated and flexible at the same time

Tailwind CSS is opinionated. It does specify some constraints when it comes to styling, and
if you ask me this is good as it helps us keep the design part to those who actually understand
it.

Just look at one of the utility classes to add a box-shadow to your <div> (source):

As you can see, there are only 8 variants of shadow that Tailwind provides. There are preset
values for vertical and horizontal offset, blur, spread, colour and opacity. That is why
Tailwind is opinionated.

It tries to give an opinion about what property values to choose from on almost all the styling
properties out there. And believe me, for most of the cases, these 8 variants (for box-shadow)
will be more than sufficient to come up with a great UI.
For example in the above hands-on example, I have used shadow-lg in the main parent <div>
to get that nice outer box-shadow.

Using the same variant of a particular utility class at different areas in the UI also ensures
uniformity across the whole application and results in a better UX.

But in case you need some really customised value for any particular style, you can get that
by adding a customized theme in the [Link]. For example to get a shadow-3xl
(Tailwind does not provide shadow-3xl out of the box) you can add the following lines in the
[Link] in [Link]:

[Link] = {
theme: {
extend: {
boxShadow: {
'3xl': '0 35px 60px -15px rgba(0, 0, 0, 0.3)',
}

9
 }
}
}

And now with the advent of JIT, you can also use an arbitrary value inside square brackets []
like the following:

<div class="shadow-[0_35px_60px_-15px_rgba(0,0,0,0.3)]">
// Rest of your code goes here
</div>

Using arbitrary values may be useful when you need a specific style at only a few places.
And in this case, creating a theme for it in the [Link] might seem unnecessary.

Where does Bootstrap fit into all of this?

The browser affected the display of the page without your intervention. Using frameworks
like Bootstrap can significantly alter the display of your webpages — with little or no
intervention from you.

So, it works like this:

Every webpage’s overall style is influenced by the browser’s default styles, styles from
frameworks such as Bootstrap and your own written CSS.

A quick look at the styles that influence the look of every webpage.

Don’t worry if you don’t get it now, I will explain with an example.

Assume I wrote a CSS library called, **cowbell**. **Cowbell** does only one thing. I
included the library, perhaps through a cdn link. It gave my page a background color that
looks “cowbell” like.

Somewhere within the **cowbell** library, I would have gone ahead to write this:

.cowbell { background-color: cowbell}

Note that all I have done is include a .cowbell class with an equivalent background-color.

For the records, there’s no color like “cowbell”.

When you include the cowbell library in your page, how do use it?

Simple.

10
You just add the class of .cowbell to any element you want to give a cowbell color.

Something like this:

<!--- this is my awesome HTML document --><body class="cowbell"> This is my awesome

site</body>

Since I have already defined the cowbell class within the library, you don’t have to concern
yourself with writing the functionality.

As in the example above, the addition of the cowbell class to body will give the entire
document a cowbell color.

Now you’ve used a CSS library!

Under the hood, this is the same way Bootstrap works. In the same manner, there exists a set
of Bootstrap CSS classes that have been styled within the library.

All you need to do is learn the class names and apply them to your html markup. They’ll do
what they are designed to do.

In the case of the **cowbell** library, the class name required is .cowbell.

What does it do? It gives the element a “cowbell” color.

How does it work? You just go ahead and add the class name, .cowbell to any element.

Likewise, the Bootstrap library has a giant CSS file with lots of utility classes, responsive
modules, and general CSS goodies.

Let’s begin to peel the layers off Bootstrap in the next section.

Installing Bootstrap
You can’t get Bootstrap to do anything if it is not installed or included within your webpage.

There are a couple ways to do this and more advanced users can explore the available
options.

For the sake of simplicity, I will be using a cdn.

Sorry about the jargon. A CDN is short for Content Delivery Network.

A simple way to describe what is CDN is to imagine placing an order for a pair of shorts
from a fictitious website called Anazon. Your order was received and successfully processed
by Anazon. Unfortunately, Anazon noticed you live in the Antartica — somewhere really far
from their main warehouse.

Bad news.

Fortunately, Anazon has a wide network of distributed warehouses all across the globe.
Amazing.

11
Now, Anazon decides which warehouse is closest to your house in Antartica, and delivers
your pair of shorts from that warehouse. Also, the next time you place an order, Anazon will
check the same warehouse and deliver your goods in under 24hours.

How sweet.

This is kinda how a Content Delivery Network works. A CDN is like a warehouse that hosts
common libraries like Bootstrap.

If you visit a website that has a link to a CDN resource, the Browser will load a cached
version of the library. This is a version ‘stored’ in your Browser’s memory. If it finds none, it
will make a request to fetch the requested resource.

Loading a resource from a CDN has the advantage of the resource being received faster. Like
those pair of shorts!

Below is the link to the Bootstrap CDN.

[Link]
integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzA
LeQsN6M" crossorigin="anonymous"

Include that in your page, and you are good to go.

For example, add this to any HTML markup:

<link rel="stylesheet"
href="[Link]
integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzA
LeQsN6M" crossorigin="anonymous">

What Difference Does Bootstrap Make?

In this section we will go on to set up a basic demo page with Bootstrap. For these demos, I
will be using [Link].

Adding Bootstrap v4 to a project is simple. Click the CSS pen setting, and include Bootstrap
from the options.

we are all set up for the demos that come in the following sections.

So, what difference does Bootstrap make?

The images show the results without Bootstrap (left), and with Bootstrap (right)

I have continued with the “Hello World” example we discussed earlier. Take a look at the
results above.

The difference is very subtle. From the images you can see that some of Bootstrap’s default
page styles have overridden those of the browser.

12
The font is now different, the spacing between each text block is altered, and the link has a
different style.

Bootstrap at work!

Now that I’m sure you understand how CSS libraries work in general, let’s learn some of the
basic Bootstrap Styles or class names that you should know.

How do I make headers that are bigger than the defaults?

Sometimes you need headers that are really big. For instance, at the top of a website.

Take a look at the basic example we set up earlier. There exists an h1 and h2 in their default
sizes. If for some reason you need these headers to be bigger, Bootstrap 4 has you covered.

Add the any of the classes, display-1 display-2 display-3 or display-4.

For example:

<h2 class="display-4"> The Bunnie Who Had No Ears </h2>

I have added the class display-4 to the h2 element. As seen below, it looks a lot bigger now.
Bigger than the h1 element!

he Bunny who had no ears” appears bigger than the h1 element. Thanks to the “display-4”
class name.

Are the text display size classes restricted to only header elements?
The display classes are not restricted to just header elements, h1 to h6. In fact, they can be
added to any element.

In the example below, I have gone added to add display-3 to one of the paragraph elements.

<p class="display-2"> But, wait... </p>

13
he display classes may be used on any text elements — not just header elements (h1 — h6)

What is the difference between the class names, display-1 and

display-4 ?
The difference comes from the resulting size of the elements. display-1 will yield bigger sizes
than display-4 . You may see the difference in the sizes in the image below:

14
Which produces bigger texts? “display-1” or “display-4” ?

How do I center and justify text with Bootstrap?

Pretty simple. Add the text-center class to the desired element to center the text block.

<p class="text-center">How is it that you have no ears </p>

15
How do I move texts to left or right?
As in the other text utility classes, add any of the classestext-left and text-right for the desired
effect.

How do I make a bold, normal or italic text with Bootstrap 4?

Adding the classes,.font-weight-bold,.font-weight-normal and
.font-italic will make the text bold, normal or italic. If you’re coming from Bootstrap 3, you’ll
notice that these class names are different.

Here’s an example:

<p class="font-weight-bold"> How sad, Mr Bunny </p><p class="font-italic">See him hop,

hop, hop about on legs so very strong.</p><strong class="font-weight-normal"> But ears, he
has none </strong>

16
font-weight-bold,font-weight-normal and font-italic in action.

Note that the example uses font-weight-normal on a strong tag. By default,

<strong><;/strong> should yield texts that are bold. This behaviour is “normalized” when you
add the font-weight-normal class.

Note that the class name to make an italic text does NOT say font-weight-italic BUT font-
italic

How can I style block quotes with Bootstrap?

Boostrap has the class name blockquote available for styling the block quote tag,
<blockquote> or any other text block such as the paragraph element.

For example:

<blockquote class="blockquote"> Men have ears. Men have Noses. Men have [Link]
do too. We are Bunnies</blockquote>

17
This will give the text, “Men have ears. Men have Noses. Men have [Link] do too. We
are Bunnies”, a unique Bootstrap style for quotes.

How can I style the author of a quote differently in Bootstrap?

It is pretty common to include an author after a quote. The same goes for citing the source of
any text block. To do this, use the blockquote-footer class like so:

<blockquote class="blockquote"> Men have ears. Men have Noses. Men have [Link]
do too. We are Bunnies <div class="blockquote-footer">Ohans Bunny </div></blockquote>

For this example, I have used blockquote-footer within a blockquote tag. This is not
compulsory. You can use the blockquote-footer class name on any text block such as the
paragraph element, p.

Below is the result of this:

The Bootstrap blockquote class names added to the quote and author.

How do I remove the default padding, margin and style on an

unordered list?
It seems that I always need to do this when I create any sort of html list. Again, this is
trivially simple with Bootstrap. Use the list-unstyled class name, like so:

<ul class="list-unstyled"> <li>Thank you</li> <li>Muchas Gracias</li> <li>Merci

The default view for the list has been altered. No dotted list style, and no padding.

How do I create list items that are arranged side by side?

Sometimes you may need your list items to be arranged horizontally,or side by side as
opposed to the default vertical view. Use the class name list-inline on the unordered list, and
list-inline-item on the list items.

For example:

<ul class="list-inline"> <li class="list-inline-item">Thank you</li> <li class="list-inline-

item">Muchas Gracias</li> <li class="list-inline-item">Merci</li></ul>

This will created list items that are aligned side by side, horizontally.

18
The list now appears side by side, horizontally — just as expected.

What color options are available in Bootstrap?

Colors are the visual language most people process before they even become aware of it.

In design and Bootstrap generally, colors may be applied to a wide range of elements. Texts,
backgrounds, borders, and more.

Ask a 5 year old to name colors and they are off with, “red, blue, green…”

There are well over 100 color names in CSS, which makes it difficult to represent all of these
with class names. It’d be weird to have class names, color-blue color-red, on and on for over
a 100 colors.

19
Hence, colors are treated a little differently in Bootstrap. There are certain keywords or
special color names that are mapped to certain colors.

For example, the keyword primary is often associated with a blue color. success with a green
color, and danger with a red color, and so on.

he[ Bootstrap]([Link] rel="noopener"

target="blank" title=") colors.

How do I display a colored text in Bootstrap?

To display a text in a certain color, you should use the .text-* class names. where ‘*’ can be
any of primary secondary success danger warning info light or dark.

For example:

<p class="text-primary">Hello World</p><p class="text-secondary">Hello World</p><p

class="text-success">Hello World</p><p class="text-danger">Hello World</p><p
class="text-warning">Hello World</p><p class="text-info">Hello World</p>&lt;p
class="text-light">Hello World</p><p class="text-dark">Hello World</p>

The code block above will yield the result shown below:

Varying text colors provided by Bootstrap

20
It is important to note that the applying the text-light class results in a text with a light color.
It is mostly appropriate that you apply this class to texts on a dark background.

For example, I have gone ahead to use the text-light class on a text within a blue background.
It displays nicely.

Use text-light on darker backgrounds. This way you’ll get nice results — readable texts.

How do I create Responsive Images in Bootstrap?

Everyone loves images. If you don’t, then you’re a part of the very few different ones. From
experience, you must know that styling images can get out of hand very quickly.

To create images that are responsive regardless of the device being used, add the class .img-
fluid to the image element.

For example:

In the bunny poem example, I have added the image of a cute kitten:

<img src="[Link]

By default, the image extents arent seen because of the size of the image. Add the .img-fluid
class for a fully responsive image.

<img src="[Link] cl
ass="img-fluid"/

How do I create subtle rounded images in Bootstrap?

Sometimes you want something different. So, Bootstrap allows for having images with subtle
rounded borders. Just add the class rounded like so:

<img src="[Link]
class="img-fluid rounded"/>

Note that the markup above has more than one class name applied to it. This is a good
example of how to use multiple class names on a single element.

Look closely at the result below. You’ll find the image having slightly round borders. Many
times I find this more aesthetically pleasing than having square edges.

The cute kitten has been given subtle rounded edges for aesthetics.

21
Can I create images with just one side having a round border?
In the previous example, the rounded corners were applied to all sides of the image. It is also
possible to have rounded borders on just one direction. For example, applying the class
rounded-top will create an image with only the top corners being rounded. .rounded-bottom
does the exact opposite.

Incase you were wondering, you can also use the rounded-left and rounded-right classes for
left and right borders respectively.

Are there options for making images with a full circular background?
Yeah. Bootstrap allows for making a circular image by using the class name, rounded-circle.

For example:

<img src="[Link]
class="img-fluid rounded-circle"/>

his will result in a cute rounded kitten.

Cute rounded kitten with a fully round border.

Can I manipulate the rounded edges bootstrap gives?

As much as possible, Bootstrap 4 tries not to take away your freedom. So yes, the rounded
edges Bootstrap gives can be tweaked with your own styles. Let me show you an example.

If for some reason you have styled an image to have rounded borders, you can remove the
rounded borders with Bootstrap by adding the rounded-0 class.

For example:
I have added a border radius of 50px to the cat image:

img { border-radius: 50px}

Here’s the result:

22
The cute kitten with a border radius of 50px.

That’s a weird shaped cat image. Let’s see what is happening under the hood.

In the html markup, we have this:

<img src="[Link]
class="img-fluid rounded-bottom"/>

As you can see from the markup, there’s already a rounded-bottom class applied to the
image. Thus, bootstrap will have full control over the bottom edges. The edges you add using
the border-radius property will affect only the top borders, or the borders you haven’t styled
using Bootstrap.

Does that make sense? I guess it does.

If you took away the rounded-bottom class or any other rounded class on the image, your
style will now take effect accross all sides of the border. See the result below:

23
The cute kitten now has all its sides obeying the CSS rule we just wrote.

In the example above, the rounded-bottom class has been removed from the markup, leaving
the borders to do your bidding.

Depending on your specific needs, you may take out all .rounded classes provided by
Bootstrap away from your markup and style the image yourself using the border-radius
property.

If you’d like some of the edges to retain the default Bootstrap behavior, you may leave the
specific rounded side class within your markup, such [Link]-top, while styling the
images using border-radius too.

How do I align images to the right or left?

Alignment is a vital part of design. Most times you’ll keep moving stuff around until it feels
right.

To align images to the left or right, use any of the classes, float-right or float-left.

For example:
24
<img src="[Link]
class="rounded-circle float-left"/>

ChatGPT said:

Absolutely! Let’s create a Word-ready detailed Bootstrap summary with explanations,

examples, and how it fits into your HTML/CSS workflow. I’ll make it structured for easy
copy-pasting.

Bootstrap Summary
Bootstrap is a popular front-end framework that helps you build responsive, mobile-first
websites quickly. It provides pre-designed CSS and JS components, so you don’t have to
write everything from scratch.

1. How to Include Bootstrap

You can include Bootstrap in two main ways:

A. Using CDN (Content Delivery Network)

Add these lines in your HTML <head>:

<!-- Bootstrap CSS -->

25
<link href="[Link]
rel="stylesheet">

<!-- Bootstrap JS Bundle (includes Popper) -->

<script
src="[Link]

B. Download and Host Locally

1. Go to [Link] → Download Bootstrap.

2. Link the CSS and JS files in your HTML:

<link rel="stylesheet" href="css/[Link]">

<script src="js/[Link]"></script>

2. Bootstrap Grid System

Bootstrap uses a 12-column responsive grid to create layouts.

Example: Three Columns Layout

<div class="container">
<div class="row">
<div class="col-4 bg-primary text-white">Column 1</div>
<div class="col-4 bg-success text-white">Column 2</div>
<div class="col-4 bg-danger text-white">Column 3</div>
</div>
</div>

Explanation:
 .container → Wraps your content.

 .row → Defines a row of columns.

 .col-4 → Each column takes 4 out of 12 columns (total 3 columns).

 Background colors and text colors are added for clarity.

Responsive Columns
Bootstrap has breakpoints for different devices:

 col-sm- → small devices ≥ 576px

26
  col-md- → medium devices ≥ 768px

 col-lg- → large devices ≥ 992px

 col-xl- → extra large devices ≥ 1200px

<div class="row">
<div class="col-sm-6 col-md-4 col-lg-3 bg-warning">Responsive Column</div>
</div>

3. Bootstrap Components
Bootstrap comes with prebuilt components:

A. Buttons
<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-success">Success Button</button>
<button class="btn btn-danger">Danger Button</button>

 .btn → Base button class

 .btn-primary / .btn-success / .btn-danger → Color variants

B. Navbar
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">MyWebsite</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-
target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" 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="#">Contact</a></li>
</ul>
</div>
</nav>

 .navbar → Creates a navigation bar

 .navbar-expand-lg → Makes it responsive

27
  .collapse and .navbar-toggler → Mobile menu toggle

C. Cards
<div class="card" style="width: 18rem;">
<img src="[Link]" class="card-img-top" alt="Image">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">This is some card content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>

 .card → Container for card

 .card-body → Text and buttons inside the card

 .card-title, .card-text → Typography classes

D. Alerts
<div class="alert alert-warning" role="alert">
This is a warning alert—check it out!
</div>

 .alert → Base class

 .alert-warning / .alert-success / .alert-danger → Variants

4. Bootstrap Utilities
Bootstrap provides utility classes for spacing, colors, text alignment, and more:

 Margin & Padding: m-3, mt-5, p-2, px-4

 Text alignment: text-center, text-start, text-end

 Colors: text-primary, bg-secondary

 Display: d-none, d-block, d-flex

28
Example: Utility Classes
<div class="text-center bg-light p-4 m-3">
Centered text with padding and margin
</div>

29