Bootstrap 5 Foundations

The Random Knowledge
Enthusiast
Bootstrap 5 Foundations
https://www.therke.com/
Written by Daniel Foreman, 2021
In partnership with CT e Learning
This book was written with the support of https://www.ctelearning.com
for all your career and technical education needs.
The eBook you’ve purchased will prepare you for the bootstrap
section of their courseware. Allowing you to rapidly gain industry
certifications.
Visit https://www.ctelearning.com/b5f / for a list of courses supported

by this eBook, as well as other training opportunities.
Enjoying working from home? Wish to continue remote working for the
duration and after the pandemic? Try the CT e Learning remote
professional freelancer course.
Dedication
To my love Diana, it is for you that I work hard daily.
To my father, who taught me knowledge is king.
To my mother, who put up with us both!

Preface
Welcome to the Bootstrap 5 Foundations book. This book is designed
to teach you how to develop fast, responsive mobile-first websites.
When I first started learning to develop websites,I took the long way. I
started with HTML5, learned CSS and leapt to JavaScript. I attempted
to work out all the media queries and responsive designs required to
make a modern website work across multiple devices.
I took a very simplistic “I should know everything” approach to

learning, which delayed my ability to produce an effective deployable
website for a long time. While this makes me a great teacher, and a
pedantic source of knowledge, it did not do what web developers are
supposed to do—make websites!
Luckily for you, Bootstrap means you don’t have to be an expert in

CSS to make great-looking websites. You only need a very basic CSS
knowledge and a good HTML5 knowledge.
Learning HTML5 is certainly not a step you should skip— the

elements’ names have real purpose with wide-ranging effects that go
beyond how a website simply looks, and into SEO, accessibility and
machine understanding of your site.
As long as you have a good solid understanding of HTML5, and a little

CSS knowledge, you will be able to achieve a great-looking website
with this book.
The Author
Hello, I’ve been an technical education writer for nearly a decade,
having produced many courses, videos, and more recently literature
and podcasts.
I’m a growing social media influencer, with the majority of my followers

on TikTok. Where I make unique informative and opinion driven
content for the platform along with some humour.
https://www.tiktok.com/@therke.com
I also write, host and run the podcast The RKE which you can find on
spotify.
https://open.spotify.com/show/4IfvnRht5hHrelGAddDQ9Z
Finally I write technical industry standard courses which are taught

worldwide in schools, colleges and universities. You can find these
sold through my business partner's website.
www.ctelearning.com
And professional training courses which are sold through:
https://webprofessionalsglobal.org/
An industry certification company of professional web developers.
These projects, associations and business connects are the result of

many years working for the industry and I’m excited to expand my
product into the eBook domain.
Table of Content
1. Bootstrap Foundations eBook
2. The Random Knowledge Enthusiast
3. Bootstrap 5 Foundations
4. https://www.therke.com/
5. In partnership with CTe Learning
6. Dedication
7. Preface
8. The Author
9. Table of Content
10. About the book
1. Why be a front-end web developer?
1. The money
2. The fame
3. The Power
2. What do I need?
3. Why Bootstrap 5?
4. Requirements
5. What is Bootstrap?
6. Bootstrap versions
7. Teaching bleeding edge technology
8. What’s new in Bootstrap 5?
11. Getting Started with Bootstrap 5
1. Example 1
2. Example 2
3. Example 3
4. Example 4
12. Bootstrap is a CSS class system
13. Typography
1. Headings Typography
1. Example 5
2. Example 6
3. Example 7
2. Heading classes
1. Example 8
3. A note about SEO
4. Secondary heading text
1. Example 9
2. Example 10
5. Display Headings
1. Example 11
2. Example 12
6. Creating Lead Text
1. Example 13
2. Example 14
7. Text Alignment
1. Example 15
8. Font Sizing
1. Example 16
2. Example 17
9. Text Styles and weight
1. Example 18
10. Text Line-height
1. Example 19
11. Text Transform
1. Example 20
12. Underline strikethrough and removal of underline.
1. Example 21
13. Lists
1. Example 22
14. Bootstrap Colours
1. Example 23
15. Borders
1. Example 24
2. Example 25
16. Margins
1. Example 26
2. Example 27
17. Padding
1. Example 28
2. Example 29
18. Bootstrap Buttons
1. Example 30
2. Example 31
19. Bootstrap Buttons with outlines
1. Example 32
2. Example 33
20. End of section activity
14. Responsive Layout
1. Bootstrap Containers
1. Example 34
2. Bootstrap containers with breakpoints
1. Example 35
3. Fluid Container
1. Example 36
4. Bootstrap Grid System
1. Example 37
2. Example 38
3. Example 39
5. Column breakpoints
1. Example 40
6. Column Sizing
1. Example 41
7. Column sizing and breakpoints
1. Example 42
8. Images
1. Example 43
9. Cards
1. Example 44
10. Gutters
1. Example 45
2. Example 46
3. Example 47
11. Nav
1. Example 48
12. Footer
1. Example 49
15. The next step in your career
About the book
This is not just any old eBook, it is a career building tool that will open
doorways for you.
The knowledge in this book can be traded up for a professional

associations international certification with The Web Professionals
Association.
This book will prepare you for the world of responsive mobile first web
design. Teaching the very latest (as of the date of publishing) version
of Bootstrap 5, which you will learn about soon.
You can download the support files for this book from.
www.therke.com
Why be a front-end web developer?
The money, the fame and the power! The understanding of all that is
web, and the ability to understand how the world's largest
interconnected network delivers information to its users worldwide.
The money
In an entry level position, the average UK salary starts at £28,000—

and if you wish to work in the states (as I do) from the comfort of your
own home, you could be earning anywhere from $58,000 to $76,929
annually. Freelancers can charge $67 an hour at the low end, and
hundreds at the high end.
The fame
How do most people discover celebrities, entrepreneurs and

influencers? The web! Knowing how to reach people through a great
website, integrate your social media and control your own narrative is
an important asset when creating an online presence. Companies are
often based on the personality and character they present.
The Power
Too many managers, entrepreneurs and business owners depend on

the internet to spread the word about their products and services but
have almost zero knowledge of it. As you rise through the ranks of
your company, or build a company of your own, you can approach
tasks with a developer’s mindset. You will be able to communicate on
an equal footing with your development team as well as understand
how they get things done and what they need to make your business
succeed. Never underestimate a manager with a technical
background. They make projects succeed.
What do I need?
While all examples are provided in this eBook you may wish to
download the project files at:
https://www.ctelearning.com/b5f
Please visit this location to download.
You will need your favourite IDE. I use these cross platform free tools.
https://code.visualstudio.com/
http://brackets.io/
https://atom.io/
For Chromebooks you can use the online IDE:
http://www.cloudcodepro.com/
For iPhone and iPad:
https://koderapp.com/
For Android:
https://play.google.com/store/apps/details?
id=com.aor.droidedit&hl=en_GB&gl=US
https://play.google.com/store/apps/details?
id=xyz.iridiumion.enlightened&hl=en&gl=US
For Kindle Fire Tablets:
https://www.amazon.com/AWD-IDE-Code-Editor-
WEB/dp/B00H5XSUKW
Why Bootstrap 5?
Bootstrap 5 is a mobile-first framework for building websites and

applications. Bootstrap was conceived by Mark Otto and Jacob
Thornton, who were working at Twitter in 2010. The project was
released in 2011 as open source. Since then Bootstrap has become a
highly popular framework due to its ease of use and ability to deliver
cross-platform compatibility between many browsers and devices.
Bootstrap has received over six hundred contributors to its codebase,

and has over 34,000 forks on GitHub.
Bootstrap is required learning if you are pursuing a career as a front-

end web developer, as it allows easy collaboration between team
members thanks to the universal layout tools, class names and
common library functions.
Bootstrap 5 has moved away from jQuery, which it was previously

heavily reliant on. Instead Bootstrap relies on JavaScript alone,
making it easier to learn than ever before.
Whether you plan to make templates for a living, or become a full

stack developer, understanding Bootstrap will go a long way in your
career.
Requirements
Bootstrap is a front-end mobile-first responsive framework because

you won’t have to create complicated classes of your own; you won’t
need advanced knowledge of CSS or JavaScript. However, it is
recommended that you have a good understanding of HTML5 before
you proceed.
This course will assume you are familiar with:
HTML5
HTML Elements
HTML Attributes
Event handlers
CSS3
Class selectors
Multiple class selectors .class1.class2 .class1 .class2,

etc.
ID selectors #
Wildcard selectors *
Element selectors div, p, body, etc.
Multiple Element selectors div h1, body h1, etc.
Basic CSS3 rules, color, background, etc.
A basic awareness of JavaScript
What JavaScript is
What JavaScript is used for
How to load Scripts into a page

What is Bootstrap?
Bootstrap is a free front-end development framework initially produced

by a developer at Twitter and has since gone on to become one of the
most popular mobile-first frameworks.
A framework is a tool that provides generic functionality between

projects. It features a consistent API and naming structure that allow
you to call upon and perform tasks rapidly, regardless of the project
you are working on. Anyone trained in a framework can modify and
manipulate existing projects with minimal training.
Bootstrap uses HTML5 as the means to create content, and Bootstrap

adds a large number of CSS classes that can be assigned to those
elements. In addition to this, JavaScript code has been provided to
deliver specific functionality.
Accessibility
Buttons
Carousels
Forms
Images
Modals
Navigation
Tables
Typography
These are just a few of the features.

Bootstrap versions
There are three major versions of Bootstrap in circulation: Bootstrap 3,

4 and 5. Versions 1 and 2 are no longer used in any meaningful way.
So we can ignore these. You can still find templates for 3, 4 and 5
however.
You should only use 3 if you really want to support old aging web
browsers like Internet Explorer 8 and 9. Some institutions like the
British NHS, which famously still uses Windows XP, do still use these
browsers. If you are doing a job for a client with older browsers who
isn’t willing to update, usage of Bootstrap 3 is best.
Bootstrap 4.6 is the current version of Bootstrap. It supports Internet

Explorer 10 and 11, but is being replaced with Bootstrap 5.0 in the
near future. The need for Internet Explorer 10 and 11 is rapidly
diminishing.
Teaching bleeding edge technology
Because it is important to prepare students for the very latest

technology and to give this course and its knowledge the longest
possible use, we will be teaching 5.0 Beta 2 of Bootstrap so that you
are fully prepared to use it when entering the job market. Employers
more often than not require the most up-to-date skills. What we are
describing is a process called future proofing, which means learning a
technology before or soon after it has been released to allow you to
react faster to an ever-evolving market.
What’s new in Bootstrap 5?
Bootstrap 5 is the latest version of the framework. Previous versions

of Bootstrap have used jQuery, a JavaScript library that is designed to
make JavaScript coding easier and faster. However its main drawback
is you can’t simply use pre-existing Vanilla JavaScript knowledge. You
have to learn it.
jQuery came about in 2006 at a time when browsers did not cooperate
very well with each other. jQuery allowed features to be transferable
between different platforms. Since then web standards and browser
supported features have moved closer together, so it is easier than
ever to use languages like CSS and JavaScript as they were intended.
Bootstrap 5 broke away from jQuery and stopped supporting Internet

Explorer 10 and 11, which has been replaced with Microsoft Edge. It is
designed with the latest version of web browsers.
Since the web has fully evolved past the need for jQuery, it has been
removed from the latest version of Bootstrap.
Getting Started with Bootstrap 5
To make use of Bootstrap 5 you need the following:
Knowledge of HTML5.
Knowledge of HTML Attributes.
Knowledge of classes.
An HTML editor.
A link to Bootstrap’s CSS file.
A link to the Bootstrap JavaScript file.
The minimum HTML5 HTML file.
You will need to know HTML5 and how to assign class attributes. An
understanding of HTML5 IDs is also useful. You will need to know how
to use a HTML editor and create a basic HTML5 page.
Let’s begin with the HTML5 page.
Example 1
<!doctype html>
< html lang="en">
< head >
< title >Minimal HTML5 page</ title >
</ head >
< body >
< h1 >Minimal HTML5 page</ h1 >
< p >This is the minimum code required to hit the HTML5
standards.</ p >
</ body >
</ html >
This is the minimum code we need for a page. Now we are going to
add Bootstrap to the mix.
The CSS link for Bootstrap is:
< link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-

beta3/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
Let's add this to our document.
Example 2
<!doctype html>
< html lang="en">
< head >
< title >Minimal Bootstrap 5 page</ title >
< link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-
beta3/dist/css/bootstrap.min.css" rel="stylesheet"
crossorigin="anonymous">
</ head >
< body >

< h1 >Minimal Bootstrap 5 page</ h1 >
standards.</ p >
</ body >
</ html >
Next we add the JavaScript library, the link for this:
< script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-

