0% found this document useful (0 votes)

305 views166 pages

Bootstrapcodeacademy

The document is the code for a news website homepage that utilizes Bootstrap for layout and styling. It includes a header with navigation links, featured and regular article sections laid out in a grid, and footer content. Bootstrap is integrated by adding the required meta tags and linking to the Bootstrap CSS file in the document head.

Uploaded by

abu hamid

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

305 views166 pages

Bootstrapcodeacademy

Uploaded by

abu hamid

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

You are on page 1/ 166

<!

doctype html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<title>News Website</title>

</head>

<body>

<div class="row flex-nowrap justify-content-between align-items-center bg-dark">

<div class="col-4 pt-1">

<button type="button" class="btn btn-sm btn-outline-primary">Subscribe</button>

</div>

<div class="col-4 text-center">

<h1 class="text-white" href="#">News</h1>

</div>

<div class="col-4 d-flex justify-content-end align-items-center">

<a class="btn btn-sm btn-outline-light" href="#">Log In</a>

</div>

<nav class="navbar navbar-expand-lg navbar-light bg-light">

<a class="navbar-brand mx-auto" href="#">Categories:</a>

<button class="navbar-toggler" type="button" data-toggle="collapse" data-

target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">

</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">

<div class="navbar-nav mx-auto">

<a class="p-2 text-muted" href="#">US</a>

<a class="p-2 text-muted" href="#">Foreign</a>

<a class="p-2 text-muted" href="#">Technology</a>

<a class="p-2 text-muted" href="#">Business</a>

<a class="p-2 text-muted" href="#">Culture</a>

<a class="p-2 text-muted" href="#">ics</a>

<a class="p-2 text-muted" href="#">Opinion</a>

<a class="p-2 text-muted" href="#">Health</a>

<a class="p-2 text-muted" href="#">Economics</a>

</div>

</nav>

</header>
<div class="row">

<div class="jumbotron p-3 p-md-5 rounded" style="background-image:

url('https://content.codecademy.com/courses/learn-bootstrap-4/student-reading.jpg'); background-
size: cover;">

<div class="col-12" style="background-color: rgba(0,0,0, 0.4);">

<h1 class="display-4 text-white">Kids Love to Read!</h1>

<p class="lead text-light my-3">Teachers say it starts at home! You should begin reading to

your children consistently at a young age.</p>

<p class="lead mb-0"><a href="#" class="text-white font-weight-bold">Continue

reading...</a></p>

</div>

<div class="row mb-2">

<div class="col-12 col-md-6">

<div class="card mb-4 box-shadow">

<img class="card-img-top img-fluid" src="https://content.codecademy.com/courses/learn-

bootstrap-4/recycle.jpg" alt="Card image cap">

<div class="card-body d-flex flex-column align-items-start">

<p class="d-inline-block mb-2 text-info font-weight-bold">Foreign</p>

<a class="text-dark" href="#">Filling the Gaps</a>

</h3>

<div class="mb-1 text-muted">Nov 12</div>

<p class="card-text">Developed countries have reduced their plastic usage and

adopted sustainable living practices. This change has slowed down the effects of

climate change for developing nations.</p>

<a href="#">Read More</a>

</div>

<div class="col-12 col-md-6">

<div class="card mb-4 box-shadow">

<img class="card-img-top img-fluid" src="https://content.codecademy.com/courses/learn-

bootstrap-4/polling-station.jpg" alt="Card image cap">

<div class="card-body d-flex flex-column align-items-start">

<p class="d-inline-block mb-2 text-warning font-weight-bold">Politics</p>

<a class="text-dark" href="#">Record High for Young US Voters</a>

</h3>

<div class="mb-1 text-muted">Nov 11</div>

<p class="card-text">American voters under 30 years old came out in droves for

the last election. This trend is inspiring the youths of other democratic nations.</p>

<a href="#">Read More</a>

</div>

</div>
<div class="row">

<div class="p-3 mb-3 bg-light rounded">

<h4>About</h4>

<p class="mb-0"><span class="font-italic">Your news fast and accurate!</span> At News, we

take the news very

seriously. We guarantee real news from certified, experience journalists.</p>

</div>

<h4 class="font-italic">Archives</h4>

<li><a href="#">October 2018</a></li>

<li><a href="#">September 2018</a></li>

<li><a href="#">August 2018</a></li>

<li><a href="#">July 2018</a></li>

</ol>

</div>

<h4 class="font-italic">Social</h4>

<li><a href="#">YouTube</a></li>
<li><a href="#">Twitter</a></li>

<li><a href="#">Facebook</a></li>

</ol>

</div>

</body>

</html>
LEARN BOOTSTRAP 4: GRID
Getting Started with Bootstrap
Creating a website from scratch can take a lot of work and require a working
knowledge of HTML, CSS, and maybe some JavaScript. But with Bootstrap, the
amount of work and prior knowledge is reduced.

Bootstrap is a framework of readily available code that integrates with HTML

to create stylized websites that adapt the layout to users’ screen sizes. This
framework allows us to cut down on the time needed to style a website,
simplifies the complexity of how to layout elements, works across multiple
browsers, and reduces the frustration of using plain CSS. All it takes to use
Bootstrap is a few additional lines in our HTML document.

In this lesson, we’ll be working with Bootstrap 4. To incorporate Bootstrap into

a project, we have to include two <meta> tags and the Bootstrap CSS library. In
the example below, Bootstrap is linked via Content Delivery Network (CDN) in
the <head> element, like so:

If you’re ready, strap on those boots and let’s get started!

Instructions

1.
Look over the structure of the HTML document in the code editor and take
notice of the <meta> tags in the header and the <script> elements at the
bottom of the <body>. We’ve also included elements that use Bootstrap’s
styling and layout, but we haven’t added in the link to Bootstrap’s CDN.

Paste the following line of code inside the <head> element:

Hint
Make sure that you’ve copied and pasted the line provided inside
the <head> element. Look at the example provided in the narrative or check out
the Bootstrap documentation.

<!doctype html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

</head>

<body>

<div class="row flex-nowrap justify-content-between align-items-center bg-dark">

<div class="col-4 pt-1">

<button type="button" class="btn btn-sm btn-outline-primary">Subscribe</button>

</div>

<div class="col-4 text-center">

<h1 class="text-white" href="#">News</h1>

</div>

<div class="col-4 d-flex justify-content-end align-items-center">

<a class="btn btn-sm btn-outline-light" href="#">Log In</a>

</div>

<nav class="navbar navbar-expand-lg navbar-light bg-light">

<a class="navbar-brand mx-auto" href="#">Categories:</a>

<button class="navbar-toggler" type="button" data-toggle="collapse" data-

target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">

</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">

<div class="navbar-nav mx-auto">

<a class="p-2 text-muted" href="#">US</a>

<a class="p-2 text-muted" href="#">Foreign</a>

<a class="p-2 text-muted" href="#">Technology</a>

<a class="p-2 text-muted" href="#">Business</a>

<a class="p-2 text-muted" href="#">Culture</a>

<a class="p-2 text-muted" href="#">ics</a>

<a class="p-2 text-muted" href="#">Opinion</a>

<a class="p-2 text-muted" href="#">Health</a>

<a class="p-2 text-muted" href="#">Economics</a>

</div>

</nav>

</header>

<div class="jumbotron p-3 p-md-5 rounded" style="background-image:

url('https://content.codecademy.com/courses/learn-bootstrap-4/student-reading.jpg'); background-
size: cover;">

<div class="col-12" style="background-color: rgba(0,0,0, 0.4);">

<h1 class="display-4 text-white">Kids Love to Read!</h1>

<p class="lead text-light my-3">Teachers say it starts at home! You should begin reading to

your children consistently at a young age.</p>

<p class="lead mb-0"><a href="#" class="text-white font-weight-bold">Continue

reading...</a></p>
</div>

</div>

<div class="row mb-2">

<div class="col-12 col-md-6">

<div class="card mb-4 box-shadow">

<img class="card-img-top img-fluid" src="https://content.codecademy.com/courses/learn-

bootstrap-4/recycle.jpg" alt="Card image cap">

<div class="card-body d-flex flex-column align-items-start">

<p class="d-inline-block mb-2 text-info font-weight-bold">Foreign</p>

<a class="text-dark" href="#">Filling the Gaps</a>

</h3>

<div class="mb-1 text-muted">Nov 12</div>

<p class="card-text">Developed countries have reduced their plastic usage and

adopted sustainable living practices. This change has slowed down the effects of

climate change for developing nations.</p>

<a href="#">Read More</a>

</div>

<div class="col-12 col-md-6">

<div class="card mb-4 box-shadow">

<div class="card-body d-flex flex-column align-items-start">

<p class="d-inline-block mb-2 text-warning font-weight-bold">Politics</p>

<a class="text-dark" href="#">Record High for Young US Voters</a>

</h3>

<div class="mb-1 text-muted">Nov 11</div>

<p class="card-text">American voters under 30 years old came out in droves for

the last election. This trend is inspiring the youths of other democratic nations.</p>

<a href="#">Read More</a>

</div>

<div class="p-3 mb-3 bg-light rounded">

<h4>About</h4>

<p class="mb-0"><span class="font-italic">Your news fast and accurate!</span> At News, we

take the news very

seriously. We guarantee real news from certified, experience journalists.</p>

</div>

</div>
</div>

<h4 class="font-italic">Archives</h4>

<li><a href="#">October 2018</a></li>

<li><a href="#">September 2018</a></li>

<li><a href="#">August 2018</a></li>

<li><a href="#">July 2018</a></li>

</ol>

</div>

<h4 class="font-italic">Social</h4>

<li><a href="#">YouTube</a></li>

<li><a href="#">Twitter</a></li>

<li><a href="#">Facebook</a></li>

</ol>

</div>

</body>

</html>

LEARN BOOTSTRAP 4: GRID

Intro to the Grid
Bootstrap simplifies the layout of a website using a grid system. For us to fully
take advantage of Bootstrap’s grid system, we need to understand how to
structure our HTML.

At the heart of it, containers are the basis of Bootstrap’s grid. Inside containers,

we nest rows as immediate children. Then, nested inside rows are columns.
Inside columns, we put our actual content. Take a look below at an example of
this nesting pattern. Don’t worry about the syntax of rows and columns just
yet, but do take note of how our HTML is organized:

<div class="container">
  <div class="row">
    <div class="col">
      
    </div>
  </div>
</div>
We can gain even more control of our layout once we start nesting rows inside
columns and setting widths for our columns! But, first, let’s review how to
create a layout using Bootstrap.

Instructions

Take a look at the provided diagram and key — container, rows, columns are
color coded.

The Basic Layout shows the fundamental structure. The Nested Layers shows

how to build a more complex layout by nesting rows inside a column. Lastly,
the Entire Webpage shows how a webpage can be laid out as a

https://getbootstrap.com/docs/4.1/layout/grid/

<!doctype html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link rel="stylesheet" href="style.css" type="text/css">

<title>Containers</title>

</head>

<body>

<div>

<h1>Container Example</h1>

</div>

<br>

<div>

<h1>Container Fluid Example</h1>

</div>

</body>

</html>

LEARN BOOTSTRAP 4: GRID

Bootstrap Containers
Bootstrap uses a grid system based on CSS Flexbox which organizes content in
rows or columns. As seen in the previous exercise, Bootstrap also uses rows
and columns and in this exercise we’ll learn about the essential Bootstrap
container. Using the Bootstrap grid also allows for responsive design, in other
words, a website’s layout can change based on the user’s screen size. Read
more about grid at Bootstrap’s grid documentation.

Bootstrap uses classes to apply CSS rulesets — these rulesets dictate the
layout and styling of the element. To create a container, necessary for
Bootstrap’s grid, we assign a class of "container" to a <div> like so:

If we wanted the container to take up the entire width of the screen we can
assign a class of "container-fluid":

<div class="container-fluid"></div>
Knowing how to use documentation is important. We can always check what
classes to add using Bootstrap’s grid documentation.

