Jumbotron

Goal

⚡ In this step, we're going to create a Jumbotron.

20200604013125

Copy jumbotron code

First, let's copy the code from the Bootstrap jumbotron page. https://getbootstrap.com/docs/4.5/components/jumbotron/

<div class="jumbotron">
  <h1 class="display-4">Hello, world!</h1>
  <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  <hr class="my-4">
  <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
  <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</div>

Then, paste the copied code into index.html.

index.html

...
</nav>

<!-- Jumbotron -->
<div class="jumbotron">
  <h1 class="display-4">Hello, world!</h1>
  <p class="lead">
    This is a simple hero unit, a simple jumbotron-style component for
    calling extra attention to featured content or information.
  </p>
  <hr class="my-4" />
  <p>
    It uses utility classes for typography and spacing to space content out
    within the larger container.
  </p>
  <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</div>

<!-- Optional JavaScript -->
...

Prepare an image.

Next, let's prepare images for Jumbotron.

Main image

First, let's prepare the main image. 20200604130822

Go to https://undraw.co/illustrations.
Change the color of the image to "#00B0FF".
Search for "static assets "
Download the svg file
Move the downloaded file to the img folder.

Background Image

Next, let's create a background image.

20200604131141

Go to https://www.canva.com/ to create an account.

Then, as in the following GIF

Create a design for "Presentation".

Next,

Search for "blue and white startup business animated presentation" and press Enter.
Select one of the slides in it as shown in below GIF.

Next, edit the color of the element to #00B0FF, as in the following gif.

Finally, download the created image in .png format.

When the download is completed, move the file to the img folder and rename it jumbotron-bg.png.

20200601130307

Change background color

Add the bg-white class to change the background color of the jumbotron.

<div class="jumbotron bg-white">

Divide jumbotron into 50-50

Let's divide the contents of the Jumbotron into 50-50 as follows for desktop.

<div class="container">
  <div class="row">
    <div class="col-lg-6">
      <!-- Hello World here... -->
    </div>
    <div class="col-lg-6">
      <!-- Image here... -->
    </div>
  </div>
</div>

Copy and paste the existing code of Hello World to the left and add img to the right.

The code looks like this.

<div class="jumbotron bg-white">
  <div class="container">
    <div class="row">
      <div class="col-lg-6">
        <h1 class="display-4">Hello, world!</h1>
        <p class="lead">
          This is a simple hero unit, a simple jumbotron-style component for
          calling extra attention to featured content or information.
        </p>
        <hr class="my-4" />
        <p>
          It uses utility classes for typography and spacing to space
          content out within the larger container.
        </p>
        <a class="btn btn-primary btn-lg" href="#" role="button">
          Learn more
        </a>
      </div>
      <div class="col-lg-6">
        <img
          src="img/undraw_static_assets_rpm6.svg"
          alt="jumbotron-image"
          class="img-fluid"
        />
      </div>
    </div>
  </div>
</div>

20200604003421

Using img-fluid class so that the image fits into the parent element.: https://getbootstrap.com/docs/4.5/content/images/#responsive-images

Edit Slogan

Let's change the slogan from "Hello World!" to "Learn web development". And add font-weight-bold.

<h1 class="display-4 font-weight-bold">
  Learn web development
</h1>

Adding and editing buttons

Add a button and adjust it.

<a class="btn btn-primary font-weight-bold" href="#" role="button">
  Get Started!
</a>
<a
  class="btn btn-dark font-weight-bold ml-3"
  href="#"
  role="button"
>
  Learn more
</a>

height `calc`, `vh` and Flexbox

Adjust the height of the jumbotron using calc and vh to make the area of the jumbotron fill up the screen.

Also, use Flexbox to center the contents of the jumbotron.

css/custom.css

/* || Jumbotron */
.jumbotron {
  height: calc(100vh - 57.69px);
  margin-bottom: 0;
  display: flex;
  align-items: center;
}

57.69px is the height of the navbar. 20200604004055

The 100vh is the current screen size. https://www.w3schools.com/cssref/css_units.asp

The height of the jumbotron is set to height: calc(100vh - 57.69px); to fill the screen with the navbar and the jumbotron.

Background image

Let's apply a background image to the jumbotron area. To apply a background image, use background-image and adjust the size of the background image with background-size.

css/custom.css

/* || Jumbotron */
.jumbotron {
  height: calc(100vh - 57.69px);
  margin-bottom: 0;
  display: flex;
  align-items: center;
  background-image: url(../img/jumbotron-bg.png);
  background-size: cover;
}

info

../ represents one level up. One level above custom.css is the same level as index.html.

Ref: https://stackoverflow.com/questions/4810927/how-to-go-up-a-level-in-the-src-path-of-a-url-in-html

Fixes for responsive

From here, let's adjust the layout for the mobile.

jumbotron CSS

The CSS below is for Desktop, so let's enclose it with a media query.

css/custom.css

@media screen and (min-width: 992px) {
  .jumbotron {
    margin-bottom: 0;
    height: calc(100vh - 57.69px);
    display: flex;
    align-items: center;
    background-image: url(../img/jumbotron-bg.png);
    background-size: cover;
  }
}

For 992px, please refer to the following link:

https://getbootstrap.com/docs/4.5/layout/overview/#responsive-breakpoints

Change the order of images and slogans with jumbotron

Use the order- class to change the order of images and slogans on mobile.

<div class="col-lg-6 order-2 order-lg-1">
  ...
</div>
<div class="col-lg-6 order-1 order-lg-2">
  ...
</div>

Before	After