beta3/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></ script >
We add that to the end of our template, before the last </body>
element.
Example 3
<!doctype html>
< html lang="en">
< head >
< link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-
</ head >
< body >

standards.</ p >
< script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-
beta3/dist/js/bootstrap.bundle.min.js"
crossorigin="anonymous"></ script >
</ body >
</ html >
This is the minimum we need for a Bootstrap template. However, it is
good practice to set the viewport and charset of the document. By
doing this, we ensure full compatibility.
< meta charset="utf-8">

< meta name="viewport" content="width=device-width, initial-scale=1">
We add this after the <title> element.
Example 4
<!doctype html>
< html lang="en">
< head >
< meta name="viewport" content="width=device-width,
initial-scale=1">
</ head >
< body >
standards.</ p >
< script
</ body >
</ html >
Now that we have this template, we are ready to begin using

Bootstrap.
Bootstrap is a CSS class system
Bootstrap works by taking standard HTML elements and assigning
pre-written CSS classes to them. To use Bootstrap, you need to know
the class names. The basic class names, in alphabetical order are:
active
alert
align
badge
bg
blockquote
border
btn
card
carousel
clearfix
close
Col
container
custom
d
display
drop
embed
fade
fixed
float
font
form
has
initialism
input
invalid-feedback
is
justify-content
lead
list
mark
modal
nav
next
no
offset
order
page
position
progress
rounded
row
shadow
sr-only
stretched
success
tab
table
tooltip
visible
was-validated
You don’t have to remember all of these right now—classes will be

explored individually as we use them.
To use a class with an element you’ll need to use the code < div
class="border"> and insert the class name between the double
quotes. The border class adds a thin border around any element.
Typography
Websites are mostly about the written word, embedded image/ video
and layout. While some interactivity comes along for the ride that
tends to push the art into app development rather than website
development.
The typography section of this eBook will give you everything you
need to make beautiful written content.
You will learn:
Bootstrap Typography.
Styling Techniques.
Whitespace management.
A little SEO optimization.
Border control.
Colours and their meanings.
How to create and manage buttons and links.
Headings Typography
Bootstrap provides classes and styles for all standard HTML heading
levels 1 through 6. These are assigned to standard element selectors
within the Bootstrap framework. Bootstrap uses element selectors to
style the <h1> to <h6> elements.
When using headings, you must maintain the correct structure, and
you must only use a single h1 on a page. The h1 must mirror the
content of the title element.
If you call your page Hotel Destination America, then your first and
only <h1> element must announce the same name. This is because
SEO (search engine optimization) checks to see if they match, which
prevents web developers from misrepresenting the content of their
web page.
In the early days of the web it was possible for a developer selling
tyres to see a trend on the web for a famous singer or actor then write
a title like “You won’t believe what happened to” and then put their tyre
sales page up instead. It was a cheap and easy way to gain traffic to
the site and get some sales.
To make your site accessible to as many users as possible, you need

to ensure that heading structures are used in the correct way, which
means you can use as many <h2> headings after the first <h1> but
you may not jump to <h4> just because you like the style and look.
The way headings look serve a purpose. The user needs to
understand which heading belongs to which group.
Example 5
Google Chrome renders headings on Windows 10 that look like this.

Using the following standard code:
<!doctype html>
< html lang="en">
< head >
< title >Standard Heading's Chrome</ title >
initial-scale=1">
</ head >
< body >
< h1 >Heading Level 1</ h1 >
</ body >
</ html >
The above example does not use Bootstrap in any way. You will see
the browser's native rendering.
Example 6
When we load Bootstrap, which you can see on the right hand side,
Bootstrap automatically styles the h elements, so you don’t need to
use the classes.
As you can see, the Bootstrap headings have less spacing between
them, and a different font. Bootstrap uses a font stack that looks
similar on every major device including Windows, MacOS, iOS,
Android, and Linux.
<!doctype html>
< html lang="en">
< head >
initial-scale=1">
</ head >
< body >
< script
</ body >
</ html >
Example 7
This is an example of headings being properly formatted. We start

with a <h1> element that announces the name of the page, then we
have a series of <h> series elements that are in order. We never jump
from 2 to 4 or from 1 to 3. We always go in a leading structure.
<!doctype html>
< html lang="en">
< head >
< title >Heading structure</ title >
initial-scale=1">
beta3/dist/css/bootstrap.min.css" rel="stylesheet" >
</ head >
< body >
< h1 >Heading Structure</ h1 >
< h2 >Topic 1</ h2 >
< h3 >Topic 1.1</ h3 >
< h4 >Topic 1.1.1</ h4 >
< h4 >Topic 1.1.2</ h4 >
< h5 >Topic 1.1.2.1</ h5 >
< h6 >Topic 1.1.2.1.1</ h6 >
< h3 >Topic 1.2</ h3 >
< h4 >Topic 1.2.1</ h4 >
< h2 >Topic 2</ h2 >
< h3 >Topic 2.1</ h3 >
< h3 >Topic 2.2</ h3 >
< h2 >Topic 3</ h2 >
< h3 >Topic 3.1</ h3 >
< script
beta3/dist/js/bootstrap.bundle.min.js"></ script >
</ body >
</ html >
Heading classes
In addition to the default <h1> to <h6> elements being styled, we have

access to the same styles with the same names using class selectors
rather than element selectors. This allows the developer to fake
headings if they need to. In some applications this can be required,
especially when generating custom elements.
However, it is bad practice to do this normally, as the HTML5 standard

carries meaning when you use the H1 to H6 element structure.
Disabled users, bots, and automated systems often need the right
element to be used in the right situation.
While it is possible to use classes on non-heading elements, there

should be no need to do so in a properly ordered and robust HTML5
document.
Example 8
We created a document that uses both the H elements, and a
paragraph with the style applied. As you can see, there is no visual
difference between the two. To indicate the difference between them,
we’ve placed the fake in brackets afterward.
The class is simply applied using the standard class attribute.
<!doctype html>
< html lang="en">
< head >
initial-scale=1">
</ head >
< body >
< p class="h1">Heading Level 1 (fake)</ p >
< script
</ body >
</ html >
It is worth noting that the code used above should not be used. While
they are visually similar, creating a < p class="h1"> would not carry
the same meaning as using a true < h1 > element.
A note about SEO
SEO stands for Search Engine Optimization, and good SEO is the
difference between placing your site at the top of a search engine and
being buried hundreds of results in. If you do not appear on the top or
at least on the first page of a search result then you will receive less
web traffic, no matter how brilliant your site is.
SEO relies on trust. It is a common trick for less than honest

developers to write a website claiming to be one thing, and then
provide different content.
Say for example, a popular show is trending like The Mandalorian .

You could easily write a website with the title “Top 10 Mandalorian
scenes that will amaze you!” If a search engine finds it and says
“That’s popular, let's push this page up the search rankings,” you can
quickly gain a lot of traffic.
That happened a lot in the old days of the internet.
Today however, some basic checks on trust are performed. One of

these is that the website title must match the first <h1> found in the
document.
If your website title is “Top 10 Mandalorian scenes that will amaze

you!” and your <h1> says “Get out of debt with these 10 credit cards,”
then the search engine will not trust the site. To help ensure trust, the
<h1> must repeat what the website title states. If they don’t match,
your site is treated as suspicious and pushed down the search
rankings.
In addition to this, if you used a < p class="h1"> or a < span

class="h1> or anything that isn’t a <h1> element, then the bot
looking at your site for SEO will not find it. Not having a H1 match your
title is as bad as having mismatching titles and h1 elements.
Ensure that you use the <h1> element just once on your website, and
ensure that it has the same text as your title element.
Secondary heading text
Sometimes you will want to create secondary text in your headings to

provide extra information. To do this we have the .text-muted class. It
is best placed in <small> elements which will reduce the size of the
font in addition to changing the colour of the text.
< h2 >Top Tech Tips < small class="text-muted">for an amazing

tech career</ small ></ h2 >
Example 9
We use small because it does not change the meaning of the text in
any meaningful way, nothing is emphasised, and nothing is marked as
important. Splitting the styling can make the heading look more
striking, and separate information that the user needs to know as part
of the title. It is an attention grabber, and engages the reader's interest
by visually separating the information.
This is best used on secondary and lower headings <h2> to <h6> so

we don’t risk affecting the SEO of the <h1> element, which should
reflect the <title> element’s textual content.
When used, the <h2> element looks like this:
<!doctype html>
< html lang="en">
< head >
< title >Secondary headings</ title >
initial-scale=1">
</ head >
< body >
< h1 >Secondary headings</ h1 >
< h2 >Top Tech Tips < small class="text-muted">for an
amazing tech career</ small ></ h2 >
< p >Getting an amazing tech career will lead to much
happiness!</ p >
< script
</ body >
</ html >
Example 10
Another example of separated but related information would be the

pricing of a hotel room. In the example demonstrated below we can
see that the price of the room is made distinct from the rest of the
statement.
<!doctype html>
< html lang="en">
< head >
< title >Hotel Rooms</ title >
initial-scale=1">
</ head >
< body >
< h1 >Hotel Rooms</ h1 >
< h2 >Bay view room < small class="text-muted">£500 + vat</
small ></ h2 >
< p >Our amazing bay view room, gives views of the ships
coming in and our of the harbour all year long.</ p >
< script
</ body >
</ html >
Display Headings
Display headings are a means of grabbing the user’s attention with a

big display. While the standard <h1> to <h6> levels should be
maintained when organising a document, if you are providing a
heading that needs a heavier presentation on the page then the
.display-1 to .display-6 classes aid with this.
If you are promoting a message, a call to action, or other major feature

on your site, display headings are very useful.
However, display headings do not change the nature of the element or

the perceived importance of the heading level. Remember that
heading levels have a strict hierarchy, you should never jump heading
levels, and should always keep them organised. A single <h1> per
page, matching the <title> followed by your headings and
subheadings being present in levels 2 through to 6.
In addition to this, you should also ensure that people visually

understand what level heading you are using. Don’t make a level
heading 6 match the style of a display-1, because you are not relaying
the importance level of that heading.
A properly structured document improves SEO, readability and

machine understanding of your page.
Example 11
The following is an example of headings default next to display

headings. You will see a dramatic difference between the two.
Display headings follow the same sizing scale as normal headings.
The size denotes their level of importance, and it is essential that
readers are able to identify the importance of a section. It improves
readability and creates a robust document.
I would also recommend maintaining a single style. If your page is

filled with display headings and normal headings, then their
importance is not maintained. Their structure becomes visually messy.
<!doctype html>
< html lang="en">
< head >
< title >Display Headings</ title >
initial-scale=1">
</ head >
< body >
< h1 >Heading 1</ h1 >
< h1 class="display-1">Display Heading 1</ h1 >
</ body >
</ html >
Example 12
If you do decide to mix them, try to keep the layout consistent. For
example, below I’ve only used the display-1 and display-2 classes with
heading level 1 and heading level 2. After that, heading level 3 was
allowed to continue as standard.
This was done because there is a clear hierarchy with the headings,
plus the two promotional texts, what the page is, and which side of the
building the rooms are on are clearly presented. The <h3> elements
and secondary texts are then maintained as normal.
If a <h4> was to be used it should not use a display-4 after no display-

3 was used, because the heading structure will visually lose its
meaning.
<!doctype html>
< html lang="en">
< head >
initial-scale=1">
</ head >
< body >
< h1 class="display-1">Hotel Rooms</ h1 >
< p >View our amazing range of hotel rooms!</ p >
< h2 class="display-2">West wing</ h2 >

small ></ h3 >
< p >Our amazing bay view room, gives views of the ships
coming in and our of the harbour all year long.</ p >
< h3 >Magpie view room < small class="text-muted">£350 +
vat</ small ></ h3 >
< p >Our smaller magpie room, gives views of the migrating
magpies six months of the year.</ p >
< h2 class="display-2">East wing</ h2 >
< h3 >Mountain view room < small class="text-muted">£475 +
< p >Our mountain view room, allows you to spot wild life
with the included telescope.</ p >
< p >Our medium magpie room, gives views of the migrating
< script
</ body >
</ html >
Creating Lead Text
A lead paragraph is the opening paragraph of an article, essay, book

chapter, blog, or anything else written. It provides a lighter gray
visually distinctive text that grabs the reader's attention. It can be used
to tease information, or introduce or summarise text.
We use the lead class to assign the lead text to a paragraph.
It should only be used once per piece of writing, unless that writing is
divided by headings—for example, multiple chapters in an eBook.
Example 13
We have multiple paragraphs with leading texts, allowing readers to