Note: the Bootstrap site uses CSS notation for classes, which entails having
a . before a class name like .example-class-name.

Instructions

1.
Note that we’ve added some styling in a local CSS file, style.css to add a
background color, a border, and a font color to the <div>s without adding
more Bootstrap classes. This will be a common theme in the following
exercises. We’ve given containers a solid black border and a teal/green
background color.

In index.html there are two <div>s in the <body>. Add a class of "container" to

the first <div>. Run your code to see how size of the container changes.
Hint
Make sure you assign the class to the first <div>. Check the code in the
narrative or Bootstrap’s documentation for syntax help.
2.
Assign the second <div> a class of "container-fluid" to see how it compares to
the first <div>.

You will have to resize the browser to see a noticeable difference. To resize the
browser, you can click and drag the left edge of the browser or click on the

expand icon: .

Learn Bootstrap 4: Grid: Bootstrap Containers

Narrative and Instructions

Learn

LEARN BOOTSTRAP 4: GRID

Bootstrap Containers

Bootstrap uses a grid system based on CSS Flexbox which organizes content in rows or columns.
As seen in the previous exercise, Bootstrap also uses rows and columns and in this exercise we’ll
learn about the essential Bootstrap container. Using the Bootstrap grid also allows for responsive
design, in other words, a website’s layout can change based on the user’s screen size. Read more
about grid at Bootstrap’s grid documentation.

Bootstrap uses classes to apply CSS rulesets — these rulesets dictate the layout and styling of the
element. To create a container, necessary for Bootstrap’s grid, we assign a class
of "container" to a <div> like so:

<div class="container"></div>
The <div> from the example above becomes a Bootstrap container which has a width relative to a
user’s screen size, becomes horizontally centered, and has a left and right margin.
If we wanted the container to take up the entire width of the screen we can assign a class
of "container-fluid":

<div class="container-fluid"></div>
Knowing how to use documentation is important. We can always check what classes to add
using Bootstrap’s grid documentation.

Note: the Bootstrap site uses CSS notation for classes, which entails having a . before a class
name like .example-class-name.

Instructions

Note that we’ve added some styling in a local CSS file, style.css to add a background color, a
border, and a font color to the <div>s without adding more Bootstrap classes. This will be a
common theme in the following exercises. We’ve given containers a solid black border and a
teal/green background color.

In index.html there are two <div>s in the <body>. Add a class of "container" to the first <div>.

Run your code to see how size of the container changes.
Checkpoint 2 Passed

Hint

Make sure you assign the class to the first <div>. Check the code in the narrative or Bootstrap’s
documentation for syntax help.
2.

Assign the second <div> a class of "container-fluid" to see how it compares to the first <div>.

You will have to resize the browser to see a noticeable difference. To resize the browser, you can

click and drag the left edge of the browser or click on the expand icon: .

<!doctype html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link rel="stylesheet" href="style.css" type="text/css">

<title>Containers</title>

</head>

<body>

<h1>Container Example</h1>

</div>

<br>

<h1>Container Fluid Example</h1>

</div>

</body>

</html>