Ref: https://getbootstrap.com/docs/4.5/utilities/flex/#order

Slogans for mobile

Adjust the slogan for mobile.

@media screen and (max-width: 575.98px) {
  .jumbotron h1 {
    text-align: center;
    font-size: 2.3rem;
    margin-top: 2rem;
  }
}

For 575.98px, please refer to the following link: https://getbootstrap.com/docs/4.5/layout/overview/#responsive-breakpoints

You can specify h1 in .jumbotron by writing .jumbotron h1.

https://www.w3schools.com/css/css_combinators.asp

Button Link

Let's change the button layout for mobile.

We used d-flex, flex-column, and flex-lg-row to change it according to the screen size.

<div
  class="d-flex flex-column flex-lg-row"
>
  <a
    class="btn btn-primary font-weight-bold mb-3 mb-lg-0"
    href="#"
    role="button"
  >
    Get Started!
  </a>
  <a
    class="btn btn-dark font-weight-bold ml-lg-3"
    href="#"
    role="button"
  >
    Learn more
  </a>
</div>

The button looks like this.

Desktop

For desktop, the button layout direction is row thanks to flex-lg-row.

Mobile and Tablet

For Mobile and Tablet, the button layout direction is column thanks to flex-column.

Final Code

The final code looks like this.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <!-- Google Fonts -->
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&display=swap"
      rel="stylesheet"
    />

    <!-- Bootstrap CSS -->
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
      integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
      crossorigin="anonymous"
    />

    <!-- Custom CSS -->
    <link rel="stylesheet" href="css/custom.css" />

    <title>Hello, world!</title>
  </head>
  <body>
    <!-- Navbar -->
    <nav
      class="navbar navbar-expand-lg navbar-light bg-white shadow-sm sticky-top"
    >
      <a class="navbar-brand" href="#">
        <img
          src="img/logo.png"
          alt="logo"
          width="30"
          height="30"
          class="d-inline-block align-top"
          loading="lazy"
        />
        <span class="font-weight-bold">Logo</span>
      </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 ml-auto">
          <li class="nav-item mr-lg-4">
            <a class="nav-link" href="#">Features</a>
          </li>
          <li class="nav-item mr-lg-4">
            <a class="nav-link" href="#">Pricing</a>
          </li>
          <li class="nav-item mr-lg-4">
            <a class="nav-link" href="#">About</a>
          </li>
          <li class="nav-item mr-lg-4">
            <a class="nav-link" href="#">Login</a>
          </li>
          <li class="nav-item">
            <a class="btn btn-warning font-weight-bold px-3 py-2" href="#">
              Sign up
            </a>
          </li>
        </ul>
      </div>
    </nav>

    <!-- Jumbotron -->
    <div class="jumbotron bg-white">
      <div class="container">
        <div class="row">
          <div class="col-lg-6 order-2 order-lg-1">
            <h1 class="display-4 font-weight-bold">
              Learn web development
            </h1>
            <p class="lead">
              This is a simple hero unit, a simple jumbotron-style component for
              calling extra attention to featured content or information.
            </p>
            <hr class="my-4" />
            <p>
              It uses utility classes for typography and spacing to space
              content out within the larger container.
            </p>
            <div class="d-flex flex-column flex-lg-row">
              <a
                class="btn btn-primary font-weight-bold mb-3 mb-lg-0"
                href="#"
                role="button"
              >
                Get Started!
              </a>
              <a
                class="btn btn-dark font-weight-bold ml-lg-3"
                href="#"
                role="button"
              >
                Learn more
              </a>
            </div>
          </div>
          <div class="col-lg-6 order-1 order-lg-2">
            <img
              src="img/undraw_static_assets_rpm6.svg"
              alt="jumbotron-image"
              class="img-fluid"
            />
          </div>
        </div>
      </div>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script
      src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
      integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
      integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
      integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
      crossorigin="anonymous"
    ></script>

    <!-- Custom Javascript -->
    <script src="js/custom.js"></script>
  </body>
</html>

css/custom.css

body {
  font-family: "Poppins", sans-serif;
}

/* || Navbar */
.nav-item {
  font-weight: 500;
}

.navbar-light .navbar-nav .nav-link {
  color: rgba(0, 0, 0, 0.9);
}

/* || Jumbotron */
@media screen and (min-width: 992px) {
  .jumbotron {
    margin-bottom: 0;
    height: calc(100vh - 57.69px);
    display: flex;
    align-items: center;
    background-image: url(../img/jumbotron-bg.png);
    background-size: cover;
  }
}

@media screen and (max-width: 575.98px) {
  .jumbotron h1 {
    text-align: center;
    font-size: 2.3rem;
    margin-top: 2rem;
  }
}

Goal#

Copy jumbotron code#

Prepare an image.#

Main image#

Background Image#

Change background color#

Divide jumbotron into 50-50#

Edit Slogan#

Adding and editing buttons#

height calc, vh and Flexbox#

Background image#

info

Fixes for responsive#

jumbotron CSS#

Change the order of images and slogans with jumbotron#

Slogans for mobile#

Button Link#

Desktop#

Mobile and Tablet#

Final Code#

Goal

Copy jumbotron code

Prepare an image.

Main image

Background Image

Change background color

Divide jumbotron into 50-50

Edit Slogan

Adding and editing buttons

height `calc`, `vh` and Flexbox

Background image

Fixes for responsive

jumbotron CSS

Change the order of images and slogans with jumbotron

Slogans for mobile

Button Link

Desktop

Mobile and Tablet

Final Code