drift between interesting pieces of information. Room pricing, room
names, locations in buildings and lead paragraphs further capture the
attention of readers.
The lead text is used directly after the heading level announcing the
topic. In this case a heading level <h3> appeared without a display
class. It was then followed by the lead paragraph.
<!doctype html>
< html lang="en">
< head >
initial-scale=1">
</ head >
< body >
< h1 class="display-1">Hotel Rooms</ h1 >
< p >View our amazing range of hotel rooms!</ p >
< h2 class="display-2">West wing</ h2 >
small ></ h3 >
< p class="lead">Our amazing bay view room, gives views of
the ships coming in and our of the harbour all year long.</ p
>
< p >Our harbour is one of the busiest in the world. View
the worlds fleet come and go about their business.</ p >
< p class="lead">Magpies have bold intelligence and
personality, they are known for having chatters whistles
thrills and warbles. Watch these amazing birds from the
comfort of your room.</ p >
< p >Our smaller magpie room, gives views of the migrating
< h2 class="display-2">East wing</ h2 >
< h3 >Mountain view room < small class="text-muted">£475 +
< p class="lead">View our stunning mountain side and the
famous goats that graze upon them!</ p >
< p >Our mountain view room, allows you to spot wild life
with the included telescope.</ p >
< p class="lead">Our medium magpie room, gives views of
the migrating magpies six months of the year.</ p >
< p >Magpies have bold intelligence and personality, they
are known for having chatters whistles thrills and warbles.
Watch these amazing birds from the comfort of your room.</ p >
< script
</ body >
</ html >
Example 14
Another example of leading text would be the famous novel The War
of the Worlds , w hich is out of copyright and thus free to use.
This book has one of the most famously quoted opening lines, which
we can highlight in the use of the lead class.
Leading this chapter with that famously quoted opening line helps to
draw the user in.
<!doctype html>
< html lang="en">
< head >
< title >War of the Worlds</ title >
initial-scale=1">
</ head >
< body >
< h1 class="display-1">War of the worlds</ h1 >
< p class="lead">No one would have believed in the last
years of the nineteenth century that this world was being
watched keenly and closely by intelligences greater than
man's and yet as mortal as his own.</ p >
< p >That as men busied themselves about their various
concerns they were scrutinised and studied, perhaps almost as
narrowly as a man with a microscope might scrutinise the
transient creatures that swarm and multiply in a drop of
water. With infinite complacency men went to and fro over
this globe about their little affairs, serene in their
assurance of their empire over matter. It is possible that
the infusoria under the microscope do the same. No one gave a
thought to the older worlds of space as sources of human
danger, or thought of them only to dismiss the idea of life
upon them as impossible or improbable. It is curious to
recall some of the mental habits of those departed days. At
most terrestrial men fancied there might be other men upon
Mars, perhaps inferior to themselves and ready to welcome a
missionary enterprise. Yet across the gulf of space, minds
that are to our minds as ours are to those of the beasts that
perish, intellects vast and cool and unsympathetic, regarded
this earth with envious eyes, and slowly and surely drew
their plans against us. And early in the twentieth century
came the great disillusionment.</ p >
< p >The planet Mars, I scarcely need remind the reader,
revolves about the sun at a mean distance of 140,000,000
miles, and the light and heat it receives from the sun is
barely half of that received by this world. It must be, if
the nebular hypothesis has any truth, older than our world;
and long before this earth ceased to be molten, life upon its
surface must have begun its course. The fact that it is
scarcely one seventh of the volume of the earth must have
accelerated its cooling to the temperature at which life
could begin. It has air and water and all that is necessary
for the support of animated existence.</ p >
</ body >
</ html >
Text Alignment
To align text to left, centre or right gives you the option of visually
styling or aligning your text for formatting and layout reasons. When
using a word processor we have the Align Left, Center and Right Align
options. Bootstrap refers to them a little differently.
Start Align
End Align
Center Align
They are assigned using the classes text-start, text-end and text-
center.
In most word processors there is also the option to fully justify the text.
The problem with the full justify method is that it creates an uneven
spacing between words. There are some users who find this difficult to
read, so the Bootstrap team decided to leave the option out.
Example 15
In this example we are aligning text using the text-center, text-start

and text-end classes. This paragraph will align to the center.
< p class="text-center">Ut eget erat ac felis lacinia

porta a id neque. Mauris sagittis efficitur orci non
interdum. Nulla id augue mauris. Mauris in semper mi,
tincidunt suscipit urna. Integer metus sapien, aliquet quis
sem vel, rutrum aliquam orci. Duis ornare finibus diam a
fermentum. Aenean interdum purus vel aliquam ullamcorper.
Quisque maximus semper libero et convallis. Morbi tristique
lobortis magna, vel varius quam gravida eu. Nunc pharetra leo
nisl, eu convallis sapien viverra quis. Praesent semper, nunc
in vehicula imperdiet, diam erat ullamcorper ipsum, facilisis
faucibus ligula ipsum ut lorem. Fusce sagittis maximus orci
in varius. Integer laoreet viverra tortor. Nulla iaculis
ipsum in nulla pretium accumsan. Suspendisse quis magna
auctor, sodales elit at, rutrum sem. Nullam sit amet orci
tincidunt, ullamcorper mi eget, bibendum massa.</ p >
This paragraph will be aligned to the left like normal, so unless you
have previously used a text alignment this will not change anything.
< p class="text-start">Lorem ipsum dolor sit amet,

consectetur adipiscing elit. Suspendisse dapibus lobortis
venenatis. Sed risus tortor, aliquet et odio et, auctor
elementum massa. Vivamus tristique libero sit amet placerat
posuere. Pellentesque a est scelerisque, aliquam est ut,
rhoncus odio. Curabitur sed maximus erat. Nam vestibulum non
tortor nec tristique. Nam fringilla rhoncus accumsan.
Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia curae; Aliquam congue, leo in
fermentum venenatis, lorem nibh tincidunt ipsum, ut euismod
turpis turpis varius odio. Nulla ullamcorper quis metus non
bibendum. In at turpis nec tortor dictum pharetra quis id
ante. Cras ut nisl sagittis, blandit est eu, tincidunt risus.
</ p >
Then we have the align to the right, which is text-end.
< p class="text-end">Integer quis dignissim leo. Nunc

tincidunt turpis leo, id hendrerit augue lacinia quis.
Maecenas egestas odio turpis, nec rhoncus dolor consectetur
eu. Curabitur ut rutrum tellus. In nisi diam, vestibulum eget
est ut, ultricies euismod ante. Aenean sit amet odio
pulvinar, ornare ante id, sagittis nisi. Phasellus luctus
nisi eu nibh ornare bibendum. Ut porttitor rutrum tortor non
pharetra. Nam eget ligula non urna cursus volutpat. Vivamus
in risus lacinia, fermentum mi molestie, dictum sem.
Suspendisse scelerisque maximus nisl, maximus ullamcorper
ante vulputate vel. Aenean id purus metus. Maecenas sed
mauris sagittis, pulvinar dolor interdum, laoreet ante.
Praesent fermentum commodo elit, vel ullamcorper tortor
sodales placerat. Curabitur ante mauris, elementum quis
mattis eget, suscipit et nisi. Integer vitae dolor
pellentesque, euismod lacus at, molestie ex.</ p >
When rendered, the aligned text looks like this.

When we combine it, we simply add it as a normal paragraph, as you
can see in the example below.
<!doctype html>
< html lang="en">
< head >
< title >Text Alignment</ title >
initial-scale=1">
beta3/dist/css/bootstrap.min.css" rel="stylesheet">
</ head >
< body class="p-2">
< h1 class="display-1">Text Alignment</ h1 >
< h2 >Start Aligned</ h2 >
< p class="text-start">Lorem ipsum dolor sit amet,
</ p >
< h2 >Center Aligned</ h2 >
< p class="text-center">Ut eget erat ac felis lacinia
< h2 >End Aligned</ h2 >
< p class="text-end">Integer quis dignissim leo. Nunc
< script
</ body >
</ html >
Font Sizing
We can change font sizes inside paragraphs, spans, strong, em, and
other text elements that convey a special meaning, or simply display
text. They can also be used to add a more dramatic appearance to a
piece of text.
If you wish to make a stronger point, you can combine it with the
strong element to embolden and make text stand out. This is good for
warnings and important information.
As with heading levels 1 to 6, we have six levels of text.
We access them using the fs-1, fs-2, fs-3, fs-4, fs-5 and fs-6 classes.
The fs-6 class is the base font size—as you decrease the value, the
text becomes larger.
Example 16
Here we have an example of the sizes of text you have available.
< h1 class="display-1">Font Sizing</ h1 >

<p class="fs-1">Font Size 1</ p >
When we render the page we have text that looks like this:
The entire source code looks like this.
<!doctype html>
< html lang="en">
< head >
< title >Font Sizing</ title >
initial-scale=1">
</ head >
< body class="p-2">
< h1 class="display-1">Font Sizing</ h1 >
< p class="fs-1">Font Size 1</ p >
< script
</ body >
</ html >
Example 17
A usage of larger fonts is to enhance messages, whether marketing or

informational. By adding a weight of presence on the page, you can
aid the observation and digestion of information. When combined with
elements that have meaning—such as the strong element which
exists to highlight important information—using a larger font provides
both meaning in HTML content and an additional extra visual element
to the text.
< h1 >Sizing and importance</ h1 >

< p >Have fun in our pool, but ensure you < strong
class="fs-5">never run beside the pool</ strong > this action
< strong class="fs-4 text-danger">may result in death!</
strong ></ p >
When rendered, the result looks like this.
In addition to the sizing, we also added a colour factor to enhance the

second part of the warning.
<!doctype html>
< html lang="en">
< head >
< title >Sizing and importance</ title >
initial-scale=1">
</ head >
< body class="p-2">
< h1 >Sizing and importance</ h1 >
< p >Have fun in our pool, but ensure you < strong
class="fs-5">never run beside the pool</ strong > this action
< strong class="fs-4 text-danger">may result in death!</
strong ></ p >
< script
</ body >
</ html >
Text Styles and weight
Bootstrap offers several classes that style text differently.
fw-bold
fw-bolder
fw-normal
fw-light
fw-lighter
fst-italic
fst-normal
The fw stands for font weight and refers to the thickness or thinness of
a font. The fst stands for font style.
When rendered, each class looks like this:

The font weight should never be used on its own. It should be used
with other elements such as Strong, em, and other elements that
convey a meaning. Ideally we should stick to one weight when
conveying important information unless one part of the information is
more important than another. As there is no way of distinguishing
between the level of importance in HTML, we can visually represent
that using a thicker, bolder, and larger font.
For sales and marketing, you can style the text to break up the page
to make it more visually interesting and help hold attention. However,
these practices are purely ornamental, and parts of your community
who rely on accessibility tools will not find any inferred meaning
through the use of these styles.
Example 18
The following is an example of the fonts being used.
< h1 class="display-1">Text Styles</ h1 >

< h2 >Bold</ h2 >
< p class="fw-bold">The light gray box, lay in front of
the fox.</ p >
< h2 >Bolder</ h2 >
< p class="fw-bolder">The light gray box, lay in front of
the fox.</ p >
< h2 >Normal</ h2 >
< p class="fw-normal">The light gray box, lay in front of
the fox.</ p >
< h2 >Light</ h2 >
< p class="fw-light">The light gray box, lay in front of
the fox.</ p >
< h2 >Lighter</ h2 >
< p class="fw-lighter">The light gray box, lay in front of
the fox.</ p >
< h2 >Italic</ h2 >
< p class="fst-italic">The light gray box, lay in front of
the fox.</ p >
< h2 >Normal font style</ h2 >
< p class="fst-normal">The light gray box, lay in front of
the fox.</ p >
The code above demonstrates each of the font weights and styles that
can be used. You should not use italics on its own because this is
included with the EM element. It may confuse users if you style text as
italics, so please avoid doing this.
<!doctype html>
< html lang="en">
< head >
< title >Text Styles</ title >
initial-scale=1">
</ head >
< body class="p-2">
< h1 class="display-1">Text Styles</ h1 >
< h2 >Bold</ h2 >
< p class="fw-bold">The light gray box, lay in front of
the fox.</ p >
< h2 >Bolder</ h2 >
< p class="fw-bolder">The light gray box, lay in front of
the fox.</ p >
< h2 >Normal</ h2 >
< p class="fw-normal">The light gray box, lay in front of
the fox.</ p >
< h2 >Light</ h2 >
< p class="fw-light">The light gray box, lay in front of
the fox.</ p >
< h2 >Lighter</ h2 >
< p class="fw-lighter">The light gray box, lay in front of
the fox.</ p >
< h2 >Italic</ h2 >
< p class="fst-italic">The light gray box, lay in front of
the fox.</ p >
< h2 >Normal font style</ h2 >
< p class="fst-normal">The light gray box, lay in front of
the fox.</ p >
< script
</ body >
</ html >
The lighter fonts can be used as a stylistic choice, but may cause
users who have bad eye-sight to struggle when reading text. It’s best
to avoid it.
Text Line-height
Line height is also known as line spacing. It is a term used to describe