body {

background-color: rgb(239, 217, 202);

.container, .container-fluid {

background-color: rgb(109, 240, 194);

border: black solid 15px;

color: rgb(0, 0, 0);

.row {

background-color: rgb(236, 93, 23);

border: rgb(255, 199, 64) solid 10px;

[class*="col"]{

border: black solid 5px;

background-color: rgb(100, 0, 228);

color: rgb(255, 255, 255);

}
LEARN BOOTSTRAP 4: GRID
Columns
We’ve covered containers and rows, now we have to go one level deeper and explore Bootstrap’s
columns.

Columns are the immediate children of rows and store content. By default, a column will take up
the entire width of its parent row. As we add more columns inside a row, the default behavior is
for each column’s width to be readjusted to fit in the row — each column will have the same
width. At most, a row will accommodate 12 columns. Study the diagram below to see how
column sizing works:

Notice the first row in the diagram has 1 column and it takes up the entire width of the row. We
could say that this column takes up the width of 12 individual columns. The width of an
individual column can be seen in the last row of the diagram.

To create a column, we assign an element with the class of "col". Take a look at the provided
example with a container that has a nested row which has a nested column:

<div class="container">
  <div class="row">
    <div class="col">
    </div>
  </div>
</div>
Let’s learn about this first hand by adding columns in our code!

Instructions

1.
In index.html we have 3 rows. Let’s see what happens when we add varying amounts of
columns to each row. We’ve given columns a solid border and a purple background color.

Nested inside the first row is a <div> without a class. Assign it a class of "col" to render a
column.
Stuck? Get a hint
2.
In the second row, add two columns using <div>s.

To give the column some height, inside each <div> add a <p> element with the text Two columns
in a row.
Hint
The second row should have two <div> children. Each <div> should have a class of "col".

Remember to add the <p> with the text Two columns in a row.

3.
In the third row, add three columns using <div>s.

To give the column some height, inside each <div> add a <p> element with the text Three columns
in a row.

Compare the sizing of the added columns. Also, expand the size of the browser to see responsive
design in action!
Hint
The third row should have two <div> children. Each <div> should have a class of "col".
Remember to add the <p> with the text Three columns in a row.
<!doctype html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link rel="stylesheet" href="style.css" type="text/css">

<title>Columns</title>

</head>

<body>

<div>

<h3>One column in a row</h3>

</div>

</div>

</div>

</body>

</html>
LEARN BOOTSTRAP 4: GRID
Columns
We’ve covered containers and rows, now we have to go one level deeper and
explore Bootstrap’s columns.

Columns are the immediate children of rows and store content. By default, a
column will take up the entire width of its parent row. As we add more
columns inside a row, the default behavior is for each column’s width to be
readjusted to fit in the row — each column will have the same width. At most,
a row will accommodate 12 columns. Study the diagram below to see how
column sizing works:

Notice the first row in the diagram has 1 column and it takes up the entire
width of the row. We could say that this column takes up the width of 12
individual columns. The width of an individual column can be seen in the last
row of the diagram.

To create a column, we assign an element with the class of "col". Take a look

at the provided example with a container that has a nested row which has a
nested column:

<div class="container">
  <div class="row">
    <div class="col">
    </div>
  </div>
</div>
Let’s learn about this first hand by adding columns in our code!

Instructions

1.
In index.html we have 3 rows. Let’s see what happens when we add varying
amounts of columns to each row. We’ve given columns a solid border and a
purple background color.
Nested inside the first row is a <div> without a class. Assign it
a class of "col" to render a column.
Checkpoint 2 Passed

Hint
Make sure you’re assigning the <div> a class of "col". Your code will look like:

<div class="row">
  <div class="col">
    <h3>One column in a row</h3>
  </div>
</div>
2.
In the second row, add two columns using <div>s.

To give the column some height, inside each <div> add a <p> element with the
text Two columns in a row.
Checkpoint 3 Passed

Hint
The second row should have two <div> children. Each <div> should have
a class of "col".

Remember to add the <p> with the text Two columns in a row.

3.
In the third row, add three columns using <div>s.

To give the column some height, inside each <div> add a <p> element with the
text Three columns in a row.

Compare the sizing of the added columns. Also, expand the size of the
browser to see responsive design in action!
Checkpoint 4 Passed

Hint
The third row should have two <div> children. Each <div> should have
a class of "col".
Remember to add the <p> with the text Three columns in a row.

<!doctype html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link rel="stylesheet" href="style.css" type="text/css">

<title>Columns</title>

</head>

<body>

<h3>One Column in a row</h3>

</div>

<p>Two columns in a row</p>

</div>

<p>Two columns in a row</p>

</div>

<p>Three columns in a row</p>

</div>

<p>Three columns in a row</p>

</div>

<p>Three columns in a row</p>

</div>

</body>

</html>

Style.css

body {

background-color: rgb(239, 217, 202);

.container, .container-fluid {

background-color: rgb(109, 240, 194);

border: black solid 15px;

color: rgb(0, 0, 0);

}
.row {

background-color: rgb(236, 93, 23);

border: rgb(255, 199, 64) solid 10px;

[class*="col"]{

border: black solid 5px;

background-color: rgb(100, 0, 228);

color: rgb(255, 255, 255);

<!doctype html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link rel="stylesheet" href="style.css" type="text/css">

<title>Column Widths</title>

</head>

<body>

<p>Differently</p>

</div>

<p>Sized</p>

</div>

<p>Left Column</p>

</div>

<p>Middle Column</p>

</div>

<p>Right Column</p>
</div>

</div>

</body>

</html>

body {

background-color: rgb(239, 217, 202);

.container, .container-fluid {

background-color: rgb(109, 240, 194);

border: black solid 15px;

color: rgb(0, 0, 0);

.row {
background-color: rgb(236, 93, 23);

border: rgb(255, 199, 64) solid 10px;

[class*="col"]{

border: black solid 5px;

background-color: rgb(100, 0, 228);

color: rgb(255, 255, 255);

}
Bootstrao design codeacademy

<!doctype html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link rel="stylesheet" href="style.css" type="text/css">

<title>Column Widths</title>

</head>
<body>

<p>Differently</p>

</div>

<p>Sized</p>

</div>

<p>Left Column</p>

</div>

<p>Middle Column</p>

</div>

<p>Right Column</p>

</div>

</body>

</html>
Learn Bootstrap 4: Grid: Setting Column Width with Content
Narrative and Instructions

Learn

LEARN BOOTSTRAP 4: GRID

Setting Column Width with Content

Another option we could use to set the width of a column is the content inside the column.

If we want to use the content to set a column’s width, we append "auto" to the class of the
column, for example:

<div class="col-auto">
<p>This content determines the width of the parent column</p>
</div>
In the example above, the width of the column is determined by the text inside the <p> element.

Let’s see "auto" in action.

Instructions

Currently, the column in the first row has a width of "12". Change the "12" so that the width of
the column is set by the content inside the column.

Notice the sizing difference after you successfully make the change.

<!doctype html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link rel="stylesheet" href="style.css" type="text/css">

<title>Auto Width</title>

</head>

<body>

<p>Auto Adjusted</p>

</div>

<p>This column takes up 12 columns of space!</p>

</div>

</body>

</html>

LEARN BOOTSTRAP 4: GRID

Bootstrap Breakpoints
One benefit of using Bootstrap is that it incorporates responsive design. With responsive
design, the layout of the content changes to accommodate a user’s screen size.

Bootstrap categorizes screen sizes into 5 categories or as breakpoints: extra small, small,
medium, large, and extra large. Each breakpoint has a range measured in pixels. The
range of these breakpoints and accompanying device types are marked in the following
table:

Breakpoint
Category Device Type
Range
Extra < 576 px portrait
Breakpoint
Category Device Type
Range
small smartphones
landscape
Small ≥ 576 px
smartphones
Medium ≥ 768 px tablets
Large ≥ 992 px desktops
Extra
≥ 1200 px large desktop
Large

By using these breakpoints in combination with Bootstrap’s grid, we can customize the
layout of our content for different scr

LEARN BOOTSTRAP 4: GRID

Breakpoint Naming Convention

Using Bootstrap, we can freely change the layout of our content using grid.
We can even customize how our content on the grid changes based on
breakpoints (extra small, small, medium, large, extra large). To incorporate
these breakpoints into our code, we have to follow Bootstrap’s class naming
convention.

The naming convention follows a pattern of "col-{breakpoint}-{width}". Let’s

break this pattern down:
 As seen before "col" refers to a column.
 {breakpoint} can be sm, md, lg, or xl. Notice that there is no extra small
or xs breakpoint. If we omit {breakpoint}, it is by default for extra small
screens.
 {width} can be set from 1 to 12 and assigns a width to the column.
 When we set a {breakpoint}-{width}, it means that we want our column to
have that set width for screens that fit in the specified breakpoint range
and other larger screens.

For instance:

<div class="col-sm-8">
</div>
The column in the example will be as wide as 8 individual columns on small
screen sizes and also any larger screens (medium, large, and extra large). In
the next exercise, we’ll go over how to customize our layout for every
breakpoint. For now, let’s get comfortable with Bootstrap’s naming
convention. To get even more information check out Bootstrap’s grid options
documentation.

Instructions

Use Bootstrap’s naming convention to change the class of the first row’s

column so that it has a width of 6 for screens on the md breakpoint (and
above).

After you make this change, expand the size of the browser to a medium-sized
screen provided to see the change take place.
Checkpoint 2 Passed

Hint

You’ll need to add to the existing class="col" on the column. After you make
your changes, the class should look like: class="col-md-6". When you apply a
breakpoint, the width provided is also applied to the breakpoints of larger
screens.
Expand the browser until you see that the column takes up half the width of
the row, that’s when you know you’ve hit the breakpoint.
2.

In the second row, make both columns have a width of 3 on small (and larger)
sized screens.

Change the size of the browser to see the effect of the modified class!
Checkpoint 3 Passed

Hint

Follow the naming convention and apply it to both columns.

<!doctype html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link rel="stylesheet" href="style.css" type="text/css">

<title>Breakpoint Naming Convention</title>

</head>

<body>

<div class="col-md-6">
<h3>6 columns wide:</h3>

<p>On medium sized screens and bigger!</p>

</div>

<h3>3 columns wide:</h3>

<p>On small sized screens and bigger!</p>

</div>

<h3>3 columns wide:</h3>

<p>On small sized screens and bigger!</p>

</div>

</body>

</html>

Style.css

body {

background-color: rgb(239, 217, 202);

.container, .container-fluid {

background-color: rgb(109, 240, 194);

border: black solid 15px;

color: rgb(0, 0, 0);

.row {

background-color: rgb(236, 93, 23);

border: rgb(255, 199, 64) solid 10px;

[class*="col"]{

border: black solid 5px;

background-color: rgb(100, 0, 228);

color: rgb(255, 255, 255);

}
LEARN BOOTSTRAP 4: GRID

Combining Bootstrap Classes

In the previous exercise, we went over how to follow Bootstrap naming

conventions to add breakpoint requirements for a column. We can go one
step further and add multiple classes to our columns for additional control
over the rendering of our content.

Let’s walk through the syntax and thought process using an example:

First, we’d want to think about how our column looks like on extra small
screens. Since we don’t have much space, we would want to have our column
take up the entirety of the row and assign a class of "col-12". We don’t include
an xs breakpoint, it’s implicitly applied for us! Our column looks like:

<div class="col-12">
</div>
Then we decide that for medium-sized screens we don’t want the column to
take up so much space, so we could set the width to 8. We use the Bootstrap
naming convention and add an additional class to the column like so:

<div class="col-12 col-md-8">

</div>
For large screen sizes, we want the column to take up even less relative space
and we set the width to 6. We have to add another class to the column:

<div class="col-12 col-md-8 col-xl-6">

</div>
From the example, we have a column that renders a different width based on
a user’s screen size. On extra small and small sized screens, the column has a
width of 12 individual columns. For medium and large sized screens, the
column has a width of 8 individual columns. Lastly, for extra large screens, the
column has a width of 6 individual columns. We could’ve even used up all of
Bootstrap’s provided breakpoints! Read Bootstrap’s grid mix and match
documentation for more information.

Instructions
1.

In index.html there is a single column. Let’s use up all of Bootstrap’s

breakpoints to see how the relative width of this column changes as we hit
different breakpoints.

Currently, our column has a class of col-12 which means that for any screen it
has a width of 12 individual columns.

Add another class to the column so that it has a width of 10 for

the sm breakpoint.
Checkpoint 2 Passed

Hint

Separate the classes using a space. Use the following syntax as reference:

<div class="col-12 col-{breakpoint}-{width}"></div>

Replace {breakpoint} and {width} with actual values.
2.

Follow Bootstrap’s naming convention and add another class to the column
and set the width to 8 for medium-sized screens.
Checkpoint 3 Passed

For large screens have the width of the column be 6.

Checkpoint 4 Passed

Lastly, for extra large screens set the width of the column to 3.

Resize the provided browser to see all the breakpoints in action! Depending
on the size of your screen, you might not hit certain breakpoints.

<!doctype html>

<head>

<link rel="stylesheet" href="style.css" type="text/css">

<title>Combining Classes</title>

</head>

<body>

<div class="col-12 col-sm-10 col-md-8 col-lg-6 col-xl-3">

<h3>Take advantage of breakpoints!</h3>

<p>This column will have different widths based on screen size</p>

</div>

</body>

</html>

LEARN BOOTSTRAP 4: GRID

Bootstrap 4 Grid Review

Great job navigating through Bootstrap’s grid!

Let’s review some key concepts:

 When in doubt, check Bootstrap’s documentation.
 There are a few required links to use Bootstrap (the CSS file and
two <meta> tags)
 Bootstrap 4 has a grid system implemented using flexbox
 The grid system is made of containers, rows, and columns that work
together to make a web page’s layout.
 Containers are needed to implement the grid.
 Containers hold rows which hold columns.
 Bootstrap’s grid follows a 12 column system.
 Bootstrap uses responsive design and is built around breakpoints
related to device screen sizes.
 To manually set the width of a column we have to follow Bootstrap’s
naming convention.
 We can add multiple classes to a column to determine how wide a
column should be on specific breakpoints.

Instructions

If you want to challenge yourself:

 create a 8 x 8 checkerboard.
 nest a layer of rows and columns inside a column.
 recreate the layout in the second exercise.

<!doctype html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<title>Combining Classes</title>

</head>

<body>

<h3>Make Something!</h3>

<p>It's important to practice the skills you've learned in this lesson. That way you'll retain that
information!</p>

</div>

</body>
</html>
https://www.codecademy.com/courses/learn-bootstrap/projects/bootstrap-grid-painting

LEARN BOOTSTRAP
Recreate a painting using Bootstrap's grid
In this project you will practice using the fundamentals of Bootstrap grid by piecing
together a famous painting, namely Piet Mondrian’s Composition II in Red, Blue, and
Yellow:
In index.html is a container with columns that represent various pieces in Composition
II. You can tell which piece is what by the element’s id and the comment inside the
column and with the labeled painting below:
The column’s height and colors, and the container’s height and width, are already
included in style.css. Your goal is to recreate the painting by:
 using the existing container.
 unscrambling the order of the provided columns.
 adjusting the widths of the provided columns.
 adding new rows and additional columns.
 nesting row(s) inside columns.

There will not be step-by-step instructions provided, however, there are hints in the
steps if you get stuck along the way. Good luck and have fun!

Note: You might have to resize the browser to see the entire painting.
The column’s height and colors, and the container’s height and width, are already
included in style.css. Your goal is to recreate the painting by:

 using the existing container.

 unscrambling the order of the provided columns.
 adjusting the widths of the provided columns.
 adding new rows and additional columns.
 nesting row(s) inside columns.

There will not be step-by-step in

LEARN BOOTSTRAP

Recreate a painting using Bootstrap's grid

In this project you will practice using the fundamentals of Bootstrap grid by
piecing together a famous painting, namely Piet Mondrian’s Composition II in
Red, Blue, and Yellow:
In index.html is a container with columns that represent various pieces
in Composition II. You can tell which piece is what by the element’s id and the
comment inside the column and with the labeled painting below:
The column’s height and colors, and the container’s height and width, are
already included in style.css. Your goal is to recreate the painting by:

 using the existing container.

 unscrambling the order of the provided columns.
 adjusting the widths of the provided columns.
 adding new rows and additional columns.
 nesting row(s) inside columns.

There will not be step-by-step instructions provided, however, there are hints
in the steps if you get stuck along the way. Good luck and have fun!

Note: You might have to resize the browser to see the entire painting.

If you get stuck during this project, check out the project walk-through
video which can be found in the help menu.

Tasks

0/4 Complete

Mark the tasks as complete by checking them off

Hints along the way

What about the ordering?

Hint

The initial ordering of the columns is all scrambled! But you can use the
labeled diagram to help you unscramble the pieces.

If you’re more a visual person, you can add some text inside the element.
2.

Thinking about the layout?

Hint
You can think of the layout in a few different ways. One way is to separate the
painting into two rows.

In one row are the pieces A, B, and C.

In the second row are the pieces D, E, F, and G.

Focus on one row before moving on to the other row.

You could also organize it differently but think about the painting in rows and
columns!
3.

More complex layouts?

Hint

You can nest rows inside columns. Those nested rows can also have additional
columns!

For example you could have:

<div class="col">
  <div class="row">
    <div class="col">
       
    </div>
  </div>
  <div class="row">
    <div class="col">
       
    </div>
  </div>
</div>
In the example provided, there is a column with two nested rows. Each row
contains another column. When rendered, the Piece 1 column would rest on
top of the Piece 2 column.
Extra
4.
If you want some additional challenges:

 change up the painting layout entirely.

 render the painting differently based on screen size (use breakpoints).
 add different colors using Bootstrap.
 add some interactivity using Bootstr

LEARN BOOTSTRAP

Recreate a painting using Bootstrap's grid

 using the existing container.

 unscrambling the order of the provided columns.
 adjusting the widths of the provided columns.
 adding new rows and additional columns.
 nesting row(s) inside columns.

There will not be step-by-step instructions provided, however, there are hints
in the steps if you get stuck along the way. Good luck and have fun!

Note: You might have to resize the browser to see the entire painting.

If you get stuck during this project, check out the project walk-through
video which can be found in the help menu.

Tasks

0/4 Complete

Mark the tasks as complete by checking them off

Hints along the way

What about the ordering?

Hint

The initial ordering of the columns is all scrambled! But you can use the
labeled diagram to help you unscramble the pieces.

If you’re more a visual person, you can add some text inside the element.
2.

Thinking about the layout?

Hint
You can think of the layout in a few different ways. One way is to separate the
painting into two rows.

In one row are the pieces A, B, and C.

In the second row are the pieces D, E, F, and G.

Focus on one row before moving on to the other row.

You could also organize it differently but think about the painting in rows and
columns!
3.

More complex layouts?

Hint

You can nest rows inside columns. Those nested rows can also have additional
columns!

For example you could have:

 change up the painting layout entirely.

 render the painting differently based on screen size (use breakpoints).
 add different colors using Bootstrap.
 add some interactivity using Bootstr

<!doctype html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-

to-fit=no">

<link rel="stylesheet" href="style.css" type="text/css">

<title>Composition II in Red, Blue, and Yellow</title>

</head>

<body>

<div id="f" class="col">

</div>

<div id="a" class="col">

</div>

<div id="d" class="col">

</div>

<div id="g" class="col">

</div>

<div id="c" class="col">

</div>

<div id="e" class="col">

</div>
<div id="b" class="col">

</div>

</body>

</html>
Style.css

.container {

width: 500px;

height: 505px;

<!doctype html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-

to-fit=no">

<link rel="stylesheet" href="style.css" type="text/css">

<title>Composition II in Red, Blue, and Yellow</title>

</head>

<body>

</div>

<div id="b" class="col">

</div>

<div id="c" class="col-9">

</div>

<div id="f" class="col">

</div>

<div id="d" class="col">

</div>

<div id="g" class="col">

</div>

<div id="e" class="col">

</div>

</body>

</html>

#a {

border: solid black;

border-width: 0 7.5px 15px 0px;

min-height: 165px;

background: rgb(255, 255, 255);

#b {

border: solid black;

border-width: 15px 7.5px 7.5px 0;

min-height: 190px;

background: rgb(255, 255, 255);

}
#c {

border: solid black;

border-width: 0 0 7.5px 7.5px;

min-height: 355px;

background: rgb(220, 40, 26);

#d {

border: solid black;

border-width: 7.5px 7.5px 0 0;

min-height: 150px;

background: rgb(0, 93, 159);

#e {

border: solid black;

border-width: 7.5px 7.5px 0 7.5px;

min-height: 150px;

background: rgb(255, 255, 255);

}
#f {

border: solid black;

border-width: 7.5px 0 12.5px 7.5px;

min-height: 75px;

background: rgb(255, 255, 255);

#g{

border: solid black;

border-width: 12.5px 0 0 7.5px;

min-height: 75px;

background-color: rgb(242, 224, 122);

}
LEARN BOOTSTRAP 4: UTILITIES AND COMPONENTS

Adding Colors

Bootstrap utility classes provide an element with styling and purpose. Let’s get
acquainted with utility classes by styling the color of our elements.

Let’s say we want to change the text color of our paragraph element from the
default black to blue. We would add a class of "text-primary", like so:

<p class="text-primary">This text is blue!</p>

According to the documentation, the "text" portion of the class targets the
element’s text styling. Appending "primary" after "text" changes the text color
to blue. The name of the class, "text-primary", also signifies that
this <p> element conveys information that appears first, i.e, is the primary text.

We could have used any of the classes provided in Bootstrap’s color

example to change the text color of our <p> element.

Similarly, we can also change the background color:

<div class="bg-success">
Green! This signifies success!
</div>
In the example above, we’ve assigned the <div> element a class of "bg-
success". The "bg" part references the element’s background
and "success" changes the background color to green. We can also tell from
the name of the class that this <div> element is meant to be used when
something happened/worked. We can find more background utility classes
at Bootstrap’s background color examples.

To get the full range of what we can do with Bootstrap’s color utility classes,
check out Bootstrap’s colors documentation. Now, let’s add some color to our
own examples.

Instructions

1.
Change the text color of the <p> element to yellow by assigning its class a
value of "text-warning".
Checkpoint 2 Passed

Hint

You can check Bootstrap’s color example for more information.

Under the <p> element, there is a <div> element. Change the background color

of the <div> element to teal by adding a class of "bg-info".
Checkpoint 3 Passed

Hint

You can check Bootstrap’s Color example for more information.

Locate the last unstyled <div> element and change the background color to

green and the text color to white.

You’ll need to browse Bootstrap’s colors documentation to know which two

classes to add!
Checkpoint 4 Passed

Hint

To change the background color to green we need to assign the <div>‘s class a

value of "bg-success".

<div class="bg-success">
...
</div>
Then to make the text white, add another class of "text-white":

<div class="bg-success text-white">

...
</div>
Check out Bootstrap’s Colors documentation for more information.

Community Forums

Still have questions? View this exercise's thread in the Codecademy Forums.

<head>

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<title>Adding Bootstrap Colors</title>

</head>

<body>

Change the text color in this paragraph to yellow.

</p>

Change the background in this div to teal.

</div>

<br>

<div class="bg-success text-white">

Alright, we want to have a green background AND change the text color to white.

</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>

</body>

</html>

LEARN BOOTSTRAP 4: UTILITIES AND COMPONENTS

Styling Text

If we want to style and format text, we can use Bootstrap’s text utility classes.

For instance, if we want our text to be bold, we could add a class of "font-
weight-bold" like so:

<p class="font-weight-bold">
This rendered text is bold.
</p>
We can also combine Bootstrap classes for additional styling. Let’s say we
wanted our text to also be uppercased. We would add "text-uppercase" to the
class attribute:

<p class="font-weight-bold text-uppercase">

This rendered text is both bold and uppercased.
</p>
Let’s make use of these text utility classes!

Instructions

In the <body>, there is an unstyled <p> that we can practice styling on.

Let’s first make the <p>‘s text entirely uppercased by assigning it a class

of "text-uppercase".
Checkpoint 2 Passed

Hint

Since you want to make all the text in uppercase, you want to transform the
text, so look at: Bootstrap’s text transform documentation.
2.

Let’s keep styling our text! This time, add a utility class to the <p> and make the
text italicized.

We should consult Bootstrap’s font weight and italics documentation for what

utility class to add.
3.

We should add one more class to practice our documentation reading skills.

Browse Bootstrap’s documentation to find the utility class that will right align
the <p> element’s text.
Hint

To give the text an alignment check out: Bootstrap’s text alignment

documentation.
Community Forums

<head>

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<title>Bootstrap: Styling Text</title>

</head>

<body>

<p class="font-weight-bold text-uppercase">

First, assign a class to style this text so that it is entirely uppercased.

After you've assigned the appropriate class to make this text uppercased, assign another class to make
this text italicized.

Finally, browse Bootstrap's documentation to right align this text.

</p>

</html>

<p class="font-weight-bold text-uppercase font-italic">
    First, assign a class to style this text so that it is entirely uppercased.
    After you've assigned the appropriate class to make this text uppercased, as
sign another class to make this text italicized.
    Finally, browse Bootstrap's documentation to right align this text.
  </p>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<title>Bootstrap: Styling Text</title>

</head>

<body>

<p class="text-uppercase font-italic text-right">

First, assign a class to style this text so that it is entirely uppercased.

After you've assigned the appropriate class to make this text uppercased, assign another class to make
this text italicized.

Finally, browse Bootstrap's documentation to right align this text.

</p>

</body>

</html>

Learn Bootstrap 4: Utilities and Components: Styling Text

Narrative and Instructions

Learn

LEARN BOOTSTRAP 4: UTILITIES AND COMPONENTS

Styling Text

If we want to style and format text, we can use Bootstrap’s text utility classes.

For instance, if we want our text to be bold, we could add a class of "font-weight-bold" like so:

<p class="font-weight-bold">
This rendered text is bold.
</p>
We can also combine Bootstrap classes for additional styling. Let’s say we wanted our text to
also be uppercased. We would add "text-uppercase" to the class attribute:

<p class="font-weight-bold text-uppercase">

This rendered text is both bold and uppercased.
</p>
Let’s make use of these text utility classes!

Instructions

1.
In the <body>, there is an unstyled <p> that we can practice styling on.

Let’s first make the <p>‘s text entirely uppercased by assigning it a class of "text-uppercase".
Checkpoint 2 Passed

Hint

Since you want to make all the text in uppercase, you want to transform the text, so look
at: Bootstrap’s text transform documentation.
2.

Let’s keep styling our text! This time, add a utility class to the <p> and make the text italicized.

We should consult Bootstrap’s font weight and italics documentation for what utility class to
add.
Checkpoint 3 Passed

We should add one more class to practice our documentation reading skills.

Browse Bootstrap’s documentation to find the utility class that will right align the <p> element’s
text.
Checkpoint 4 Passed

Hint

To give the text an alignment check out: Bootstrap’s text alignment documentation.

LEARN BOOTSTRAP 4: UTILITIES AND COMPONENTS

Element Positioning

When considering the layout of a webpage, we have to think about how to

position our elements. Conveniently, Bootstrap provides positioning utility
classes.

We can apply CSS positioning styling by assigning an element a utility class

found in Bootstrap’s positioning documentation. It would also be worth
knowing how these position are rendered on a webpage.

For example, if we want an element that is fixed to the top, we can apply
a "fixed-top" class:

<div class="fixed-top">
This div will be fixed at the top of the screen.
</div>
There are a few other positioning utility classes, so let’s explore how to use
them!

Instructions

In index.html, there is an <h1> element that we want to stick to the top. Look

up what class to add to the <h1> at Bootstrap’s positioning documentation.
Checkpoint 2 Passed

Hint

Look over Bootstrap’s sticky top example to apply the sticky top utility class.
2.

Now the <h1> element should stick to the top even after we’ve scrolled past it.

Let’s also fix the <footer> to the bottom of the page using a Bootstrap utility
class. You’ll have to scroll to the bottom of index.html to find
the <footer> element.
Check the hint for documentation help.
Checkpoint 3 Passed

Hint

To apply Bootstrap’s fixed bottom utility class, take a look at: Bootstrap’s fixed
bottom example.

LEARN BOOTSTRAP 4: UTILITIES AND COMPONENTS

The Navigation Component

In addition to useful utility classes, Bootstrap offers a collection of components,

such as a navbar, buttons, a carousel/slideshow for images, and much more!
Each Bootstrap component serves a distinct purpose and we can find
examples and code snippets directly from the documentation — then, we can
tweak the components to our personal needs.

The first component we’ll investigate is the navigation (nav) component which

offers our users a collection of links. The nav component is slightly different
from a navbar component. The nav component is often specific to one or a
few webpages, whereas a navbar often appears on all the pages of a website.

There are many ways to create a basic nav component. Here’s one example:

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link" href="#">First Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Second Link</a>
  </li>
</ul>
In the above example:

 We created a navigation component using an <ul> that has a class

of "nav".
 The <ul> has nested <li> elements which each have a class of "nav-item".
 Inside each <li> is an <a> which has a class of "nav-link".
Alternatively, for a simpler nav component of only links:

<nav class="nav">
<a class="nav-link" href="#">First Link</a>
<a class="nav-link" href="#">Second Link</a>
</nav>
Notice that we still have the parent element with a class of "nav" and the
children elements with a class of "nav-link". Both examples render the same
links, but we might choose one example over the other depending on how we
want our layout to look.

Read through Bootstrap’s nav documentation for more information.

Instructions

We’ll begin the process of piecing together a gardening website using various
Bootstrap components.

Let’s utilize the navigation component we learned about and transform the
current <nav>.

Assign the <nav> a class of "nav".

Checkpoint 2 Passed

Apply a class of "nav-link" to each of the <a> elements to provide some

Bootstrap styling.
Checkpoint 3 Passed

Hint

The ordering of the element’s attributes doesn’t matter. You can add the class
before or after the href.
3.

While we’re at it, let’s also center the links.

Find out what class to add the nav component using Bootstrap’s Nav
documentation.
Checkpoint 4 Passed

Hint

Bootstrap’s horizontal alignment example might be a helpful resource.

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<title>Gloria's Gardening</title>

</head>

<body>

<nav class="nav justify-content-center">

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

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

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

</nav>

</div>

</div>

</body>

</html>
LEARN BOOTSTRAP 4: UTILITIES AND COMPONENTS

The Button Component

Another common component we see on websites are buttons. Buttons

represent a clickable object that does something else in return like navigating
to a different page, submitting a form, or opening a popup, just to name a
few.

By default, the <button> element doesn’t have much styling. But, with

Bootstrap we can make button components that have more styling. Here’s an
example from Bootstrap’s button documentation :

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

The example above will render a red button that has the text Danger inside the
button:

 It has a type of "button".
 It has two classes, "btn" and "btn-danger".
o The "btn" class provides Bootstrap’s default button styling.
o The "btn-danger" turns the button red and conveys the purpose of
the button, i.e. clicking this button might not be safe!
Visit Bootstrap’s button documentation for a comprehensive list of how to
create and use button components.
We’ll add some interactivity and make the buttons do something in the
following exercises. For now, let’s practice creating Bootstrap button
components.

Instructions

For the Click here for more info button, it already has a class of "btn". We
want to add a class to give this button a teal color.

According to the Bootstrap’s button examples we need to add the class "btn-

info" to make it teal.
Checkpoint 2 Passed

Let’s turn the Plant now button into a green button.

Follow the Bootstrap’s button example and add the classes, "btn" and "btn-

success" to the <button> element.
Checkpoint 3 Passed

Now use your documentation reading skills and make the This button acts
like a link button resemble an actual link.

Look over Bootstrap’s button example for what two classes to add.

Checkpoint 4 Passed

Hint

From the Bootstrap’s button examples:

<button type="button" class="btn btn-link">Link</button>

We should add the classes "btn" and "btn-link" to make the button resemble
a link.

<!DOCTYPE html>

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

crossorigin="anonymous">

<title>Gloria's Gardening</title>

</head>

<body>

<button class="btn btn-info">

Click Here for more info

</button>

<button class="btn btn-success">

Plant now

</button>

<button type="button" class="btn btn-link">Link</button>

</div>

<nav class="nav justify-content-center">

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

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

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

</nav>

</div>

</div>

crossorigin="anonymous"></script>

crossorigin="anonymous"></script>

</body>

</html>

LEARN BOOTSTRAP 4: UTILITIES AND COMPONENTS

Creating a Navbar

Let’s combine our knowledge of collapse, buttons, and the nav component to
make a responsive navbar! We often find navbars at the top of websites and
we can use a navbar to quickly navigate to useful/important pages on the
website.

Below is an example from Bootstrap’s Navbar documentation that we’ve

modified:

<nav class="navbar navbar-expand-lg navbar-light bg-light">

  <a class="navbar-brand" href="#">Brand Goes Here</a>
  <button class="navbar-toggler" type="button" data-
toggle="collapse" data-target="#navbarSupportedContent" aria-
controls="navbarSupportedContent" aria-expanded="false" aria-
label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

<div class="collapse navbar-collapse"

id="navbarSupportedContent">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Current Page Link <span
class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Another Page Link</a>
      </li>
    </ul>
  </div>
</nav>
There’s a lot going on, so let’s break it down before we use it in our own code:

 We have a <nav> element with multiple classes:

o "navbar" makes this <nav> a Bootstrap navbar.
o "navbar-expand-lg" renders the <div class="collapse navbar-
collapse"> element on large (and extra large screens).
The "lg" portion is called a breakpoint and refers to screen size
widths. We can append one of any breakpoint value at the end,
i.e. "sm", "md", "lg", or "xl".
o "navbar-light" assigns a color scheme to the navbar.
o "bg-light" assigns a background color to the navbar.
 Inside the <nav> is an <a> with a class of "navbar-brand" which can be an
image or text that represents the brand/logo of the website.
 There is a <button> that renders when a user’s screen size is smaller than
the breakpoint value in "navbar-expand-{breakpoint}" and toggles the
visibility of the navbar menu to save space.
o If the user’s screen size matches the breakpoint (or is bigger), then
the <div>, with the nav component and its links, renders instead of
the button.
 The <ul> and the nested <li> make up a nav component.
 The first <li> has a class of "active" which highlights the user’s current
page.

Instructions

We have some HTML in place for a navbar but we have to add some classes to
make it a responsive Bootstrap navbar component.

Use the comments to locate the navbar component. The <nav> already has two
classes for styling. You will have to add two more
classes: "navbar" and "navbar-expand-sm".
Checkpoint 2 Passed

Hint

The <nav> should have both classes like so:

<nav class="navbar-light bg-light navbar navbar-expand-sm">

</nav>
The layout of this navbar will change based on the "sm" breakpoint.
2.

Under the opening <nav> tag, add an <a> element with a class of "navbar-

brand".

Then copy and paste the following <img> to nest inside the <a> element:

<img src="https://content.codecademy.com/courses/learn-
bootstrap-components/logo.png" alt="Gloria's Gardening Logo"
height="30">
Checkpoint 3 Passed

Hint

You can provide an href="#" attribute if you want but it’s not necessary to pass
the checkpoint.
3.
The <button> and the collapsible <div> is already included, but we still need to
make the <ul> and accompanying <li> and <a> elements into a nav
component.

 Assign the <ul> a class of "navbar-nav"

 Assign all the <li> elements a class of "nav-item"
 Assign all the <a> elements a class of "nav-link"
Checkpoint 4 Passed

Hint

The HTML elements already exist, you have to assign the correct class to each
element.
4.

Time to highlight the current page using the "active" class.

Add the "active" class to the first <li> element.

Notice after you add the change and run your code that the "Home" text has a
subtle styling difference compared to the other two links in the navbar.
Checkpoint 5 Passed

Hint

If you have a small screen, you may have to click on the button on the navbar
to view the links.

Community Forums

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

crossorigin="anonymous">

<title>Gloria's Gardening</title>

</head>

<body>

<nav class="navbar-light bg-light navbar navbar-expand-sm ">

<a class="navbar-brand" href="#">

</a>

<button class="navbar-toggler" type="button" data-toggle="collapse" data-

target="#navbarSupportedContent"

aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">

<li class="nav-item active">

<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>

</li>
<li class="nav-item">

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

</li>

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

</li>

</ul>

</div>

</nav>

<div class="col text-center">

<a aria-expanded="false" aria-controls="seedSpecial"

data-toggle="collapse" href="#seedSpecial">

Gearing to Grow?

</a>

<p class="collapse" id="seedSpecial">Use promo code "GGarden" for additional 15% off your entire
purchase!

</p>

</div>

<nav class="nav justify-content-center">

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

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

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

</nav>

</div>

</div>

crossorigin="anonymous"></script>

crossorigin="anonymous"></script>

crossorigin="anonymous"></script>

</body>

</html>
LEARN BOOTSTRAP 4: UTILITIES AND COMPONENTS

The Jumbotron Component

In arenas and stadiums, there are giant screens called jumbotrons which

display the main event for everyone in the crowd to see. Bootstrap also offers
a jumbotron component that serves a similar function and makes content
stand out.

Here’s an example of a basic jumbotron that only contains text:

<div class="jumbotron">
<h1>Wow this stands out!</h1>
</div>
In the example above we included an <h1> element, but we could add images
or a variety of Bootstrap components. Look over Bootstrap’s jumbotron
documentation for more elaborate examples.

Instructions

Use the comments to locate where you’ll put the jumbotron component.

Inside the column of that row, add a <div> and assign it a class of "jumbotron".
Checkpoint 2 Passed

2.
Inside the jumbotron, add some content relevant to Gloria’s Gardening! It can
be anything you want, just make sure it’s not blank!
Checkpoint 3 Passed

Hint

Add some content inside the jumbotron. You can add text, or an image, or
both, see what you can do!

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<title>Gloria's Gardening</title>

</head>

<body>

<nav class="navbar-light bg-light navbar navbar-expand-sm ">

<a class="navbar-brand" href="#">

</a>

<button class="navbar-toggler" type="button" data-toggle="collapse" data-

target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">

<li class="nav-item active">

<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>

</li>

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

</li>

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

</li>

</ul>

</div>

</nav>

<div class="col text-center">

<a aria-expanded="false" aria-controls="seedSpecial" data-toggle="collapse" href="#seedSpecial">

Gearing to Grow?

</a>

<p class="collapse" id="seedSpecial">Use promo code "GGarden" for additional 15% off your entire
purchase!

</p>

</div>

<h1 class="text-center">Welcome to Gloria's Gardening!</h1>

<hr>

<p>Got a passion for planting? A need for seeds? A desire to

dig? Well, then you've come to the right place. </p>

<p>We've got a wide selection of plants, seeds, tips to transform your garden.</p>

</div>

<nav class="nav justify-content-center">

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

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

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

</nav>

</div>

</div>

crossorigin="anonymous"></script>

crossorigin="anonymous"></script>

crossorigin="anonymous"></script>

</body>

</html>
LEARN BOOTSTRAP 4: UTILITIES AND COMPONENTS

Adding a Card

Bootstrap also has a card component that serves as a container for smaller customized content.
Card components are often grouped together to display a collection of similar content in
manageable chunks. We can draw a comparison of the card component to playing cards in deck
— in both cases, there are cards grouped together and each one contains something different.

Below is an example modified from Bootstrap’s card documentation:

<div class="card">
  <img class="card-img-top" src="placeholder.jpg" alt="card example
image">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Card description goes here.</p>
    <a href="#" class="card-link">Link to somewhere.</a>
  </div>
</div>
Let’s highlight a few key points from the example:

 To make a card component we need to assign a class of "card" to an element.

 Inside the card component, there are two children, an <img> and a <div> element.
 The <img> has a class of "card-img-top" which adds styling and formatting to the image.
 The <div> has a class of "card-body" which adds a section with default padding.
 The content inside the card body all have classes with "card-{value}" which adds styling to
these elements specific for Bootstrap cards.
 By default, this card will take up the entire width of its parent element.

Let’s add some of our own cards, remember to check Bootstrap’s card documentation for more
customizations!

Instructions

Under the jumbotron is a row with 2 nested columns set up for our card components.

Inside the first column, add a <div> and assign it a class of "card". We’ll be making a garden
related card for the webpage.
Checkpoint 2 Passed

Hint

Look for the comment Add your first card below and add your code inside that column.
2.
Use the Bootstrap’s card documentation to add a header.

The text in the header should read Planting in the spring. Check the hint if you need help
navigating the documentation:
Checkpoint 3 Passed

Hint

Bootstrap’s card header and footer section has an example for how to add a header.

Your code might look like:

<div class="card">
  <div class="card-header">
    Planting in the spring
  </div>
</div>
3.

Below the header add an image that renders at the top of the card.

Use the image from this link:

https://content.codecademy.com/courses/learn-bootstrap-components/
flowers.png
Also, remember to assign the appropriate class.
Checkpoint 4 Passed

Hint

Bootstrap’s card image section has an example for how to add an image.

Your code might look like:

Time to add more text to this card:

Under the image, add a <div> with a class of "card-body".

Inside the <div> you just made, add <p> with a class of "card-text". The text should read It's
almost spring time, get your seeds ready for planting!
Checkpoint 5 Passed
Hint

Browse Bootstrap’s card titles, text, and links section for a more detailed example.

At this point, your code might look like:

<div class="card">
  <div class="card-header">
    Planting in the Spring
  </div>
  <img class="card-img-top"
src="https://content.codecademy.com/courses/learn-bootstrap-
components/flowers.png" alt="planting in the spring">
  <div class="card-body">
    <p class="card-text">
      It's almost Spring time, get your seeds ready for planting!
    </p>
  </div>
</div>
5.

Great job adding a card to the page. Now, add your own customized card to the 2nd column!

If you want to add another image, feel free to

use: https://content.codecademy.com/courses/learn-bootstrap-components/tropical.png .
Checkpoint 6 Passed

Stuck? Get a hint

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<title>Gloria's Gardening</title>
</head>

<body>

<nav class="navbar-light bg-light navbar navbar-expand-sm ">

<a class="navbar-brand" href="#">

</a>

<button class="navbar-toggler" type="button" data-toggle="collapse" data-

target="#navbarSupportedContent"

aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">

<li class="nav-item active">

<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>

</li>

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

</li>

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

</li>
</ul>

</div>

</nav>

<div class="col text-center">

<a aria-expanded="false" aria-controls="seedSpecial" data-toggle="collapse" href="#seedSpecial">

Gearing to Grow?

</a>

<p class="collapse" id="seedSpecial">Use promo code "GGarden" for additional 15% off your entire
purchase!

</p>

</div>

<div class="jumbotron p-3">

<h1 class="text-center">Welcome to Gloria's Gardening!</h1>

<hr>
<p>Got a passion for planting? A need for seeds? A desire to dig? Well, then you've come to the
right place.

</p>

<p>We've got a wide selection of plants, seeds, tips to transform your garden.</p>

</div>

Planting in the Spring

</div>

<img class="card-img-top" src="https://content.codecademy.com/courses/learn-bootstrap-

components/flowers.png" alt="flowers in bloom">

<p class=" card-text">

It's almost spring time, get your seeds ready for planting!

</p>

</div>

</div>
<div class="col">

<div class="card h-100">

Interested in exotic flowers?

</div>

<img class="card-img-top" src="https://content.codecademy.com/courses/learn-bootstrap-

components/tropical.png" alt="tropical flowers">

<p class=" card-text">

If you have a greenhouse or just love these bright colors. Try planting these tropical flowers!

</p>

</div>

<nav class="nav justify-content-center">

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

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

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

</nav>

</div>

</div>

crossorigin="anonymous"></script>

crossorigin="anonymous"></script>

crossorigin="anonymous"></script>

</body>

</html>
<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<title>Gloria's Gardening</title>

</head>

<body>

<nav class="navbar-light bg-light navbar navbar-expand-sm ">

<a class="navbar-brand" href="#">

</a>

<button class="navbar-toggler" type="button" data-toggle="collapse" data-

target="#navbarSupportedContent"

aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">

<li class="nav-item active">

<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>

</li>

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

</li>

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

</li>

</ul>

</div>

</nav>

<div class="col text-center">

<a aria-expanded="false" aria-controls="seedSpecial" data-toggle="collapse" href="#seedSpecial">

Gearing to Grow?

</a>

<p class="collapse" id="seedSpecial">Use promo code "GGarden" for additional 15% off your entire
purchase!

</p>

</div>
</div>

<div class="jumbotron p-3">

<h1 class="text-center">Welcome to Gloria's Gardening!</h1>

<hr>

<p>Got a passion for planting? A need for seeds? A desire to dig? Well, then you've come to the
right place.

</p>

<p>We've got a wide selection of plants, seeds, tips to transform your garden.</p>

</div>

Planting in the Spring

</div>
<img class="card-img-top" src="https://content.codecademy.com/courses/learn-bootstrap-
components/flowers.png" alt="flowers in bloom">

<p class=" card-text">

It's almost spring time, get your seeds ready for planting!

</p>

</div>

<div class="card h-100">

Interested in exotic flowers?

</div>

<img class="card-img-top" src="https://content.codecademy.com/courses/learn-bootstrap-

components/tropical.png" alt="tropical flowers">

<p class=" card-text">

If you have a greenhouse or just love these bright colors. Try planting these tropical flowers!

</p>

</div>

</div>

<nav class="nav justify-content-center">

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

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

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

</nav>

</div>

</div>

crossorigin="anonymous"></script>

crossorigin="anonymous"></script>

crossorigin="anonymous"></script>

</body>
</html>
LEARN BOOTSTRAP 4: UTILITIES AND COMPONENTS

The Carousel Component

There are times that we want to showcase a group of images but not want to
have our users scroll through one picture on top of another. Instead, we could
fit our images into a slideshow using Bootstrap’s carousel component.

Bootstrap has many carousel examples but let’s go through a basic example

together:

<div id="carouselExampleSlidesOnly" class="carousel slide"

data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="example_slide_1.png"
alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="example_slide_2.png"
alt="Second slide">
    </div>
  </div>
</div>
The example above will render a slideshow that loops through two images,
displaying one at a time. In the actual code:

The parent <div> element has an id of "carouselExampleSlidesOnly", two


classes "carousel" and "slide", and the attribute data-ride="carousel".
o The id is used later when we want to add controls to click between
slides.
o The classes provide the styling and formatting.
o The data-ride attribute provides the interactivity and slide
transitions.
 We also have a nested <div class="carousel-inner"> element that contains
other <div> elements with images.
 Nested inside the 2nd <div> is yet another <div> with a class of "carousel-
item" and "active" (only one image needs the active class, if none have
active, no images are shown).
 Each <div> with .carousel-item has a nested <img> element which have the
usual src and alt attributes.
o The <img> elements use two utility classes"d-block" sets its display
as block and the "w-100" is to take up 100% of the width.
Now, let’s implement a carousel with arrows that control the slideshow.

Instructions

The HTML skeleton of a carousel is already in index.html but you need to add

the appropriate class values to the <div> elements. The parent <div> element
should also have a data-ride attribute with the appropriate value.

Look over Bootstrap’s slides only example for reference.

Stuck? Get a hint

2.
Now that the carousel is in place, let’s add some controls for users to click
through the slides.

You have to use Bootstrap’s with controls example to implement this feature.

Check out the hint for additional help!

LEARN BOOTSTRAP 4: UTILITIES AND COMPONENTS

The Carousel Component

There are times that we want to showcase a group of images but not want to have our users scroll
through one picture on top of another. Instead, we could fit our images into a slideshow using
Bootstrap’s carousel component.

Bootstrap has many carousel examples but let’s go through a basic example together:

<div id="carouselExampleSlidesOnly" class="carousel slide" data-

ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="example_slide_1.png" alt="First
slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="example_slide_2.png" alt="Second
slide">
    </div>
  </div>
</div>
The example above will render a slideshow that loops through two images, displaying one at a
time. In the actual code:

 The parent <div> element has an id of "carouselExampleSlidesOnly", two

classes "carousel" and "slide", and the attribute data-ride="carousel".
o The id is used later when we want to add controls to click between slides.
o The classes provide the styling and formatting.
o The data-ride attribute provides the interactivity and slide transitions.
 We also have a nested <div class="carousel-inner"> element that contains
other <div> elements with images.
 Nested inside the 2nd <div> is yet another <div> with a class of "carousel-
item" and "active" (only one image needs the active class, if none have active, no images are
shown).
 Each <div> with .carousel-item has a nested <img> element which have the
usual src and alt attributes.
o The <img> elements use two utility classes"d-block" sets its display as block and the "w-
100" is to take up 100% of the width.
Now, let’s implement a carousel with arrows that control the slideshow.

Instructions

The HTML skeleton of a carousel is already in index.html but you need to add the appropriate
class values to the <div> elements. The parent <div> element should also have a data-
ride attribute with the appropriate value.

Look over Bootstrap’s slides only example for reference.

Checkpoint 2 Passed

Hint

Observe the example’s classes found in the documentation.

Remember to add the data-ride="carousel" attribute to the <div> with id "gardeningCarousel".

Also, add the class "active" to a <div> that has a class of "carousel-item", otherwise, the images
won’t appear!
2.

Now that the carousel is in place, let’s add some controls for users to click through the slides.

You have to use Bootstrap’s with controls example to implement this feature. Check out the hint
for additional help!
Checkpoint 3 Passed

Hint

You can copy and paste both <a> elements inside the carousel’s parent <div>. However,
remember to change the value of the href to match the value of the parent <div>‘s id.

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<title>Gloria's Gardening</title>

</head>

<body>

<nav class="navbar-light bg-light navbar navbar-expand-sm ">

<a class="navbar-brand" href="#">

</a>

<button class="navbar-toggler" type="button" data-toggle="collapse" data-

target="#navbarSupportedContent"

aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">

<li class="nav-item active">

<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>

</li>

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

</li>

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

</li>

</ul>

</div>

</nav>

<div class="col text-center">

<a aria-expanded="false" aria-controls="seedSpecial" data-toggle="collapse" href="#seedSpecial">

Gearing to Grow?

</a>

<p class="collapse" id="seedSpecial">Use promo code "GGarden" for additional 15% off your entire
purchase!

</p>

</div>

<h1 class="text-center">Welcome to Gloria's Gardening!</h1>

<hr>

<p>Got a passion for planting? A need for seeds? A desire to dig? Well, then you've come to the
right place.

</p>

<p>We've got a wide selection of plants, seeds, tips to transform your garden.</p>

</div>

<div class="card h-100" >

Planting in the Spring

</div>

<img class="card-img-top" src="https://content.codecademy.com/courses/learn-bootstrap-

components/summer1.png" alt="flowers in bloom">

<p class=" card-text">

It's almost Spring time, get your seeds ready for planting!

</p>

</div>
</div>

</div>

<div class="card h-100">

Interested in exotic flowers?

</div>

<img class="card-img-top" src="https://content.codecademy.com/courses/learn-bootstrap-

components/tropical.png" alt="tropical flowers">

<p class=" card-text">

If you have a greenhouse or just love these bright colors. Try planting these tropical flowers!

</p>

</div>

<br>

<div id="gardeningAlbum" class="carousel slide" data-ride="carousel">

<div class="carousel-item active">

</div>

</div>

</div>

</div>

<a class="carousel-control-prev" href="#gardeningAlbum" role="button" data-slide="prev">

<span class="carousel-control-prev-icon" aria-hidden="true"></span>

<span class="sr-only">Previous</span>

</a>

<a class="carousel-control-next" href="#gardeningAlbum" role="button" data-slide="next">

</a>

</div>

</div>

<nav class="nav justify-content-center">

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

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

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

</nav>

</div>

</div>

crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"

crossorigin="anonymous"></script>

crossorigin="anonymous"></script>

</body>

</html>

LEARN BOOTSTRAP 4: UTILITIES AND COMPONENTS

Review
Go ahead and give yourself that well-deserved pat on the back, you’ve worked
your way through Bootstrap utility classes and components!

Remember, it is extremely important to check Bootstrap documentation for

instructions on component implementation!

Because we checked documentation we were able to use:

 animations and interactivity that requires the addition of Bootstrap’s

JavaScript files.
 utility classes which affect the styling and position of elements.
 the nav component provides default Bootstrap styling to links.
 the responsive navbar component to quickly navigate between
webpages.
 the jumbotron component which prominently displays an image or text.
 the card component that acts as a stylized content container.
 collapse to toggle component visibility.
 the carousel component to create a slideshow which displays images or
text.

Now, go forth and see what else you can bootstrap to your site!

Instructions
If you want to challenge yourself:

 Add different Bootstrap components not covered in this lesson.

 Explore Bootstrap utility classes not covered in this lesson.
 Make the webpage mobile friendly.
 Create the other pages needed for Gloria’s Gardening.
o Link to the appropriate pages.

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<title>Gloria's Gardening</title>

</head>

<body>

<nav class="navbar-light bg-light navbar navbar-expand-sm ">

<a class="navbar-brand" href="#">

</a>

<button class="navbar-toggler" type="button" data-toggle="collapse" data-

target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">

<li class="nav-item active">

<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>

</li>

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

</li>

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

</li>

</ul>

</div>

</nav>

<div class="col text-center">

Gearing to Grow?

</a>

<p class="collapse" id="seedSpecial">Use promo code "GGarden" for additional 15% off your entire
purchase!

</p>

</div>

<div class="jumbotron p-3">

<h1 class="text-center">Welcome to Gloria's Gardening!</h1>

<hr>

<p>

Got a passion for planting? A need for seeds? A desire to dig? Well, then you've come to the right
place.

</p>

<p>

We've got a wide selection of plants, seeds, tips to transform your garden.

</p>

</div>

</div>

<div class="card h-100">

Planting in the Spring

</div>

<img class="card-img-top" src="https://content.codecademy.com/courses/learn-bootstrap-

components/summer1.png"

alt="flowers in bloom">

<p class=" card-text">

It's almost Spring time, get your seeds ready for planting!

</p>

</div>

<div class="card h-100">

Interested in exotic flowers?

</div>

<img class="card-img-top" src="https://content.codecademy.com/courses/learn-bootstrap-

components/tropical.png"
alt="tropical flowers">

<p class=" card-text">

If you have a greenhouse or just love these bright colors. Try planting these tropical flowers!

</p>

</div>

<br>

<div id="gardeningAlbum" class="carousel slide" data-ride="carousel">

<div class="carousel-item active">

<img src="https://content.codecademy.com/courses/learn-bootstrap-components/garden-
slide1.jpg"

class="d-block w-100" alt="butterfly in field">

</div>

<img src="https://content.codecademy.com/courses/learn-bootstrap-components/garden-
slide2.jpg"

class="d-block w-100" alt="colorful tulips">

</div>

<img src="https://content.codecademy.com/courses/learn-bootstrap-components/garden-
slide3.jpg"

class="d-block w-100" alt="inside of a greenhouse">

</div>

<a class="carousel-control-prev" href="#gardeningAlbum" role="button" data-slide="prev">

<span class="carousel-control-prev-icon" aria-hidden="true"></span>

<span class="sr-only">Previous</span>

</a>

<a class="carousel-control-next" href="#gardeningAlbum" role="button" data-slide="next">

<span class="carousel-control-next-icon" aria-hidden="true"></span>

</a>

</div>

<nav class="nav justify-content-center">

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

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

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

</nav>

</div>

</div>

</body>

</html>
LEARN BOOTSTRAP

Adhoc

Let’s make full use of our Bootstrap knowledge and its accompanying documentation to
create a website for Adhoc, an office administration website. Check out Adhoc’s design
spec for more information. You also have the option of not following the steps/design
spec and creating a website of your own design!

We’ll be using the following image assets:

 Adhoc logo.
 jumbotron background.
 experienced icon.
 fun icon.
 smart icon.
 picture of Brian M. the CEO.
 picture of Andy C. the CFO.
 picture of Angela W. the COO.
 picture of Amie S. the CTO.

Be ready to browse Bootstrap’s documentation. The steps provided will explain what

you need to do, but it’s up to you to find out how to implement it. If you’re have
difficulty locating the correct resource, check the hint for some helpful links.

<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
</nav>

<nav class="navbar navbar-light bg-light">
<span class="navbar-brand mb-0 h1">Navbar</span>
</nav>

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Adhoc</title>

</head>

<body>

<nav class="navbar navbar-expand-lg navbar-light bg-light">

<a class="navbar-brand" href="#"><img

src="https://content.codecademy.com/courses/learn-bootstrap-4/adhoc/logo.png"></
a>

<button class="navbar-toggler" type="button" data-toggle="collapse" data-

target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-
expanded="false" aria-label="Toggle navigation">

</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">

<ul class="navbar-nav mr-auto">

<li class="nav-item active">

<a class="nav-link" href="#">Home <span
class="sr-only">(current)</span></a>

</li>

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

</li>

<li class="nav-item dropdown">

<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"

data-toggle="dropdown"

aria-haspopup="true" aria-expanded="false">

Dropdown

</a>

<div class="dropdown-menu" aria-labelledby="navbarDropdown">

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

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

<a class="dropdown-item" href="#">Something else here</a>

</div>

</li>

<a class="nav-link disabled" href="#" tabindex="-1"

aria-disabled="true">Disabled</a>

</li>
</ul>

<form class="form-inline my-2 my-lg-0">

<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-

label="Search">

<button class="btn btn-outline-success my-2 my-sm-0"

type="submit">Search</button>

</form>

</div>

</nav>

<div class="jumbotron jumbotron-fluid"

style="background:url(https://content.codecademy.com/courses/learn-bootstrap-4/
adhoc/jumbotron.png) no-repeat; background-size: cover;">

</div>

<h2>"Thanks to Adhoc we now have beautiful and faithful service every

day. Our customers are happy and engagement has drastically increased. Highly
recommend!"</h2>

<p>-Dave Ellavar, <span>Academy of Code</span></p>

</div>

<hr>

<div>

<h1 class="display-3">Big Text Here</h1>

<p class="text-danger">smaller text</p>

</div>

<h2 class="display-2">Why Adhoc?</h2>

</div>

</div>

</div>

</div>

<h2>Meet the Team</h2>

</div>

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">

<div class="carousel-item active">

<img src="..." class="d-block w-100" alt="...">

</div>

<img src="..." class="d-block w-100" alt="...">

</div>

<img src="..." class="d-block w-100" alt="...">

</div>

<img src="..." class="d-block w-100" alt="...">

</div>

<a class="carousel-control-prev" href="#carouselExampleControls" role="button"

data-slide="prev">

<span class="carousel-control-prev-icon" aria-hidden="true"></span>

<span class="sr-only">Previous</span>

</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button"
data-slide="next">

<span class="carousel-control-next-icon" aria-hidden="true"></span>

</a>

</div>

</html>

LEARN BOOTSTRAP

Adhoc

Let’s make full use of our Bootstrap knowledge and its accompanying
documentation to create a website for Adhoc, an office administration
website. Check out Adhoc’s design spec for more information. You also have
the option of not following the steps/design spec and creating a website of
your own design!

We’ll be using the following image assets:

Be ready to browse Bootstrap’s documentation. The steps provided will

explain what you need to do, but it’s up to you to find out how to implement
it. If you’re have difficulty locating the correct resource, check the hint for
some helpful links.

Remember, as you code along, save your code in order to see your changes
reflected in the browser!

Tasks

21/21 Complete
Mark the tasks as complete by checking them off

Getting Ready
1.

Before we touch the code, look over Adhoc’s design spec provided in the

introduction. Notice that the design spec includes information about what
Bootstrap utility classes components are used.

And keep in mind that the website is designed to be responsive so that it

accommodates desktop and mobile screens. Therefore, as you work through
the project, resize your browser to see both the desktop and mobile versions!

Also, check out the links provided for the images used on the website.

Lastly, look over the provided code in index.html. You’ll see some starter
code that you’ll have to edit in order to have a functioning site.
Editing the Navbar
2.

Let’s first tackle the navbar, but notice that there’s already some code there!
That’s the code copied from Bootstrap’s navbar example.

It’s a good starter template but we still have to edit this code to fit our needs.
Therefore, remove the code that renders these elements:

 the dropdown option.

 the disabled link.
 the search bar.

Hint
Remove both the dropdown and disabled links. The code below is not
necessary:

<li class="nav-item dropdown">

  <a class="nav-link dropdown-toggle" href="#"
id="navbarDropdown" role="button" data-toggle="dropdown"
    aria-haspopup="true" aria-expanded="false">
    Dropdown
  </a>
  <div class="dropdown-menu" aria-labelledby="navbarDropdown">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</li>
<li class="nav-item">
  <a class="nav-link disabled" href="#" tabindex="-1" aria-
disabled="true">Disabled</a>
</li>
Remove the code below that renders the form:

<form class="form-inline my-2 my-lg-0">

<input class="form-control mr-sm-2" type="search"
placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0"
type="submit">Search</button>
</form>
3.

Add Adhoc’s logo to the navbar.

Locate the element with class "navbar-brand". Delete the text Navbar and

replace it with an <img> element with an src value
of "https://content.codecademy.com/courses/learn-bootstrap-4/adhoc/logo.png" .

Remember to assign an appropriate value to the alt attribute.

Hint

Your brand should look like:

<a class="navbar-brand" href="#"><img

src="https://content.codecademy.com/courses/learn-bootstrap-4/a
dhoc/logo.png" alt="adhoc logo"></a>
4.
According to the design spec, we should have 4 links (not including the brand)
in the navbar.

Use the second link as a template and make 2 additional links. Change the text
of the links to follow the design spec.
Hint

You can copy HTML that renders the second link:

<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
and paste it two more times to create the links.

Remember to change the Link text to the text in the design spec.

More information can be found at Bootstrap’s navbar documentation.

Adding the Jumbotron
5.

Under the navbar, there’s a <div> that we’re going to turn into our jumbotron!

It currently has some inline CSS that renders a background image.

Provide it with a class of "jumbotron" and "jumbotron-fluid" to get a jumbotron

that spans the entire screen/viewport.
Hint

After adding the classes, your code should look like:

<div class="jumbotron jumbotron-fluid"

style="background:url(https://content.codecademy.com/courses/le
arn-bootstrap-4/adhoc/jumbotron.png) no-repeat; background-
size: cover;">

</div>
Check out Bootstrap’s jumbotron documentation for more information!
6.
Inside the jumbotron, add another <div>. This new <div> is going to act as a
background and container for the text we want to insert. Therefore, inside
the <div> add an <h1> element followed by a <p>.

Use the design spec and add the appropriate text inside both the <h1> and
the <p> elements.
Hint

The code you just added should look like:

<div>
<h1>Big Text Here</h1>
<p>Smaller Text Here</p>
</div>
7.

Time to style the elements we just added. We want the new <div> to have:

 a grey background.
 white and centered text.
 larger top and bottom margins by assigning a class of "my-5". This utility
class targets and increases the vertical margins of an element.

Also, give the <h1> element a display heading by assigning a class of "display-

3".
Hint

To provide a grey background, use Bootstrap’s background color utility class.

To make the text grey, use Bootstrap’s text color utility class.

To make the text centered, use one of Bootstrap’s text alignment utility
classes.

To change the size of an element’s margins, use Bootstrap’s spacing utility

classes.
Styling the Quote
8.
Let’s style the quote under the jumbotron using utility classes.

Follow the design spec. Provide the <h2> element with

 italic font.
 a light font-weight.

Notice the stying of the name, it:

 is aligned to the right

 has a bold and italic font
 the text inside the <span> has a normal weight.

Finish up the quote styling by increasing the top and bottom margins of the
column containing the quote. You can do so by assigning a class of my-5.
Hint

To give the text some styling, use Bootstrap’s font weight and italics utility
classes.

To make the text aligned, use one of Bootstrap’s text alignment utility classes.

To change the size of an element’s margins, use Bootstrap’s spacing utility

classes.
Why Adhoc? - Cards
9.

Locate the <h2> element with text Why Adhoc?.

Center the text and give it a display heading that follows the design spec.
Hint

To make the text aligned, use one of Bootstrap’s text alignment utility classes.
10.

In the next row, we’re going to continue following the design spec and add
one card in each column.

In each column, add a card that:

 Does not have a border.
 Has an image icon on the top.
 Has centered text on the bottom.

Here are the linked icons for convenience:

 experienced icon.
 fun icon.
 smart icon.

Hint
Look over Bootstrap’s card example for the syntax used to create a card.

To remove a border, use Bootstrap’s subtractive border utility classes.

11.

While the columns look good on a large screen, the contents look squished on
a smaller screen. Change the width of the column so that it has a width of 4 on
medium, and larger, sized screens.

For extra small and small-sized screens, it should have a width of 8.
Hint

Look over Bootstrap’s grid mix and match example for the syntax used to
create responsive columns.
12.

Let’s also have the row center the columns containing the cards.
Hint

Look over Bootstrap’s grid horizontal alignment example and assign the row a

class that will center the columns.
13.

Increase the vertical margins of the row with the text Why Adhoc and the row
containing the cards to space out the rows.
Hint
It’s up to you to decide how far apart the rows should be. Go ahead and
exercise your creative muscles!

To change the size of an element’s margins, use Bootstrap’s spacing utility

classes.
Meet the Team - Carousel
14.

Locate the row with the text Meet the Team. According to the design spec,
provide that row with utility classes that render a dark background with
rounded top border.
Hint

To provide a dark background, use Bootstrap’s background color utility class.

To apply a rounded top border, use Bootstrap’s border-radius utility class.

15.

Now let’s style <h2> element that has the text Meet the Team.

Apply the following styling for the <h2> element:

 Make the text white.

 Center the text.
 Make it a Bootstrap display header.

Stuck? Get a hint

16.

Time to style the row below the text Meet the Team.

Give the bottom row a dark background and a rounded bottom border.
Stuck? Get a hint

17.

Take a look at the code that renders a carousel. It was copied directly
from Bootstrap’s carousel with controls example.
Like with the navbar, we’re going to modify the code to fit our needs. For
each <div> with a class of "carousel-item", assign the nested <img>‘s src a URL
to the provided pictures in the intro’s image assets. Also, provide an
appropriate value for the alt attribute.

Here are the linked images for convenience:

 picture of Brian M. the CEO.

 picture of Andy C. the CFO.
 picture of Angela W. the COO.
 picture of Amie S. the CTO.

Stuck? Get a hint

18.

With the slides set up, we can add some captions to each slide.

Style the captions so that it has a black background, no vertical padding, and a
rounded-pill border.

Inside the captions, add the appropriate text and style it according to the
design spec.
Hint

Look over Bootstrap’s carousel with captions example for the syntax needed.

The captions will not show up if there isn’t any displayed text. You can render
the text using a <p> element with a nested <span> element like so:

<p>CEO: <span>Brian</span></p>
You can then apply some of Bootstrap’s text utility classes for styling. You’ll
also have to remove the <p>‘s bottom margin to eliminate the space below the
text.

To provide a dark background, use Bootstrap’s background color utility class.

To apply a rounded pill border, use Bootstrap’s border-radius utility class.

To remove the padding, apply one of Bootstrap’s spacing utility classes. Take
note of how to use the notation.
19.

Change the sizing of the carousel to only take up 50% of the width and set the
margin to automatically center its contents.

Then go back and adjust the spacing of the rows to follow the design spec.
Hint

To set the width of an element, use Bootstrap’s sizing utility classes.

To set the margin to center an element’s contents, check out Bootstrap’s

horizontal centering example.

To change the spacing of the rows, edit the row’s padding using Bootstrap’s
spacing utility classes.
Finishing up
20.

The last element we have to style is the <footer>, center the text.

21.

Congratulate yourself on a website well Bootstrapped!

There are different ways to re-create the layout of the website, so figure out
what works best for you!

If you want to challenge yourself:

 Add the HTML pages in the navbar and link to them.

 Add more Bootstrap components.
 Apply extra styling to the components.
 Make the columns even more responsive by including more
breakpoints.
 Redesign the website to follow a different layout. This is the most
involved task since it requires that you think about what you want on
your site, how to arrange the layout, and how to implement this idea.
While it may be challenging, it’s also extremely rewarding!
Front-end engineers:

https://www.codecademy.com/paths/front-end-engineer-career-path/tracks/fecp-introduction-to-the-
front-end-engineer-career-path/modules/fecp-welcome/informationals/fecp-additional-resources

HTML and Web Creation
No ratings yet
HTML and Web Creation
15 pages
Bootstrap Cheat Sheet: Breakpoints Colors
No ratings yet
Bootstrap Cheat Sheet: Breakpoints Colors
14 pages
Spirit and the Soul
From Everand
Spirit and the Soul
J.A. Ortiz
No ratings yet
CTS Information Technology CTS NSQF-5
No ratings yet
CTS Information Technology CTS NSQF-5
87 pages
Spirituality and Sexuality Within Marriage: A Bond Designed and Created by God!
From Everand
Spirituality and Sexuality Within Marriage: A Bond Designed and Created by God!
Linda M. Horne
No ratings yet
My Goals in Life Essay
100% (2)
My Goals in Life Essay
4 pages
Computer Skills For Resume
100% (1)
Computer Skills For Resume
8 pages
Wad Module 2
No ratings yet
Wad Module 2
53 pages
Chapter 3 Analytics - Student Version
No ratings yet
Chapter 3 Analytics - Student Version
60 pages
I MSC - Bootstrap - Record - Formated
No ratings yet
I MSC - Bootstrap - Record - Formated
56 pages
Search Engine Optimization and Marketing A Recipe For Success in Digital Marketing 1st Edition by Subhankar Das ISBN 036755478X 9780367554781
No ratings yet
Search Engine Optimization and Marketing A Recipe For Success in Digital Marketing 1st Edition by Subhankar Das ISBN 036755478X 9780367554781
44 pages
Boot 1
No ratings yet
Boot 1
37 pages
Free Ki Majduri
No ratings yet
Free Ki Majduri
39 pages
How To Install WordPress
No ratings yet
How To Install WordPress
11 pages
A Beginners Guide To Apps
No ratings yet
A Beginners Guide To Apps
37 pages
Web Lab Practice
No ratings yet
Web Lab Practice
40 pages
C Design Pattern Essentials Tony Bevis PDF
No ratings yet
C Design Pattern Essentials Tony Bevis PDF
3 pages
Bootstrap
No ratings yet
Bootstrap
32 pages
Bootstrap Record PRG MSC I Yr
No ratings yet
Bootstrap Record PRG MSC I Yr
35 pages
Final Project 5
No ratings yet
Final Project 5
49 pages
Experiment Number 1:: What Is Bootstrap?
No ratings yet
Experiment Number 1:: What Is Bootstrap?
45 pages
Slidev 2
No ratings yet
Slidev 2
41 pages
WordPress For Beginners (3 in 1 WordPress Guide For 2020) - Step by Step Guide To Building Your WordPress Website Professionally PDF
100% (4)
WordPress For Beginners (3 in 1 WordPress Guide For 2020) - Step by Step Guide To Building Your WordPress Website Professionally PDF
169 pages
Introduction To HTML - GHCC HackToLearn
No ratings yet
Introduction To HTML - GHCC HackToLearn
22 pages
Iat I Iii Year
No ratings yet
Iat I Iii Year
19 pages
Digital Audit Report - Outlook
No ratings yet
Digital Audit Report - Outlook
23 pages
Boootstrp Pro
No ratings yet
Boootstrp Pro
18 pages
Rounak Webtech Updated
No ratings yet
Rounak Webtech Updated
25 pages
? Level 1
No ratings yet
? Level 1
17 pages
Doctype HTML Heading Title Title Heading Body h2 h2 P P Img A A
No ratings yet
Doctype HTML Heading Title Title Heading Body h2 h2 P P Img A A
18 pages
IT 100 Living in IT Era: A Guidebook
No ratings yet
IT 100 Living in IT Era: A Guidebook
30 pages
Custom HTML Block en Guide
No ratings yet
Custom HTML Block en Guide
14 pages
Unit 2 Bootstrap
No ratings yet
Unit 2 Bootstrap
21 pages
Lab Program
No ratings yet
Lab Program
17 pages
Web Progamming
No ratings yet
Web Progamming
16 pages
GMR Institute of Technology Rajam, Ap: Class Course Coursecode Preparedby Lecturetopic
No ratings yet
GMR Institute of Technology Rajam, Ap: Class Course Coursecode Preparedby Lecturetopic
13 pages
Website
No ratings yet
Website
29 pages
Phrase 4 (Alexa - SimilarWeb Analysis)
No ratings yet
Phrase 4 (Alexa - SimilarWeb Analysis)
30 pages
Ty-3 B 26 Expt 01
No ratings yet
Ty-3 B 26 Expt 01
11 pages
Botstrap Exercise
No ratings yet
Botstrap Exercise
37 pages
Lab3 Assignment
No ratings yet
Lab3 Assignment
9 pages
2 Foot Printing and Reconnaissance LAB
No ratings yet
2 Foot Printing and Reconnaissance LAB
10 pages
Web Ass2
No ratings yet
Web Ass2
8 pages
Bootstrap
No ratings yet
Bootstrap
7 pages
Vaio GRV 550 Specs
No ratings yet
Vaio GRV 550 Specs
10 pages
HTML - Layouts
No ratings yet
HTML - Layouts
5 pages
Free ASP Upload - Full Source Available
0% (1)
Free ASP Upload - Full Source Available
3 pages
Unit 17 Assignment 2
No ratings yet
Unit 17 Assignment 2
16 pages
FSD Soft
No ratings yet
FSD Soft
9 pages
Blog Info From AI
No ratings yet
Blog Info From AI
4 pages
BOOTSTRAP
No ratings yet
BOOTSTRAP
14 pages
BIS Project Template-FINAL
No ratings yet
BIS Project Template-FINAL
19 pages
EmpTech11 Q2 Mod3 Multimedia and ICTs Version2
No ratings yet
EmpTech11 Q2 Mod3 Multimedia and ICTs Version2
53 pages
MMR Radio Station Show Setup
No ratings yet
MMR Radio Station Show Setup
7 pages
WAS Interview Questions
No ratings yet
WAS Interview Questions
10 pages
Weekly Seminar Presentation by Anirban Basumallik, M.Tech 2, ERTS Lab, IIT Bombay. 2 September, 2010
No ratings yet
Weekly Seminar Presentation by Anirban Basumallik, M.Tech 2, ERTS Lab, IIT Bombay. 2 September, 2010
12 pages
Deconstructing Conflict: Understanding Family Business, Shared Wealth and Power
From Everand
Deconstructing Conflict: Understanding Family Business, Shared Wealth and Power
Doug Baumoel
1/5 (3)
Repurposed Research Proposal
No ratings yet
Repurposed Research Proposal
7 pages
Omer Farooq Resume
No ratings yet
Omer Farooq Resume
3 pages
The Journey: Staying on the Path
From Everand
The Journey: Staying on the Path
Chris Futrell
No ratings yet
Project Proposal TEMPLATE in SE
No ratings yet
Project Proposal TEMPLATE in SE
4 pages
Uses of The Internet: Read-Only Web
No ratings yet
Uses of The Internet: Read-Only Web
4 pages
Affirmed: 365 Days of Positive Thoughts and Actions to Start Your Day
From Everand
Affirmed: 365 Days of Positive Thoughts and Actions to Start Your Day
Cheryl Polote-Williamson
No ratings yet
Caryn Carlson Rothe: BS Human Centered Design and Engineering BA Anthropology
No ratings yet
Caryn Carlson Rothe: BS Human Centered Design and Engineering BA Anthropology
1 page
A Teacher's Guide to Celebrating Positive Racial Identity
From Everand
A Teacher's Guide to Celebrating Positive Racial Identity
Bianca Sapara-Grant
No ratings yet
Future-Proofing Manufacturing & the Supply Chain Post COVID-19
From Everand
Future-Proofing Manufacturing & the Supply Chain Post COVID-19
Lisa Anderson
No ratings yet
Poets
From Everand
Poets
Jose Trejo Maya
No ratings yet
The Write Direction: The Ultimate Guide to Writing your Memoir
From Everand
The Write Direction: The Ultimate Guide to Writing your Memoir
Rodney Walker
No ratings yet
Chubby Girls Don't Cheer
From Everand
Chubby Girls Don't Cheer
Kelly Clinger
No ratings yet
beyond pretty
From Everand
beyond pretty
B.C. Hatch
No ratings yet
Silver Linings in Dark Clouds
From Everand
Silver Linings in Dark Clouds
Silverline Dennis Dic-Fiberesima
No ratings yet
Pure Guidance
From Everand
Pure Guidance
Master Rashid
No ratings yet
Oklahoma Night Before Christmas
From Everand
Oklahoma Night Before Christmas
Carolyn Macy
No ratings yet
Free Resources To Teach and Learn Arabic - Migrated
No ratings yet
Free Resources To Teach and Learn Arabic - Migrated
4 pages
ABC Dogs - Learn the Alphabet with Dogs!
From Everand
ABC Dogs - Learn the Alphabet with Dogs!
P.G. Hibbert
No ratings yet
Unicorns Are Real!: Kindergarten Level Reading Book
From Everand
Unicorns Are Real!: Kindergarten Level Reading Book
Tiffany Haag
No ratings yet
A Children's Fantasy: A Book of Poetry
From Everand
A Children's Fantasy: A Book of Poetry
Dana M Friend
No ratings yet
Lone Wolf
From Everand
Lone Wolf
Robin Mason
No ratings yet
Healthy Thinking: The Way to Healthier Thinking in the Demands on Modern Man
From Everand
Healthy Thinking: The Way to Healthier Thinking in the Demands on Modern Man
Rudolf Steiner
No ratings yet
Son of the sixth
From Everand
Son of the sixth
Richard John Ellicott
No ratings yet
Chasing Normal: My Peer Group Design for Living with Bipolar
From Everand
Chasing Normal: My Peer Group Design for Living with Bipolar
Michael J. Hoffman
No ratings yet
Survival From The Start: The Misadventures of Mekkâr
From Everand
Survival From The Start: The Misadventures of Mekkâr
Saavo
No ratings yet
What Unemployed?
From Everand
What Unemployed?
Diana Leff
No ratings yet
Words Matter
From Everand
Words Matter
Robert Byrum
No ratings yet
Jakey's Fork
From Everand
Jakey's Fork
Richard Little
No ratings yet
One Week to An MBA How to Get an Online Ivy League Education for Little or No Cost
From Everand
One Week to An MBA How to Get an Online Ivy League Education for Little or No Cost
James Abbott
No ratings yet
Little Boy Stories From Tiger Scrub
From Everand
Little Boy Stories From Tiger Scrub
Stephen Guest
No ratings yet
Burps From My Butt
From Everand
Burps From My Butt
Marilyn Bricklin Lebovitz
No ratings yet
Masters Among Us: An Exploration of Supernal Encounters and Miraculous Phenomena
From Everand
Masters Among Us: An Exploration of Supernal Encounters and Miraculous Phenomena
Thomas Curley
No ratings yet
Staubs and Ditchwater: A Friendly and Useful Introduction to Hillfolks' Hoodoo
From Everand
Staubs and Ditchwater: A Friendly and Useful Introduction to Hillfolks' Hoodoo
H. Byron Ballard
3/5 (5)