---
title: Bootstrap 4 - CoderSchool Pricing page
tags: bootstrap4, coderschool
---
# 1.3 Responsive Web Design with Bootstrap(CoderSchool Pricing Page)
## Introduction 🌟
Today, you'll be focused on your first big assignment. It's time to practice, young padawan. In order to successfully submit this project, we'll be talking a bit about Git. It's a big topic, but you're on Day 3 already so we think you're ready. ;)
Today, you'll be working alone, and using Git with yourself, and tomorrow you'll be using it to work with teammates.
Please submit your assignment as per the "submit" link on the Resources tab. We'll look over your code.
## [Demo](https://cs-pricing-page.netlify.com)
### Required Features 🎯
- [ ] User can see a navigation bar with links
- [ ] User can see a jumbotron with a call to action in the first section
- [ ] User can see three cards in the second section
- [ ] User can see a form in the footer
- [ ] User can see the navigation bar turn into a hamburger menu when appropriate
- [ ] User can see the cards _stack_ when appropriate
- [ ] User can see the form's input's lineup when appropriate
## Tools You'll Be Using
- [GitHub](http://www.github.com)
- [Bootstrap](http://www.getbootstrap.com)
## Assignment: Responsive Pricing Page with Bootstrap
The goal of this assignment is to help you get familiar with all the popular Bootstrap components and utilities. By the end of this lab, you will be surprised of how much less code you need to write to make a responsive website with Bootstrap.
The reason we spent much time not on Bootstrap is so you have good fundamentals, and you're not fundamental on any one technology. CSS is everywhere. Bootstrap is not.
<img src="https://i.imgur.com/wXJLYpm.gif" alt="CoderSchool Pricing Page">
### Milestone 1: Add Bootstrap to your HTML file
- Create a folder named `responsive-with-bootstrap`, or whatever you'd like to call it.
- Create a new file, called `index.html`. Be sure to "save" the file, so Visual Studio recognizes it as an `HTML` file. Then, to get started, simply type html and wait a second for the following menu:
- In the `<head>`, create a link to an external CSS stylesheet called `style.css`, if it wasn't created already in the above step.
- Go to Bootstrap [website](https://getbootstrap.com/) and click on 'Get Started'.
- Go to the `Quick Start` section, and copy and paste the Bootstrap CSS `<link>` into your html `<head>`. You should be including this line before your `style.css`:
```
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
```
- Now, at the very end of the document - before `</body>`, copy the JavaScript tags that are also on the Bootstrap page. They look like `<script src=...>`. These files include some JavaScript. We won't code any JavaScript directly today, but we will use some of the pre-built functions provided by these files as part of Bootstrap - here, they'll help us with the responsive menu features.
---
**Extra Info**: When a page is rendered, all the external references in `<head>` are loaded first before the content in `<body>` is loaded. We want the stylesheets to be at the `head` so that the styles of pages are already ready when the content is loaded.
Loading scripts often takes longer than stylesheets, so we don't want to include scripts in the `head` to slow down the rendering process. Also, most of the scripts are for interaction, and the user won't be able to do anything until the page is fully loaded.
---
### Milestone 2: Build the structure of the page
Most webpages on the internet share a similar structure, if you haven't noticed that already. So let's create the rough skeleton of our page before doing anything:
In the `<body>`, create the following main sections:
```html
<nav></nav>
<header></header>
<section></section>
<footer></footer>
```
If you open the `index.html` now on a web browser, you still see a blank page because there is no actual content on the page. Let's fix that with our first element on the page, the '<nav>'.
- Give the following classes to your `<nav>` element: `navbar`, `bg-light`, `border-bottom`. Remember that an element can have many classes at once. In this case, each of these classes are defined by the Bootstrap library.
- `.navbar` provides a wrapper around the element and turns it into a [Bootstrap navigation bar](https://getbootstrap.com/docs/4.3/components/navbar/).
- `.bg-light` changed the [background color](https://getbootstrap.com/docs/4.0/utilities/colors/#background-color) of the element.
- `.border-bottom` provides a [border](http://getbootstrap.com/docs/4.0/utilities/borders/) at the bottom of your element.
As always, your best friend is the Chrome web inspector. You can inspect the element to see "where" the styles are coming from.
<img src="https://i.imgur.com/D1aNyiH.png" alt="chrome dev tools">
Not _everything_ is in Bootstrap. You still need to write your own CSS sometimes. Let's create a new calss, called box-shadow. Open up your `style.css` and create a new class, `.box-shadow`. Once you're done, apply it to your `<nav>` element.
```css
.box-shadow {
box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.05);
}
```
### Milestone 3: Responsive links on right `<nav>`
We'll be using a few additional classes we can find in the [Bootstrap documentation for navbars](https://getbootstrap.com/docs/4.3/components/navbar/).
- To make it responsive, add the following class to the `<nav>` element: `.navbar-expand-lg`.
- Then, add `.navbar-light` to the `<nav>` to make the color easy to see, and `.fixed-top` to make the navbar fixed at the top of the page.
- Finally, add the following code inside the `<nav>` and below the hyperlink logo:
```html
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#menu-items"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="menu-items">
<ul class="navbar-nav ml-auto">
<li class="nav-item ml-3 pt-1">
<a class="nav-link text-uppercase" href="#">Our Classes</a>
</li>
<li class="nav-item ml-3 pt-1">
<a class="nav-link text-uppercase" href="#">Recent Projects</a>
</li>
<li class="nav-item ml-3 pt-1">
<a class="nav-link text-uppercase" href="#">About</a>
</li>
</ul>
</div>
```
_Whoa_ that seems like a lot of code but we'll try to walk you through it. The easiest ones (which are new) are in the `ul` and `li`s:
- `.ml-auto` applies **auto** to `margin-left`. This moves the navigation links to the right
- `.ml-3` applies **1rem** to `margin-left` of each `<li>` element
- `.pt-1` applies **.25rem** to `padding-top` of each `<li>` element
Check [this document](https://getbootstrap.com/docs/4.3/utilities/spacing/) on Bootstrap about Spacing for more detail. `rems` are slightly different than pixels.
Save and reload your browser. Your navbar is now fully responsive! (Notice that your navbar now is very similar to the CoderSchool.vn navbar)
In the code above, there are two things: a `button` and a `div`. When the screen is `lg` (min-width: 992px), then the `div` is displayed with a list of horizontal hyperlinks.
When the screen is smaller than 992px, then a hamburger `button` is shown instead. Clicking on the button will display the list of hyperlinks vertically.
There's some JavaScript magic that happens (note `id="menu-items"` and `data-target="#menu-items"` that seem to reference each other) but don't worry about it too much now.
You'll use this pattern a lot. For more detailed information on navbars, check out the information here: https://getbootstrap.com/docs/4.3/examples/#navbars.
### Milestone 4: Simple fix on the `<header>`
There aren't much in the `<header>` tag compared to the `<nav>` tag and `<section>` tag.
- Add the following classes to the `<header>` tag: `text-center`, `mx-auto`, `mt-5`, `py-5`.
These classes all come from Bootstrap:
- `.text-center` applies **center** to `text-align`
- `.mx-auto` applies **auto** to `margin-left` and `margin-right`
- `.mt-5` applies **3rem** to `margin-top`
- `.py-4` applies **3rem** to `padding-top` and `padding-bottom`
- Now, add some page content to the `<header>`:
```html
<div class="container">
<img class="my-2" src="https://i.imgur.com/hViW80o.png" alt="CS-logo" />
<h1 class="display-4 mb-4 text-danger font-weight-normal">
Course Pricing
</h1>
<h4>
Top-Rated Programming Courses Starting April 2020
</h4>
<p class="lead">
Designed to help talented programmers to meet and learn new technologies
fast. Meet twice a week from 7 to 9 PM and build real projects and get real
experience.
</p>
</div>
```
Can you now guess what styling do `.my-2`, `.mb-4`, and `.font-weight-normal` apply to an element? Thanks Bootstrap!
The other classes:
- `.display-4` changes `font-size`, `font-weight`, and `line-height`.
- `.text-danger` applies **#dc3545** (red) to `color`.
- `.lead` changes `font-size` and `font-weight`.
Save and reload the browser, the text now fits nicely in the center.
### Milestone 5: Add product cards to `<section>`
This is the fun part of the lab! We will add three different [cards](https://getbootstrap.com/docs/4.0/components/card/) with a price tag for three different coding courses being offered at CoderSchool.
- Since we want to add more than 1 `card`, let's add a `.card-deck` div. Add the following code inside the `<section>` tag:
```html
<div class="card-deck text-center"></div>
```
- Then, add 3 empty cards inside the `.card-deck`. Also, give some `margin-bottom` and `box-shadow` to each card.
```html
<div class="card mb-4 box-shadow">
<div class="card-header"></div>
<div class="card-body"></div>
<div class="card-footer"></div>
</div>
<div class="card mb-4 box-shadow">
<div class="card-header"></div>
<div class="card-body"></div>
<div class="card-footer"></div>
</div>
<div class="card mb-4 box-shadow">
<div class="card-header"></div>
<div class="card-body"></div>
<div class="card-footer"></div>
</div>
```
Now, let's add some content to each of the card. Currently, let's pretend there are 2 courses being offered at CoderSchool: **Web Design Bootcamp** and **React + React Native**. One **Data Science** course will be offered soon in the near future.
- Start with the `.card-header`, add a banner img for each of the card:
```html
<img src="https://svgshare.com/i/6Rb.svg" alt="web-banner" width="120px" />
<img src="https://i.imgur.com/gBBbwgH.png" alt="react-banner" width="120px" />
<img src="https://i.imgur.com/lLtWDST.png" alt="data-banner" width="120px" />
```
Also, add `.bg-transparent` to `.card-header` to change the background color.
- Next, let's add the course details in the `.card-body`. Add the following for the **Web Design Bootcamp** card inside the `card-body`:
```html
<h3 class="card-title">Web Design Bootcamp</h3>
<p class="card-text font-weight-bold mb-auto">
5 weeks, 7-9PM Tu/Th, starts April 17th
</p>
<ul class="list-unstyled my-4">
<li>Build portfolio from scratch</li>
<li>Responsive with Bootstrap</li>
<li>Customize with Wordpress</li>
<li>Mentoring support</li>
</ul>
<h3>
4.9M VND
<small class="text-muted">/ course</small>
</h3>
```
Also, add `.d-flex` and `.flex-column` to `.card-body` to enable `flex` behavior vertically. Okay, I said that a bit fast: there are ways to enable things like `display: flex` using Bootstrap! They call it `d-flex`. Check the [documentation here](https://getbootstrap.com/docs/4.3/utilities/flex/).
<img src="https://i.imgur.com/gtr6UIR.png" alt="result">
Try your best to fill in the other courses. :)
Notice that the `<ul>` elements of 3 cards are at the same level horizontally. This is the work of `.mb-auto` on `<p>` tag and _flex vertically_ on `.card-body`
- The last thing we need to work on now is the `.card-footer`. We want them to either 'Check out' the current courses or 'Learn more' on the upcoming courses.
Add the following inside **Web Design** and **React** `.card-footer`.
```html
<a class="btn btn-lg btn-danger" href="checkout.html">Check out</a>
```
Then, add the following inside **Data** `.card-footer`
```html
<a
class="btn btn-lg btn-danger btn-block"
href="http://www.coderschool.vn/vn/tracks/machine-learning"
target="_blank"
>Learn more</a
>
```
The `target="_blank"` attribute will open the linked page in a new window or tab without closing the current window.
That should be it for the `<section>`! Save and reload the browser. Then, try to resize the screen and see how responsive the Bootstrap cards and the card deck are!
### Milestone 6: Lists of hyperlinks in the Footer
Last but not least, the footer of the Pricing page. We want to include things like trademark, sitemap, contact, and policy here.
- First add these classes to the `<footer>` itself: **pt-4 my-md-5 pt-md-5 border-top**
- Now, we use Bootstrap default [grid system](https://getbootstrap.com/docs/4.0/layout/grid/) to lay out the footer content. The layout order: `container` > `row` > `col`. If we want to present more complex content inside a `col`, we can have a nested `row` inside a `col`, but never a nested `container` or another `col`. Sometimes, it can look like this `container` > `row` > `col` > `row` > `col`
Add the following code inside the `<footer>` tag
```html
<div class="container">
<div class="row">
<div class="col-12 col-md"></div>
<div class="col-6 col-md"><h5>Features</h5></div>
<div class="col-6 col-md"><h5>Resources</h5></div>
<div class="col-6 col-md"><h5>About</h5></div>
`
</div>
</div>
```
Now, there is a `container` inside the `<footer>`. And within that `container`, there's a `row` that nested 4 `column`s.
- Let's complete the first column. Add the following to the first col (the one with `col-12`):
```html
<img
class="mb-2"
src="https://i.imgur.com/hViW80o.png"
alt=""
width="24"
height="24"
/>
<small class="d-block mb-3 text-muted">© 2018-2019</small>
```
A bit of explanation here, when the screen is `md` or more (min-width: 768px), each of the four columns take a quarter (25%) of the full row. When the screen width is less than 768px, the first column will take the full width of the row where as each of the remaing three columns take a half (50%) of the full row.
- Now, let's finish off the remaining three columns.
Add this to the 2nd column, right below the Feature heading
```html
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">Cool stuff</a></li>
<li><a class="text-muted" href="#">Random feature</a></li>
<li><a class="text-muted" href="#">Team feature</a></li>
<li><a class="text-muted" href="#">Stuff for developers</a></li>
<li><a class="text-muted" href="#">Another one</a></li>
<li><a class="text-muted" href="#">Last time</a></li>
</ul>
```
Save and reload the page. Then, do the same for the last two columns.
### Bonus Milestone 7: Icon
Add a CoderSchool favicon to your webpage. You can use this URL: `https://i.imgur.com/hViW80o.png`. What is a favicon? It's the little icon that shows up in your browser tab:
### Bonus Milestone 8: Create a Responsive Checkout form
Make a responsive Checkout [form](https://getbootstrap.com/docs/4.0/components/forms/) and link it with one of the buttons on the card deck.
<img src="https://i.imgur.com/3Y4J0GP.png">
That should be it for your second lab! Did you realize that you made a lot of styling today, barely touching the `style.css` at all?
And any changes to the existing styles can be as easy as changing a class name (e.g. changing background color from red to blue by changing `.bg-danger` to `.bg-primary`. This is why Bootstrap is so powerful and is widely used in most of the websites these days.
## Additional Resources
### Links
- [Bootstrap Tutorial](https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/)
- [Bootsrap Flexbox Classes](https://getbootstrap.com/docs/4.3/utilities/flex/)
- [Bootstrap 4 Grid System](https://www.freecodecamp.org/news/learn-the-bootstrap-4-grid-system-in-10-minutes-e83bfae115da/)
### Videos
- [Bootstrap 4 Grid Explained](https://www.youtube.com/watch?v=qmPmwdshCMw)
Sign in with Wallet
Connect another wallet