the vertical distance between two lines in a paragraph. Line spacing is
an important aspect to consider when designing your website. It can
make a vast difference to the understanding and readability of your
content.
Conventional wisdom is that a line spacing of around 1.3 times the

height of text to 1.5 times the height of text is ideal. There’s enough
space for most users to be able to clearly distinguish between two
lines of text.
Bootstrap 5 has three levels and three classes: line-height-base, line-

height-sm and line-height-lg.
Line-height-sm provides just 1.25 times the height of the text; we don’t
recommend using this.
Line-height-base is default for Bootstrap and gives a height of 1.5

times the height of text.
Meanwhile, if you need extra spacing you can use line-height-lg which
provides 2 times the height of the text.
In most situations a 2 times line height is excessive, remaining with

base, which is the default and recommended in most situations.
Example 19
<!doctype html>
< html lang="en">
< head >
< title >Text Line Height</ title >
initial-scale=1">
</ head >
< body class="p-2">
< h1 class="display-1">Text Line Height</ h1 >
< h2 >No height</ h2 >
< p class="lh-1">Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Suspendisse dapibus lobortis venenatis. Sed
risus tortor, aliquet et odio et, auctor elementum massa.
Vivamus tristique libero sit amet placerat posuere.
Pellentesque a est scelerisque, aliquam est ut, rhoncus odio.
Curabitur sed maximus erat. Nam vestibulum non tortor nec
tristique. Nam fringilla rhoncus accumsan. Vestibulum ante
ipsum primis in faucibus orci luctus et ultrices posuere
cubilia curae; Aliquam congue, leo in fermentum venenatis,
lorem nibh tincidunt ipsum, ut euismod turpis turpis varius
odio. Nulla ullamcorper quis metus non bibendum. In at turpis
nec tortor dictum pharetra quis id ante. Cras ut nisl
sagittis, blandit est eu, tincidunt risus.</ p >
< h2 >Small</ h2 >
< p class="lh-small">Ut eget erat ac felis lacinia porta a
id neque. Mauris sagittis efficitur orci non interdum. Nulla
id augue mauris. Mauris in semper mi, tincidunt suscipit
urna. Integer metus sapien, aliquet quis sem vel, rutrum
aliquam orci. Duis ornare finibus diam a fermentum. Aenean
interdum purus vel aliquam ullamcorper. Quisque maximus
semper libero et convallis. Morbi tristique lobortis magna,
vel varius quam gravida eu. Nunc pharetra leo nisl, eu
convallis sapien viverra quis. Praesent semper, nunc in
vehicula imperdiet, diam erat ullamcorper ipsum, facilisis
< h2 >Base</ h2 >
< p class="lh-base">Integer quis dignissim leo. Nunc
< h2 >Large</ h2 >
< p class="lh-large">Nunc vitae tortor maximus, accumsan
ante ac, auctor neque. Praesent in commodo enim. Ut id sapien
lobortis, porttitor sapien ut, blandit nulla. Sed pharetra
luctus faucibus. Nullam pellentesque fermentum neque vitae
mattis. Vivamus scelerisque congue nibh vitae vulputate. Nunc
accumsan, justo a porttitor tincidunt, nulla purus elementum
risus, a interdum sapien enim nec mi. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac
turpis egestas. Nullam non lectus luctus, ultrices libero
eget, mattis elit. Morbi laoreet metus vitae tempor aliquam.
Maecenas sit amet tellus elit. Cras commodo vel felis vel
vehicula. Nullam ultrices imperdiet vulputate. Donec
hendrerit egestas erat, et condimentum mauris ornare eget.
Pellentesque tristique, magna venenatis maximus sollicitudin,
odio quam tincidunt magna, vel aliquet ligula arcu a velit.</
p>
< script
</ body >
</ html >
Text Transform
The usage of capitalisation or lowercase draws many opinions from

many sources. The average English teacher will explain the rules of
grammar, while a marketer will talk about the importance of grabbing
someone's attention at all costs. Someone who works with users who
have cognitive issues, like learning disorders, will explain that using all
capital letters can affect their ability to read negatively.
This last point is probably the most important—we need to ensure that
anyone who visits a website can fully understand it. Keeping language
as simple as possible and using the standard rules of English,
combined with base font sizes and line heights, dramatically improves
the readability of your content.
Some even find that big bold capital headings distract from the content
they came to consume.
The classes you need to capitalize font are:
text-lowercase
text-uppercase
text-capitalise
You will notice in this book that all the cases are lower, because in
programming you need to use the right case or it will not work. This is
an example of using lowercase.
Example 20
The use of the classes is relatively simple, and we’ve applied it to the
three paragraphs in this example.
The text-lowercase will convert all text to lowercase.
The text-uppercase will convert all text to uppercase.
The text-capitalise will capitalise the first letter in a sentence.
<!doctype html>
< html lang="en">
< head >
< title >Text Transform</ title >
initial-scale=1">
</ head >
< body class="p-2">
< h1 class="display-1">Text Transform</ h1 >
< h2 class="text-lowercase">Lowercase</ h2 >
< p class="text-lowercase">Lorem ipsum dolor sit amet,
</ p >
< h2 class="text-uppercase">Uppercase</ h2 >
< p class="text-uppercase">Ut eget erat ac felis lacinia
< h2 class="text-capitalize">capitalize</ h2 >
< p class="text-capitalize">integer quis dignissim leo.
Nunc tincidunt turpis leo, id hendrerit augue lacinia quis.
< script
</ body >
</ html >
Underline strikethrough and removal of underline.
We can decorate text using an underline , a line straight through text

or remove the underline from a hyperlink to make it look like normal
text.
Some use underline instead of em when emphasizing text; however,

this isn’t a great idea because many users will confuse the text for a
hyperlink.
When you update a blog with new information due to a correction or a

previously printed piece of false information you can use the
strikethrough on the old text and provide an update to it. This practice
is used by people who wish to be honest with their user base. By
using a strikethrough you can demonstrate that they did previously
read some information in the blog or article, but has since been
stricken off and replaced with corrected information.
It is worth noting that the element STRIKE exists to do the same job,
and you should use this instead of using the Bootstrap style. The class
is useful for HTML 4.01 where strike didn’t exist.
We use the text decoration removal on hyperlinks to remove the

underline, so it looks like normal text. This practice is common when
creating buttons or other UI elements. However, because Bootstrap
has a btn class, there’s no reason to use this style unless you are
building something styled. Remember that most users recognise the
blue text with an underline as a hyperlink and we should maintain that
convention especially when it is buried in a large paragraph of text.
Part of accessibility is that information should not be identified by
colour alone, so it must be a blue link or coloured link with an
underline.
Example 21
We have an example below, underlined text, a strikethrough showing

updated information and an information strikeout.
The classes used are:
text-decoration-underline
text-decoration-line-through
text-decoration-none
<!doctype html>
< html lang= "en" >
< head >
< title > Underline strikethrough and removal of underline
</ title >
< meta charset= "utf-8" >
< meta name= "viewport" content= "width=device-width,
initial-scale=1" >
< link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-
beta3/dist/css/bootstrap.min.css" rel= "stylesheet" >
</ head >
< body class= "p-2" >
< h1 class= "display-1" > Underline strikethrough and
removal of underline </ h1 >
< h2 > A underlined piece of text. </ h2 >
< p > This is some underlined text < span class= "text-
decoration-underline" > as you can see </ span > it looks
like a hyperlink. </ p >
< h2 > A paragraph with updated information. </ h2 >
< p > The meeting will be held at < span class= "text-
decoration-line-through" > 10pm on 11th May </ span > 11pm on
10th May please be there early. </ p >
< h2 > A paragraph with updated information. </ h2 >
< p > The meeting will be held at < strike > 10pm on 11th
May </ strike > 11pm on 10th May please be there early. </ p >
< h2 > A hyperlink with underline removed </ h2 >
< p > To obtain the special offer click < a href=
"www.ctelearning.com" class= "text-decoration-none" > CT < sup
> e </ sup > Learning </ a > and gain 10% off! </ p >
< script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-
beta3/dist/js/bootstrap.bundle.min.js" ></ script >
</ body >
</ html >
You will notice no visual difference between the strike element and the
styling class.
Lists
Lists are used everyday for organising information. They are used in
surprising places.
Lists are used for two purposes.
The first is to organise data and display it to the user. For these you
just need to use the usual <ul> and <ol> elements. Bootstrap will
automatically style these without the need for classes.
The second is to organise elements within the page. Lists of links are
a common use for this. You can also list UI elements such as radio
buttons, checkboxes, and others.
We use the class list-unstyled with the <ul> element to remove the
bullet points you would otherwise have. This can be commonly used in
footers where you want to list your website or social media links.
Then we have the class list-inline, which are used when making a list
that appears on the same line as everything else. This is commonly
used in the nav bar at the top of the website.
The list-unstyled class gets applied to a single group of list items.
The list-inline gets applied to a single group of list items, then list-
inline-item gets applied to every <li> element within that group to
ensure they appear on the same line.
Example 22
The example below shows the classes in use. We have four sections
—unstyled list of social media links, unstyled list of checkboxes, an
inline list of menu links and a normal unstyled list.
<!doctype html>
< html lang="en">
< head >
< title >Lists</ title >
initial-scale=1">
</ head >
< body class="p-2">
< h1 class="display-1">Lists</ h1 >
< h2 >Unstyled List</ h2 >
< ul class="list-unstyled">
< li >< a href="#">Twitter</ a ></ li >
< li >< a href="#">LinkedIn</ a ></ li >
< li >< a href="#">Facebook</ a ></ li >
< li >< a href="#">YouTube</ a ></ li >
</ ul >
< h2 >Unstyled List Checkbox</ h2 >
< li >< label >Option 1</ label > < input
type="checkbox"></ li >
</ ul >
< h2 >Inline List</ h2 >
< ul class="list-inline">
< li class="list-inline-item">< a href="#">Home</ a ></
li >
< li class="list-inline-item">< a href="#">Services</
a ></ li >
< li class="list-inline-item">< a href="#">About</ a >
</ li >
< li class="list-inline-item">< a href="#">Help</ a ></
li >
</ ul >
< h2 >Normal</ h2 >
< ul >
< li >Eggs</ li >
< li >Milk</ li >
< li >Bread</ li >
< li >Cheese</ li >
</ ul >
< script
</ body ></ html >
Bootstrap Colours
Colours can be added to Bootstrap using CSS and writing your own
classes. Bootstrap comes with a series of predefined colours that
convey specific meanings. The reason for doing this is that a standard
is set and people can identify different information using colour.
We should never indicate information using colour alone, because

there are colourblind users out there who can not perceive parts of the
spectrum. However, we typically use these colours for everyone else
to convey a meaning.
The following colour names are part of Bootstrap.
Primary
Secondary
Success
Danger
Warning
Info
Dark
Light
The primary colour blue conveys its presence through colour and is
typically used on buttons and UI elements that perform an action.
Secondary colours are more muted and less obvious and are used on
secondary UI elements.
Success colours indicate that a positive action has taken place. For
example, a message stating that a mail has gone through, or an action
has taken place.
A warning colour indicates that something has happened that might

cause a problem. Maybe a mail didn’t go through properly, or a
warning message that a piece of data has not been entered into a
form correctly.
The danger colour is for critical errors, critical issues and critical
information such as health and safety notices. It can be as simple as a
mail failed to send a message. Or a notice warning that a certain
action will cause personal injury.
The info colour is designed to indicate a piece of information—for

example, a help button might use it. Or a notice can be displayed
explaining something.
Dark and Light are used to colour text and backgrounds for large
contrasts. They are typically used as background and foreground
colours.
Find an image indicating the colours.

Colours can be applied using the bg-* and text-* border-* class
groups. You can use any of the named colours as either a background
or foreground colour.
Example 23
The example below produces the graphic we see above. We assign

the colours to the bg-* class so the name indicated is the name of the
background, not the foreground colour.
<!doctype html>
< html lang="en">
< head >
< title >Bootstrap Colours</ title >
initial-scale=1">
</ head >
< body class="p-2">
< h1 class="display-1">Bootstrap Colours</ h1 >
< h2 >Standard Colours</ h2 >
< div class="row">
< div class="col-sm-4 bg-primary text-light">
< p >Primary</ p >
</ div >
< div class="col-sm-4 bg-secondary text-light">
< p >Secondary</ p >
</ div >
< div class="col-sm-4 bg-success text-light">
< p >Success</ p >
</ div >
</ div >
< div class="row">
< div class="col-sm-4 bg-danger text-light">
< p >Danger</ p >
</ div >
< div class="col-sm-4 bg-warning text-dark">
< p >Warning</ p >
</ div >
< div class="col-sm-4 bg-info text-dark">
< p >Info</ p >
</ div >
</ div >
< div class="row">
< div class="col-sm-6 bg-dark text-light">
< p >Dark</ p >
</ div >
< div class="col-sm-6 bg-light text-dark">
< p >Light</ p >
</ div >
</ div >
< script
</ body ></ html >
Borders
Every block element can have a border applied. The border is an

outline of a block element. It is set all around using the class border.
Border will simply place a solid black line around a block element.
Border can be applied to the top, bottom, start and end of a block.
Borders are typically applied to highlight an important piece of

information with a specific colour to help convey meaning—for
example, error messages, information messages, success messages
and others. The colour meaning applies to the meaning of the border
as well.
For this we use the classes:
border-top
border-bottom
border-start
border-end
The start and end refer to left and right, in that order.
Additionally we can apply colours to the border by adding the colour

names:
border-primary
border-secondary
border-success
border-warning
border-danger
border-dark
border-light
border-info
Example 24
The example below produces the image we see above. We use a

combination of border, border-start, border-end and border-bottom
classes. We combine it with the colours classes border-primary,
border-secondary, border-success, etc.
<!doctype html>
< html lang="en">
< head >
< title >Bootstrap border with colours</ title >
initial-scale=1">
</ head >
< body class="p-2">
< h1 >Bootstrap border with colours</ h1 >
< div class="border border-primary m-2">The primary colour
full border</ div >
< div class="border-start border-secondary m-2">The
secondary colour start border</ div >
< div class="border-end border-success m-2">The success
colour end border</ div >
< div class="border-bottom border-warning m-2">The warning
colour bottom border</ div >
< div class="border-top border-danger m-2">The danger
colour top border</ div >
< div class="border-start border-end border-info m-2">The
info colour start and end border</ div >
< div class="border-bottom border-top border-dark m-2">The
dark colour top and bottom border</ div >
< div class="border-end border-start border-top border-
bottom border-light m-2">The light colour top bottom start
end border</ div >
< script
</ body ></ html >
Example 25
In addition to creating border and assigning colours we can assign five

levels of thickness with:
border-1
border-2
border-3
border-4
border-5
Which you can see with the code below.
<!doctype html>
< html lang="en">
< head >
< title >Bootstrap border thickness</ title >
</ head >
< body class="p-2">
< h1 >Bootstrap border with colours</ h1 >
< div class="border border-1 m-2">Border with thickness 1</
</ body ></ html >
The end result looks like this:

Margins
Margins are the space around the border of a block element. The
bigger the margin, the more space is assigned.
Margins can be used to bring attention to something important or

separate blocks from one another.
Margins are called using the m-1, m-2, m-3, m-4, and m-5 classes. M-
1 is the smallest margin and m-5 is the largest.
Example 26
Below we see a simple margins set.
<!doctype html>
< html lang="en">
< head >
< title >Bootstrap margins</ title >
initial-scale=1">
beta3/dist/css/bootstrap.min.css">
</ head >
< body class="p-2">
< h1 >Bootstrap margins</ h1 >
< div class="border m-1">Border with thickness 1</ div >
< script
</ body ></ html >
Example 27
You can control the direction of the margin, assigning it to top, bottom,
start and end as you do with borders.
The margins below are set using the classes:
m-*
ms-*
me-*
my-*
mx-*
mt-*
mb-*
They take sizing 1 to 5 as the previous set did.
The m-* class sets the complete margin border, the ms-* sets the left
margin, me-* sets the right, mt-* sets top, mb-* sets bottom, mx-* sets
both start and end at the same time while my-* sets the top and
bottom at the same time.
<!doctype html>
< html lang="en">
< head >
< title >Button Groups</ title >
initial-scale=1">
</ head >
< body class="p-2">
< h1 class="display-1">Button Groups</ h1 >
< div class="btn-group" role="group" aria-label="Basic
example">
< button type="button" class="btn btn-primary">Left</
button >
< button type="button" class="btn btn-
success">Middle</ button >
< button type="button" class="btn btn-warning">Right</
button >
</ div >
< script
</ body ></ html >
Padding
Padding is the space between the border and the text, image, or of a
block element.
Padding moves text and other elements like blocks, images, video,
etc., away from the border of an element, even if the border is not
visible. It stops text from being too close to border walls.
Margins are called using the p-1, p-2, p-3, p-4, and p-5 classes. The
p-1 is the smallest margin and p-5 is the largest.
Example 28
Below we see a simple padding set.
<!doctype html>
< html lang="en">
< head >
< title >Bootstrap Padding</ title >
< meta name="viewport" content="width=device-width, initial-
scale=1">
integrity="sha384-
eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6"
</ head >
< body class="p-2">
< h1 >Bootstrap Padding</ h1 >
< div class="border p-1">Padding 1</ div >
beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-
JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"
</ body ></ html >
Example 29
You can control the direction of the padding, assigning it to top,

bottom, start and end as you do with margins.
The margins below are set using the classes:
m-*
ms-*
me-*
my-*
mx-*
mt-*
mb-*
They take sizing 1 to 5 as the previous set did.
The p-* class sets the complete padding border, the ps-* sets the left
padding, pe-* sets the padding right, pt-* sets padding top, pb-* sets
bottom, px-* sets both start and end at the same time while mpy-* sets
the top and bottom at the same time.
<!doctype html>
< html lang="en">
< head >
< title >Bootstrap padding direction</ title >
initial-scale=1">
</ head >
< body class="p-2">
< h1 >Bootstrap padding</ h1 >
< div class="border p-5">Padding all</ div >
< div class="border pt-5">Padding top</ div >
< div class="border pb-5">Padding bottom</ div >
< div class="border ps-5">Padding start</ div >
< div class="border pe-5">Padding end</ div >
< div class="border px-5">Padding X</ div >
< div class="border py-5">Padding Y</ div >
< script
</ body ></ html >
Bootstrap Buttons
Buttons are a very common UI element of Bootstrap, and their style

can be used on hyperlinks, forms, dialog boxes and more.
Buttons can be created from multiple elements, including <a> <input>

and <button>. Even <div> could be used, though it should only be
used where the user is required to interact with that part of the
website. Buttons handle colour changes when the mouse moves over
them, and are visually set up so that the user knows that the text
indicates an action will be taken—for example, the accepting of terms
and conditions, the submission of an e-mail or a call to action where a
user should click on a link.
The button is initially set up with the btn class, then a colour is
assigned using the standard colour names.
Btn-primary
Btn-secondary
Btn-success
Btn-danger
Btn-warning
Btn-info
Btn-dark
Btn-light
The colour of the text inside the button is selected using the text-*
class, which accepts the same standard Bootstrap colour names.
In addition to this we have btn-link, which makes the button look like a
standard hyperlink—however, it is rarely used. The <a> element
performs this action with the same styling, though it is not a block
element.
Example 30
The code below generates the buttons described above.
We simply create a button element and assign a class with btn and
then btn-[colour].
<!doctype html>
< html lang="en">
< head >
< title >Buttons</ title >
initial-scale=1">
</ head >
< body class="p-2">
< h1 class="display-1">Buttons</ h1 >
< button type="button" class="btn btn-primary">Primary</
button >
secondary">Secondary</ button >
< button type="button" class="btn btn-success">Success</
button >
< button type="button" class="btn btn-danger">Danger</
button >
< button type="button" class="btn btn-warning">Warning</
button >
< button type="button" class="btn btn-info">Info</ button >
< button type="button" class="btn btn-light">Light</
button >
< button type="button" class="btn btn-dark">Dark</ button >
< button type="button" class="btn btn-link">Link</ button >
< script
</ body ></ html >
Example 31
We can group buttons together so that they form a united panel. This
is useful when we want controls or buttons presented as a choice
rather than individual options.
The buttons are placed in a single div that is given the class btn-
group, then the buttons are created as normal. Rather than being
separated from one another, they appear side by side.
<!doctype html>
< html lang="en">
< head >
< title >Button Groups</ title >
initial-scale=1">
</ head >
< body class="p-2">
< h1 class="display-1">Button Groups</ h1 >
example">
< button type="button" class="btn btn-primary">Left</
button >
< button type="button" class="btn btn-warning">Right</
button >
</ div >
< script
</ body ></ html >
Bootstrap Buttons with outlines
Buttons are a very common UI element of Bootstrap, and their style

can be used on hyperlinks, forms, dialog boxes and more. In addition
to normal buttons, you can create buttons with an outline style instead
of a solid fill. There’s no particular advantage to create outline buttons
beyond styling.
Outline buttons can be created from multiple elements, including <a>

<input> and <button>. Even <div> could be used, though it should
only be used where the user is required to interact with that part of the
website. Outline buttons handle colour changes when the mouse
moves over them, and are visually set up so that the user knows that
the text indicates an action will be taken—for example, the accepting
of terms and conditions, the submission of an e-mail or a call to action
where a user should click on a link.
The outline button is initially set up with the btn class, then a colour is
assigned using the standard colour names.
Btn-outline-primary
Btn-outline-secondary
Btn-outline-success
Btn-outline-danger
Btn-outline-warning
Btn-outline-info
Btn-outline-dark
Btn-outline-light
The colour of the text inside the button is the same as the outline of
the button. It can be changed independently but this would adjust the
meaning of the button, so it is better to leave it consistent. A success
border with a danger colour text, for example, would be very
confusing.
Example 32
The code below generates the buttons described above.
<!doctype html>
< html lang="en">
< head >
< title >Button Outlined</ title >
initial-scale=1">
</ head >
< body class="p-2">
< h1 class="display-1">Button Outlined</ h1 >
< button type="button" class="btn btn-outline-
primary">Primary</ button >
secondary">Secondary</ button >
success">Success</ button >
danger">Danger</ button >
warning">Warning</ button >
< button type="button" class="btn btn-outline-info">Info</
button >
light">Light</ button >
< button type="button" class="btn btn-outline-dark">Dark</
button >
< script
</ body ></ html >
Example 33
We can group buttons together so that they form a united panel. This
is useful when we want controls or buttons presented as a choice
rather than individual options.
The buttons are placed in a single div that is given the class btn-
group, then the buttons are created as normal. Rather than being
separate from one another, they appear side by side.
<!doctype html>
< html lang="en">
< head >
< title >Grouped Button Outlined</ title >
initial-scale=1">
</ head >
< body class="p-2">
< h1 class="display-1">Grouped Button Outlined</ h1 >
outlined example">
primary">Left</ button >
danger">Right</ button >
</ div >
< script
</ body ></ html >
End of section activity
You’ve learned everything you need to create a fully featured web

document, with heading styling, typography, colours, buttons and
more.
Why not try making your very first website now?
You have everything you need to create beautiful blog posts, eBooks,
articles, and more besides.
Imagine what you might use a website for and then sit down and write
the content part of that site.
Here’s some ideas to get you started:
A florist article listing a range of stock.

A blog post about your favourite topic.
A personal online CV.
A professional CV.
Create memoirs or additotal stories.
Responsive Layout
This part of the book is dedicated to bootstrap layout, and design.
Whitespace management, and everything it takes to create the block
portions of your website.
Bootstrap is a mobile first responsive framework, everything in this

section will allow you to create all the major components of a website.
The nav, main portion and footer. With additional focus on managing
cards, grids, columns, rows and more.
In this section you will learn:
Website Layouts
The Navigation Bar
The Footer
The Grid system.
Containers and fluid containers.
Rows.
Columns
Breakpoints.
Whitespace management.
Gutter control.
Bootstrap Containers
Bootstrap containers are the most basic layout tool available to the
framework. There are two types available, and their purpose is to
contain and separate parts of your website or application.
The first type of container, is referred to as the class container . it is

required when using the Bootstrap grid system, which we will explore
later. Containers are used to contain, pad, and align content.
The container class uses max-width breakpoints, a CSS rule that

triggers upon a specific width.
Example 34
To assign a div, main or section element a container class, we use

class=”container”.
The effect this class has is to centre content on standard desktop

browser views with a width over 540px.
The animation above shows a Browser Window being resized. The

container snaps to the following pixel widths.
540px
720px
960px
1140px
1320px
Essentially, these are the widths that the container snaps too.
Between snaps it centers the container to the browser viewport.
In addition to the container, we used border to add a visual outline to

the container.
<!doctype html>
< html lang="en">
< head >
< title >Bootstrap Container</ title >
beta3/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymou
</ head >
< body >
< h1 >Bootstrap Container</ h1 >
< p >The div below has container, and border classes attached.</
< div class="container border">100% wide until small breakpoint</
beta3/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></
</ body ></ html >
Bootstrap containers with breakpoints
In addition to the containers class we also have additional classes.
container-sm
container-md
container-lg
container-xl
container-xxl
Sm stands for small, md stands for medium, lg stands for large, xl

stands for extra large, and xxl stands for extra extra large.
The classes work in the same way as the normal container; however,
the way they snap to resolutions is different.
Small is the same as just using a container, and it snaps between

540px to 1320px.
Medium doesn’t start snapping until 720px.
Large snaps at 960px.
Extra Large snaps at 1140px.
Extra Extra Large snaps at 1320px.
The visualisation above demonstrates that the different breakpoints

trigger based on the assigned values sm, md, lg, xl, and xxl. The xxl
value snaps to a 100% width the soonest, whereas the sm value has
the most sizes before it simply snaps to 100% width.
Example 35
<!doctype html>
< html lang="en">
< head >
< title >Bootstrap Container with breakpoint</ title >
initial-scale=1">
</ head >
< body >
< h1 >Bootstrap Container with breakpoint</ h1 >
< p >The div below has container, and border classes
attached.</ p >
< div class="container border">100% wide until small
breakpoint</ div >
< div class="container-sm border">100% wide until small
breakpoint</ div >
< div class="container-md border">100% wide until medium
breakpoint</ div >
< div class="container-lg border">100% wide until large
breakpoint</ div >
< div class="container-xl border">100% wide until extra
large breakpoint</ div >
< div class="container-xxl border">100% wide until extra
extra large breakpoint</ div >
</ body ></ html >
Fluid Container
The standard container snaps to pre-set pixel widths based on the

size of the browser viewport.
The class container-fluid, however, adjusts to the browser viewport’s

size without snapping. Rather than centering the container and
adjusting the size at breakpoints, the container fluidly resizes to the
width of the body element.
Example 36
The container is always 100% the width of the browser viewport.
<!doctype html>
< html lang="en">
< head >
< title >Bootstrap Fluid Container</ title >
initial-scale=1">
</ head >
< body >
< h1 >Bootstrap Fluid Container</ h1 >
attached.</ p >
< div class="container border">100% wide until small
breakpoint</ div >
< div class="container-sm border">100% wide until small
breakpoint</ div >
< div class="container-md border">100% wide until medium
breakpoint</ div >
< div class="container-lg border">100% wide until large
breakpoint</ div >
< div class="container-xl border">100% wide until extra
large breakpoint</ div >
< div class="container-xxl border">100% wide until extra
extra large breakpoint</ div >
< div class="container-fluid border">< strong >100% wide
with no breakpoints</ strong ></ div >
</ body ></ html >
Bootstrap Grid System
The Bootstrap framework uses a grid system to create content

layouts. A grid system uses rows and columns just as a table would.
Unlike a table you have a system where you can create as many rows
as you like, but are limited to twelve columns.
Example 37
To create a row, we use the class row , and place it inside the class
container .
< div class="container">

< div class="row border">This is a row</ div >
</ div >
The row acts as a container for a row of content. If you wish to have
content that spans the width of the container, simply use a row, and
place your content within it.
<!doctype html>
< html lang="en">
< head >
< title >Bootstrap Container and Row</ title >
beta3/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymou
</ head >
< body >
< h1 >Bootstrap Container and Row</ h1 >
< p >The div below has container, and border classes attached.</
< span >This is the container. It controls the width of the elemen
span >
< div class="row border">This is a row, this is a layout tool for
elements within a container.</ div >
</ div >
beta3/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></
</ body ></ html >
When we run the code, it then looks like this:
A row will snap to the width of the container. If you use container-fluid
it will extend across the entire width of the document.
Example 38
If you wish to have several pieces of content side by side in the same
row, use the class col .
Col will divide a row up to twelve times.
Let's start with a simple two column split.
To do this we just create two divs, both with col assigned.
<!doctype html>
< html lang="en">
< head >
< title >Bootstrap Container and Row</ title >
initial-scale=1">
</ head >
< body >
< h1 >Bootstrap Container and Row</ h1 >
attached.</ p >
< h2 >This is the container</ h2 >
< div class="row border">
< h3 >This is the row</ h3 >
< div class="col border">< h4 >This is the first
column.</ h4 ></ div >
< div class="col border">< h4 >This is the second
column</ h4 ></ div >
</ div >
</ div >
</ body ></ html >
With this code we get the following image.
Example 39
We can divide the row up to twelve times, but you can not use the
class border to add a visual presence. If you do, the columns will not
fit all twelve.
Below is a visual demonstration of how each column reflows to fit your

mobile device. As the screen becomes too narrow, the elements flow
evenly onto new lines. Allowing your website to adjust accordingly. We
have added a little colour so you can track the movement of the
columns visually. Columns rearranging in this way is known as content
reflowing.
Column breakpoints
Columns will attempt to fit themselves as best as they can to the width
of your browser viewport. Breakpoints allow layout designers to adjust
columns for a mobile layout by defining at which point a column
switches to 100% viewport width. We’ve seen this with container
snapping too, where xxl will snap 100% width when below 1320px and
small snaps below 540px.
The same principle applies when using column breakpoints.
This image demonstrates a normal reflow where no breakpoints have

been set.
The following image demonstrates reflow, where the first six lines
have received breakpoints xxl, xl, lg, md, and sm.
As the columns resize, the first to break to 100% is xxl, followed in

order by xl, lg, md, and sm. The rest of the columns never leapt to
100%, but instead tried to divide the space between them evenly.
Example 40
To add a breakpoint to a column, simply use the class col-* where the
asterisk can be replaced with xxl, xl, lg, md and sm.
< div class="col-xxl">< h4 >Extra Extra Large</ h4 ></ div >

< div class="col-xl">< h4 >Extra Large</ h4 ></ div >
< div class="col-lg">< h4 >Large</ h4 ></ div >
< div class="col-md">< h4 >Medium</ h4 ></ div >
< div class="col-sm">< h4 >Small</ h4 ></ div >
Column Sizing
When we use the col class, Bootstrap will evenly distribute the space
between the columns. But we often want control over this spacing. To
do this we can use a number range between one and twelve.
Because the maximum number of columns you can have per row is
twelve, you can use that range of numbers.
To assign a width to a column, we use col-* where the asterisk can be

replaced with any value between one and twelve.
Example 41
The following example demonstrates multiple rows with different

column configurations.
<!doctype html>
< html lang="en">
< head >
< title >Bootstrap Column sizing</ title >
initial-scale=1">
</ head >
< body >
< h1 >Bootstrap Column sizing</ h1 >
attached.</ p >
< div class="row">
< h3 >2 Columns automatic</ h3 >
< div class="col">< div class="border">< h4
>Column</ h4 ></ div ></ div >
</ div >
< div class="row">
< h3 >2 Columns equal size</ h3 >
< div class="col-6">< div class="border">< h4
>Column width 6</ h4 ></ div ></ div >
</ div >
< div class="row">
< h3 >2 Columns uneven size</ h3 >
</ div >
< div class="row">
< h3 >3 Columns 6-4-2 sizing</ h3 >
</ div >
< div class="row">
</ div >
< div class="row">
< h3 >7 Columns 1-1-1-1-1-1-6 sizing</ h3 >
</ div >
</ div >
</ body ></ html >
When tested, we have the following result.
Rather than having rows of equal spacing, we now have rows with
different spacing configurations.
The first 2 Columns automatic and 2 Columns equal size achieve the
same result using two different methods.

< div class="col">< div class="border">< h4 >Column</ h4 ></
div ></ div >
< div class="col">< div class="border">< h4 >Column</ h4 ></
div ></ div >
The first uses the col class on it’s own. The columns then
automatically divide the space.

< div class="col-6">< div class="border">< h4 >Column width
6</ h4 ></ div ></ div >
6</ h4 ></ div ></ div >
Then we have col-6, which achieves the same result, but we manually
define the size of each of the columns.
The result is:
Meanwhile, we can adjust the two columns so we have one wide and
one short. We achieve this by setting column widths to ten and two.
Remember that the total must be twelve when doing this or you will
leave a space or go beyond the boundaries of the twelve columns.

10</ h4 ></ div ></ div >
2</ h4 ></ div ></ div >
The result looks like this:

Column 10 is much wider than column 2.
You can have as many columns as you like, up to the value of twelve.
However, at twelve there’s no point in assigning values because it will
have to divide equally to work. With eleven columns you can have one
set to two, and the rest set to one. With six columns you can have a
more varied range of sizes as long as they all calculate to twelve when
added together.
Here’s some three column examples that are very common when
developing with Bootstrap.
They use a 6-4-2, 2-6-4, and there is a 7 column configuration set to

1-1-1-1-1-1-6.
< div class="row">

</ div >
< div class="row">
</ div >
< div class="row">
</ div >
The results look like this:
Column sizing and breakpoints
It is best to use column sizing and breakpoints together. If you use

columns or column sizing on their own, the columns will divide the
browser viewport width up evenly. The problem with this is that you
can end up with some very messy mobile views.
You will notice that at minimum width the content flows outside boxes,
overlaps and generally creates an ugly mobile website.
If we add breakpoints to the setup, we end up with a much more

pleasant layout.
When the breakpoints are reached they automatically reflow to the full
width of the display, creating a stacked mobile layout.
We use the col-sm-*, col-md-*, col-lg-*, col-xl-*, col-xxl-* classes to set

the breakpoints and then set the width by replacing the asterisk with a
value between one and twelve.
The result is a website that uses these columns.
Example 42
<!doctype html>
< html lang="en">
< head >
< title >Bootstrap Column sizing</ title >
initial-scale=1">
</ head >
< body >
< h1 >Bootstrap Column sizing</ h1 >
attached.</ p >
< div class="row">
</ div >
< div class="row">
< div class="col-lg-6">< div class="border">< h4
</ div >
< div class="row">
< div class="col-xxl-10">< div class="border">< h4
< div class="col-md-2">< div class="border">< h4
</ div >
< div class="row">
</ div >
< div class="row">
</ div >
< div class="row">
< div class="col-xl-1">< div class="border">< h4
</ div >
</ div >
</ body ></ html >
By adding breakpoints through carefully observing if content goes

outside of their columns we create a truly responsive design that will
work on anything.
Images
Images are controlled and styled with the following classes.
w-100
w-75
w-50
w-25
img-fluid
img-thumbnail
float-start
float-end
mx-auto
The w series classes set the width of the image. They are percentage
based, so 100 is full width, 75 is three quarters or 75%, 50 is half or
50%, and 25 is one quarter or 25% width. They take their width from
the parent container, so if you place it in a row or column it will take
the percentage of the div element it is placed in.
The img-fluid class works in the same way as w-100—it simply scales
the image to 100% of the container width.
The img-thumbnail class provides a border around the image

indicating that it is a thumbnail of a larger image. This is often
combined with modals, which pop-up when the image is clicked and
show the full image.
The float-start class takes the image out of the normal flow. It will not
work inside a row or column class, only a container. The float-end
does the same except it aligns the image with the right side of the
screen.
The mx-auto sets automatic margins on the left and right of the image,
allowing you to centre it.
Example 43
Below we have code that shows the images in their various positions,
sizes and styles.
<!doctype html>
< html lang="en">
< head >
< title >Image sizing and alignment</ title >
initial-scale=1">
</ head >
< body class="p-2">
< h1 >Image sizing and alignment</ h1 >
< div class="container-fluid">
< div class="row m-2">
< img src="https://via.placeholder.com/1000x250?
text=Full+Width" class="w-100">
</ div >
text=Three+Quaters+Width" class="w-75">
</ div >
text=Half+Width" class="w-50">
</ div >
text=Quater+Width" class="w-25">
</ div >
text=Fluid+Image" class="img-fluid">
</ div >
text=Image+thumbnail" class="img-thumbnail w-50">
</ div >
text=Centered+Image" class="w-25 mx-auto">
</ div >
text=Float+Start" class="w-25 float-start">
text=Float+End" class="w-25 float-end">
</ div >
beta3/dist/js/bootstrap.bundle.min.js">
</ script >
</ body >
</ html >
Cards
Cards are a UI (User Interface) item and are somewhat inspired by

their real-life counterparts. A card is a UI container that holds a few
pieces of related information. They roughly represent the playing card
in shape and size. They are presentation units.
The vast majority of website designs work around cards because they
work well with responsive web design. As you scale the browser
down, the cards “resize” and “reshuffle” their position on the users
screen.
Three cards side by side:
Three cards stacked for a mobile display:

Each card is a single card class, which is then further divided into
three parts in the same way a website is.
Card Header
Card Body
Card Footer
The header of the card is made up of an image or a title. The example

we’re going to use is one with an image that is the most visually
striking. If you use an image header you can move the heading into
the card body, and write it as a single article of text.
Then we have the card body, which contains the single article of text.
Finally we have the card footer, which can hold a summary of the
card, details of the author, a call to action button, social media links or
links to a larger full page article if you’re previewing content elsewhere
on the site.
Cards are made up of the following class structure:
card
card-header
card-img-top
card-body
card-title
card-text
card-footer
btn btn-primary
< div class="card">

< div class="card-header p-0">
< img
src="https://via.placeholder.com/350x150" class="card-img-
top" alt="placeholder image">
</ div >
< div class="card-body p-2">
< h2 class="card-title">Card title</
h2 >
< p class="card-text">Lorem ipsum
dolor sit amet, consectetur adipiscing elit. Aliquam a semper
urna. Pellentesque at massa metus. Vivamus justo augue,
accumsan sit amet odio ut, sollicitudin rhoncus leo. Fusce
non felis non mi fringilla tincidunt ac in arcu. Fusce elit
justo, hendrerit eget augue a, suscipit luctus urna. Aenean
eu neque pulvinar, pharetra mauris at, facilisis est. Fusce
eu commodo quam, eu rhoncus tellus. Duis nec eros elit.</ p >
</ div >
< div class="card-footer">
< a href="#" class="btn btn-
primary">Call to action</ a >
</ div >
</ div >
To help style the card so it looks nice, we add a p-0 to the card-
header, and a p-2 to the card body.
Example 44
In this example we demonstrate a pair of cards sitting comfortably side

by side. As the display resizes, they stack on top of each other. The
breakpoints and layouts are all controlled by the column techniques
you learned previously. This means you could have up to 12 cards
side by side, but four is the more normal maximum.
<!doctype html>
< html lang="en">
< head >
< title >Basic Cards</ title >
initial-scale=1">
</ head >
< body >
< h1 >Basic Cards</ h1 >
< p >Find a basic card setup below.</ p >
< div class="row">
< div class="col-md-6 mb-2">
< div class="card">
< img
< div class="card-body">
h2 >
primary">Go somewhere</ a >
</ div >
Card footer
</ div >
</ div >
</ div >
< div class="card">
< img
h2 >
</ div >
Card footer
</ div >
</ div >
</ div >
</ div >
</ div >
</ body >
</ html >
Gutters
Gutters represent the spacing between your columns. They are used
to space and align content in the Bootstrap grid system. Many
inexperienced users will attempt to use margins and padding to create
the spaces they want between their columns; however, this will mess
up the layout of the cards. To add both horizontal and vertical spacing
we use the gutter classes.
Horizontal spacing is achieved using the gx-* class, which accepts

values up to 5. The higher the value, the wider the spacing between
columns.
For vertical spacing we use the gy-* class, which also accepts values
up to 5. Again, the higher the value, the wider the spacing between
the top and bottom of rows.
The gx-* and gy-* classes are applied to the element with a row class,
and the gutter sizing is then carried on throughout the column
structure.
Example 45
The example below shows horizontal gutter sizing.

As you can see, in this simple two column design we have ever-
increasing spacing between the columns, which is carried on for all
the columns.
Look for the row classes and you will see that a gx-* has been applied,
which then carries on throughout the whole row classed element.
<!doctype html>
< html lang="en">
< head >
< title >Bootstrap Horizontal Gutter Sizing</ title >
initial-scale=1">
</ head >
< body >
< h1 >Bootstrap Horizontal Gutter Sizing</ h1 >
< p >The container below, has rows with a horizontal gutter
applied at varied levels.</ p >
< div class="row gx-1">
< div class="col">
< div class="p-3 border bg-light">Column with
gutter of 1</ div >
</ div >
< div class="col">
gutter of 1</ div >
</ div >
</ div >
< div class="col">
gutter of 2</ div >
</ div >
< div class="col">
gutter of 2</ div >
</ div >
</ div >
< div class="col">
gutter of 3</ div >
</ div >
< div class="col">
gutter of 3</ div >
</ div >
</ div >
< div class="col">
gutter of 4</ div >
</ div >
< div class="col">
gutter of 4</ div >
</ div >
</ div >
< div class="col">
gutter of 5</ div >
</ div >
< div class="col">
gutter of 5</ div >
</ div >
</ div >
</ div >
</ body >
</ html >
Example 46
Next we apply the gy-* class to the div element that has the class rows
assigned. By doing this, the columns are affected automatically within
that div. The gutter spacing will increase with each instance of this
action.
Look for the row and gy-* values to see the comparison.
<!doctype html>
< html lang="en">
< head >
< title >Bootstrap Vertical Gutter Sizing</ title >
initial-scale=1">
</ head >
< body >
< h1 >Bootstrap Vertical Gutter Sizing</ h1 >
< p >The container below has rows with a vertical gutter
< div class="row gy-1 border my-3 pb-1">
< div class="col-6">
< div class="p-3 border bg-light">Column 1</
div >
</ div >
div >
</ div >
div >
</ div >
div >
</ div >
</ div >
div >
</ div >
div >
</ div >
div >
</ div >
div >
</ div >
</ div >
div >
</ div >
div >
</ div >
div >
</ div >
div >
</ div >
</ div >
div >
</ div >
div >
</ div >
div >
</ div >
div >
</ div >
</ div >
div >
</ div >
div >
</ div >
div >
</ div >
div >
</ div >
</ div >
</ div >
</ body >
</ html >
Example 47
Finally we have the gx-* and gy-* classes combine in ever-increasing
values to create a very interesting and complicated website layout.
If you look at websites like YouTube, Netflix and others you will see a
very similar style of layout.
Take the time to look at the way Amazon is laid out, and how Google
organises photographs. You will see this responsive layout method
used all across the internet.
<!doctype html>
< html lang="en">
< head >
< title >Bootstrap Horizontal Gutter Sizing</ title >
initial-scale=1">
</ head >
< body >
< h1 >Bootstrap Vertical Gutter Sizing</ h1 >
< p >The container below, has rows with a vertical gutter
< h2 >Size 1 on x and y gutter</ h2 >
< div class="row gx-1 gy-1">
< div class="col">
< div class="p-3 border">Column</ div >
</ div >
< div class="col">
</ div >
< div class="col">
</ div >
< div class="col">
</ div >
< div class="col">
</ div >
< div class="col">
</ div >
< div class="col">
</ div >
< div class="col">
</ div >
< div class="col">
</ div >
< div class="col">
</ div >
</ div >
</ div >
< div class="container mt-2">
< div class="col">
</ div >
< div class="col">
</ div >
< div class="col">
</ div >
< div class="col">
</ div >
< div class="col">
</ div >
< div class="col">
</ div >
< div class="col">
</ div >
< div class="col">
</ div >
< div class="col">
</ div >
< div class="col">
</ div >
</ div >
</ div >

< div class="container mt-2">
< div class="col">
</ div >
< div class="col">
</ div >
< div class="col">
</ div >
< div class="col">
</ div >
< div class="col">
</ div >
< div class="col">
</ div >
< div class="col">
</ div >
< div class="col">
</ div >
< div class="col">
</ div >
< div class="col">
</ div >
</ div >
</ div >

</ body >
</ html >
Nav
The goal of the nav bar is to provide a branding image and some
simple navigation elements that all neatly fold up into a large
touchscreen-friendly burger menu.
The desktop version looks like this:
While the burger bar menu looks like this:
The burger menu has a collapsed state as well.
Always use the nav element when creating the top navigation bar.
Assign it with the classes:
navbar
navbar-expanded
navbar-light
bg-light
Or
navbar
navbar-expanded-lg
navbar-dark
bg-dark
The first will produce a light bright navbar, while the second will
present a dark one.
We can also use breakpoints, and I recommend adding -lg to the end
of expanded.
The navbar class sets up all the formatting required for a navbar.
The navbar-expanded class allows the navbar to grow and shrink

based on the window width. It allows that burger bar drop-down
feature. The lg is a standard breakpoint, indicating when it should
snap into mobile mode.
The navbar-light and navbar-dark classes simply set the text and
background colours.
The basic class structure of a navbar looks like this:
navbar navbar-expanded-lg navbar-light bg-light
container-fluid
navbar-brand
navbar-toggler
navbar-toggler-icon
collapse navbar-collapse
navbar-nav me-auto mb-2 mb-lg-0
nav-item
nav-link active
nav-item
nav-link
In addition to the classes we also have an ID

id="navbarSupportedContent" and some data-bs-* attributes
data-bs-toggle="collapse"
< nav class="navbar navbar-expand-lg navbar-light bg-

light">
< a class="navbar-brand" href="#">< img
src="https://via.placeholder.com/125x60" class="card-
img-top"
alt="placeholder image"></ a >
< button class="navbar-toggler" type="button" data-
bs-toggle="collapse" data-bs-
target="#navbarSupportedContent">
< span class="navbar-toggler-icon"></ span >
</ button >
< div class="collapse navbar-collapse"
id="navbarSupportedContent">
< ul class="navbar-nav me-auto mb-2 mb-lg-0">
< li class="nav-item">
< a class="nav-link active" aria-
current="page" href="#">Home</ a >
</ li >
< a class="nav-link" aria-current="page"
href="#Welcome">Welcome</ a >
</ li >
href="#Container1">Container 1</ a >
</ li >
</ li >
</ li >
</ ul >
</ div >
</ div >
</ nav >
These are used by the BootstrapJavaScript libraries and basically

enable the interactive functionality. The data-bs stands for data
Bootstrap, and as the name suggests it simply toggles states and
provides targets for the code to interact with the elements.
This structure might look a little scary, but all you really have to do is
copy and paste this block of code at the top of any website.
< nav class="navbar navbar-expand-lg navbar-light bg-light">

top"
< button class="navbar-toggler" type="button" data-bs-
toggle="collapse" data-bs-target="#navbarSupportedContent">
</ button >
< a class="nav-link active" aria-current="page"
href="#">Home</ a >
</ li >
</ li >
</ li >
</ li >
</ li >
</ ul >
</ div >
</ div >
</ nav >
The container-fluid can be swapped out for container and the

branding, links and content will be centralised like a normal container.
The navbar-brand is where your brand image is placed. I recommend

a small low resolution image of around 125x60 or it will take up too
much space.
A button is created with the navbar-toggler, which is a control that

appears when the screen is thin enough and provides a styled button
that drops the touch-friendly menu down.
The span inside narbar-toggler references the icon used. We use the
default, but instead you could place an image or another icon class in
here if you don't like the burger menu and prefer something like three
dots.
The collapse navbar-collapse contains all the menu links you want to
appear in your navbar. It is the target Bootstrap uses to swap
between the item menu layout and the burger layout.
The navbar-nav and associated margin classes control how the items
in the navbar are laid out.
Then we have the nav-item, which is where you place your links using
a list structure format. Each navigation link must have nav-item as a
class. The nav-link styles your <a> links into a navigation hyperlink.
The active class indicates which page you are on. If you have a
website with multiple places, and you are on a page other than home,
the active class goes to that link item and gives a visual indication of
where you are on the site.
navbar navbar-expanded-lg navbar-light bg-light
container-fluid
navbar-brand
navbar-toggler
navbar-toggler-icon
collapse navbar-collapse
navbar-nav me-auto mb-2 mb-lg-0
nav-item
nav-link active
nav-item
nav-link
Example 48
Below is a full example of a website, using navigation to move

between multiple card groups.
<!doctype html>
< html lang="en">
< head >
< title >Navigation Bar</ title >
< meta name="viewport" content="width=device-width, initial-
scale=1">
</ head >
< body >
< nav class="navbar navbar-expand-lg navbar-light bg-light">
top"
< button class="navbar-toggler" type="button" data-bs-
toggle="collapse" data-bs-target="#navbarSupportedContent">
</ button >
< a class="nav-link active" aria-current="page"
href="#">Home</ a >
</ li >
</ li >
</ li >
</ li >
</ li >
</ ul >
</ div >
</ div >
</ nav >
< div class="container mt-2" id="Welcome">
< div class="row">
< div class="card mb-3">
< div class="row g-0">
< div class="col-lg-4 d-none d-lg-block">
< img
src="https://via.placeholder.com/300x450" class="h-100"
alt="null">
</ div >
< div class="col-lg-8">
< h1 class="card-title">Footer</
h1 >
< p class="card-text">This is a
demonstration of a footer in action.</ p >
</ div >
</ div >
</ div >
</ div >
</ div >
</ div >
</ div >
< div class="container" id="Container1">
< h2 >Container 1</ h2 >
< div class="row">
< div class="card">
< img src="https://via.placeholder.com/350x150"
class="card-img-top" alt="placeholder image">
< h2 class="card-title">Card title</ h2 >
< p class="card-text">Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Aliquam a semper urna.
Pellentesque at massa metus. Vivamus justo
augue, accumsan sit amet odio ut, sollicitudin rhoncus leo.
Fusce non felis non mi fringilla tincidunt ac in
arcu. Fusce elit justo, hendrerit eget augue a, suscipit
luctus urna. Aenean eu neque pulvinar, pharetra
mauris at, facilisis est. Fusce eu commodo quam, eu
rhoncus tellus. Duis nec eros elit.</ p >
< a href="#" class="btn btn-primary">Go
somewhere</ a >
</ div >
Card footer
</ div >
</ div >
</ div >
< div class="card">
somewhere</ a >
</ div >
Card footer
</ div >
</ div >
</ div >
</ div >
</ div >
< h2 >Cotnainer 2</ h2 >
< div class="row">
< div class="card">
somewhere</ a >
</ div >
Card footer
</ div >
</ div >
</ div >
< div class="card">
somewhere</ a >
</ div >
Card footer
</ div >
</ div >
</ div >
</ div >
</ div >
< h2 >Cotnainer 3</ h2 >
< div class="row">
< div class="card">
somewhere</ a >
</ div >
Card footer
</ div >
</ div >
</ div >
< div class="card">
somewhere</ a >
</ div >
Card footer
</ div >
</ div >
</ div >
</ div >
</ div >
</ script >
</ body >
</ html >
Footer
The footer serves as the place to store your copyright information,

navigation links and some parting words for those who have reached
the end of the page.
A standard Bootstrap footer looks like this:
It is achieved using the footer div as well as some simple colour

styling and text effects.
A single container is used, along with a row and a couple of columns.

These make up the content and hyperlinks.
Below that we place a simple div with some centred text.
The standard code for a footer looks like this:
< footer class="bg-dark text-light text-center text-lg-

start">
< div class="container p-4">
< div class="row">
< h5 class="text-uppercase">Footer
Content</ h5 >
< p > Lorem ipsum dolor sit amet
consectetur, adipisicing elit. Iste atque ea quis molestias.
Fugiat pariatur maxime quis culpa corporis vitae repudiandae
aliquam voluptatem veniam, est atque cumque eum delectus
sint! </ p >
</ div >
< h2 class="text-uppercase mb-0">Links</
h5 >
< li >< a href="#Welcome" class="text-
light">Welcome</ a ></ li >
< li >< a href="#Container1"
class="text-light">Container 1</ a ></ li >
</ ul >
</ div >
</ div >
</ div >
< div class="text-center p-3">Copyright © 2021 < a
class="text-primary text-decoration-none"
href="https://www.ctelearning.com">CT< sup >e</ sup >
Learning</ a >
</ div >
</ footer >
You can copy and paste it to the end of any document, then make
only minimal changes.
Example 49
<!doctype html>
< html lang="en">
< head >
< title >Footer</ title >
initial-scale=1">
>
</ head >
< body >
< nav class="navbar navbar-expand-lg navbar-light bg-
light">
top"
< button class="navbar-toggler" type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-
controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
</ button >
< a class="nav-link active" aria-
current="page" href="#">Home</ a >
</ li >
< li class="nav-item dropdown">
< a class="nav-link dropdown-toggle"
href="#" id="navbarDropdown" role="button"
data-bs-toggle="dropdown" aria-
expanded="false">
Dropdown menu
</ a >
< ul class="dropdown-menu" aria-
labelledby="navbarDropdown">
< li >< a class="dropdown-item"
href="#Welcome">Welcome</ a ></ li >
< li >< a class="dropdown-item"
href="#Container1">Container 1</ a ></ li >
</ ul >
</ li >
</ ul >
</ div >
</ div >
</ nav >
< div class="container mt-2" id="Welcome">
< div class="row">
< div class="card mb-3">
< div class="row g-0">
< div class="col-md-4">
< img
src="https://via.placeholder.com/300x450" class="h-100"
alt="null">
</ div >
< div class="col-md-8">
< h1 class="card-
title">Footer</ h1 >
< p class="card-text">This is
a demonstration of a footer in action.</ p >
</ div >
</ div >
</ div >
</ div >
</ div >
</ div >
</ div >
< h2 >Container 1</ h2 >
< div class="row">
< div class="card">
< img
h2 >
urna.
Pellentesque at massa metus.
Vivamus justo augue, accumsan sit amet odio ut, sollicitudin
rhoncus leo.
Fusce non felis non mi fringilla
tincidunt ac in arcu. Fusce elit justo, hendrerit eget
augue a, suscipit
luctus urna. Aenean eu neque
pulvinar, pharetra mauris at, facilisis est. Fusce eu commodo
quam, eu
rhoncus tellus. Duis nec eros
elit.</ p >
</ div >
Card footer
</ div >
</ div >
</ div >
< div class="card">
< img
h2 >
urna.
Pellentesque at massa metus.
Vivamus justo augue, accumsan sit amet odio ut, sollicitudin
rhoncus leo.
Fusce non felis non mi fringilla
tincidunt ac in arcu. Fusce elit justo, hendrerit eget
augue a, suscipit
luctus urna. Aenean eu neque
pulvinar, pharetra mauris at, facilisis est. Fusce eu commodo
quam, eu
rhoncus tellus. Duis nec eros
elit.</ p >
</ div >
Card footer
</ div >
</ div >
</ div >
</ div >
</ div >
< footer class="bg-dark text-light text-center text-lg-
start">
< div class="container p-4">
< div class="row">
< h5 class="text-uppercase">Footer
Content</ h5 >
< p > Lorem ipsum dolor sit amet
consectetur, adipisicing elit. Iste atque ea quis molestias.
Fugiat pariatur maxime quis culpa corporis vitae repudiandae
aliquam voluptatem veniam, est atque cumque eum delectus
sint! </ p >
</ div >
< h2 class="text-uppercase mb-0">Links</
h5 >
< li >< a href="#Welcome" class="text-
light">Welcome</ a ></ li >
< li >< a href="#Container1"
class="text-light">Container 1</ a ></ li >
</ ul >
</ div >
</ div >
</ div >
< div class="text-center p-3">Copyright © 2021 < a
class="text-primary text-decoration-none"
href="https://www.ctelearning.com">CT< sup >e</ sup >
Learning</ a >
</ div >
</ footer >

</ script >
</ body >
</ html >
End of section activity
You’ve learned everything you need to create a fully featured website

with navigation, content and a footer. You should practice your skills
and make a multipage website. Look at other sites on the web, and
see if you can recreate them using bootstrap. Look at mobile sites and
see how they work and how well bootstrap compares.
Sit down and imagine what direction you want to take your new skills
in. Are you going to design a website for yourself, or are you going to
jump into Fiverr and start promoting your skills for jobs.
No matter what you do, the next step has to be “making a portfolio”. A
portfolio is a tool you can fall back on when attempting to get work, or
demonstrating to clients why they want to hire you.
Practice making lots of websites, using all kinds of layouts.
It will help get you work, jobs and develop your skills further.
It will also help you identify where you are lacking in your skills or
understanding.
The next step in your career
You now know the technical knowledge you need to produce good
quality bootstrap websites. The next step should be to practice your
new skills. I would strongly recommend producing your own portfolio if
you seek work, online jobs, and others. Books are a great starting
point, but it can never replace hands on experience.
To help support your future career, I’ve partnered with CT e Learning

a number of courses will support the bootstrap foundations chapters
you’ve just completed you can find a list of these courses
at https://www.ctelearning.com/b5f
This book was written with the support of https://www.ctelearning.com

for all your career and technical education needs.
1. Bootstrap Foundations eBook
2. The Random Knowledge Enthusiast
3. Bootstrap 5 Foundations
4. https://www.therke.com/
5. In partnership with CTe Learning
6. Dedication
7. Preface
8. The Author
9. Table of Content
10. About the book
1. Why be a front-end web developer?
1. The money
2. The fame
3. The Power
2. What do I need?
3. Why Bootstrap 5?
4. Requirements
5. What is Bootstrap?
6. Bootstrap versions
7. Teaching bleeding edge technology
8. What’s new in Bootstrap 5?
11. Getting Started with Bootstrap 5
1. Example 1
2. Example 2
3. Example 3
4. Example 4
12. Bootstrap is a CSS class system
13. Typography
1. Headings Typography
1. Example 5
2. Example 6
3. Example 7
2. Heading classes
1. Example 8
3. A note about SEO
4. Secondary heading text
1. Example 9
2. Example 10
5. Display Headings
1. Example 11
2. Example 12
6. Creating Lead Text
1. Example 13
2. Example 14
7. Text Alignment
1. Example 15
8. Font Sizing
1. Example 16
2. Example 17
9. Text Styles and weight
1. Example 18
10. Text Line-height
1. Example 19
11. Text Transform
1. Example 20
12. Underline strikethrough and removal of
underline.
1. Example 21
13. Lists
1. Example 22
14. Bootstrap Colours
1. Example 23
15. Borders
1. Example 24
2. Example 25
16. Margins
1. Example 26
2. Example 27
17. Padding
1. Example 28
2. Example 29
18. Bootstrap Buttons
1. Example 30
2. Example 31
19. Bootstrap Buttons with outlines
1. Example 32
2. Example 33
14. Responsive Layout
1. Bootstrap Containers
1. Example 34
2. Bootstrap containers with breakpoints
1. Example 35
3. Fluid Container
1. Example 36
4. Bootstrap Grid System
1. Example 37
2. Example 38
3. Example 39
5. Column breakpoints
1. Example 40
6. Column Sizing
1. Example 41
7. Column sizing and breakpoints
1. Example 42
8. Images
1. Example 43
9. Cards
1. Example 44
10. Gutters
1. Example 45
2. Example 46
3. Example 47
11. Nav
1. Example 48
12. Footer
1. Example 49
15. The next step in your career

Bootstrap 5 Foundations

Uploaded by

Copyright:

Available Formats

Bootstrap 5 Foundations

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Bootstrap 5 Foundations

Uploaded by

Copyright:

Available Formats

The Random Knowledge

Visit https://www.ctelearning.com/b5f / for a list of courses supported

To my father, who taught me knowledge is king.

To my mother, who put up with us both!

I took a very simplistic “I should know everything” approach to

Luckily for you, Bootstrap means you don’t have to be an expert in

Learning HTML5 is certainly not a step you should skip— the

As long as you have a good solid understanding of HTML5, and a little

I’m a growing social media influencer, with the majority of my followers

Finally I write technical industry standard courses which are taught

And professional training courses which are sold through:

An industry certification company of professional web developers.

These projects, associations and business connects are the result of

The knowledge in this book can be traded up for a professional

In an entry level position, the average UK salary starts at £28,000—

How do most people discover celebrities, entrepreneurs and

Too many managers, entrepreneurs and business owners depend on

Please visit this location to download.

For Chromebooks you can use the online IDE:

For iPhone and iPad:

For Kindle Fire Tablets:

Bootstrap 5 is a mobile-first framework for building websites and

Bootstrap has received over six hundred contributors to its codebase,

Bootstrap is required learning if you are pursuing a career as a front-

Bootstrap 5 has moved away from jQuery, which it was previously

Whether you plan to make templates for a living, or become a full

Bootstrap is a front-end mobile-first responsive framework because

This course will assume you are familiar with:

Multiple class selectors .class1.class2 .class1 .class2,

Element selectors div, p, body, etc.

Multiple Element selectors div h1, body h1, etc.

Basic CSS3 rules, color, background, etc.

A basic awareness of JavaScript

How to load Scripts into a page

Bootstrap is a free front-end development framework initially produced

A framework is a tool that provides generic functionality between

Bootstrap uses HTML5 as the means to create content, and Bootstrap

These are just a few of the features.

There are three major versions of Bootstrap in circulation: Bootstrap 3,

Bootstrap 4.6 is the current version of Bootstrap. It supports Internet

Because it is important to prepare students for the very latest

Bootstrap 5 is the latest version of the framework. Previous versions

Bootstrap 5 broke away from jQuery and stopped supporting Internet

Knowledge of HTML Attributes.

A link to Bootstrap’s CSS file.

A link to the Bootstrap JavaScript file.

The minimum HTML5 HTML file.

Let’s begin with the HTML5 page.

The CSS link for Bootstrap is:

< link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-

Let's add this to our document.

< body >

Next we add the JavaScript library, the link for this:

< script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-

< body >

< meta charset="utf-8">

We add this after the <title> element.

Now that we have this template, we are ready to begin using

You don’t have to remember all of these right now—classes will be

You will learn: