Introduction to Bootstrap | Part 2 | Build Your Own Static Website | Cheat Sheet

-

 

Flexbox Properties

1. Flexbox Container

The Bootstrap class name d-flex defines a Flexbox Container. The direct HTML elements in the Flexbox Container are called flex items.

<div class="d-flex">
  <div>
    <h1>Tourism</h1>
    <p>Plan your trip.</p>
    <button>Get Started</button>
  </div>
</div> 

  • The HTML container element with the class="d-flex" is a Flexbox Container.
  • The HTML container element div in Flexbox Container is a flex item. Because it is directly inside the Flexbox Container.
  • The HTML main heading, paragraph, and button elements are not flex items. Because these elements are not directly inside the Flexbox Container.

Note:-

Wrapping HTML elements in the Flexbox Container is mandatory to apply other flex properties.

 

2. Flex Direction

The Flex Direction specifies the direction of the flex items in the Flexbox Container.


 

 

2.1 flex-row

The Bootstrap class name flex-row is used to move the flex items horizontally in the Flexbox Container.

<div class="d-flex flex-row">
  <div>
    <h1>Tourism</h1>
    <p>Plan your trip.</p>
    <button>Get Started</button>
  </div>
</div>

2.2 flex-column

The Bootstrap class name flex-column is used to move the flex items vertically in the Flexbox Container.

<div class="d-flex flex-column">
  <div>
    <h1>Tourism</h1>
    <p>Plan your trip.</p>
    <button>Get Started</button>
  </div>
</div>

 

 

 

 

 Note:-

The Bootstrap class name flex-row is the default Flex Direction for the Flexbox Container. So, once d-flex is specified, all the flex items in the Flexbox Container display horizontally. 

 

3. Justify Content

The Justify Content specifies the alignment of flex items along the Flex Direction in a Flexbox Container.

3.1 justify-content-start

The Bootstrap class name justify-content-start is used to align the flex items at the start of the Flexbox Container either horizontally or vertically based on the Flex Direction.



<div class="d-flex flex-column justify-content-start">
  <div>
    <h1>Tourism</h1>
    <p>Plan your trip.</p>
    <button>Get Started</button>
  </div>
</div>


3.2 justify-content-center

The Bootstrap class name justify-content-center is used to align the flex items at the center of the Flexbox Container either horizontally or vertically based on the Flex Direction.




<div class="d-flex flex-column justify-content-center">
  <div>
    <h1>Tourism</h1>
    <p>Plan your trip.</p>
    <button>Get Started</button>
  </div>
</div>

 

3.3 justify-content-end

The Bootstrap class name justify-content-end is used to align the flex items at the end of the Flexbox Container either horizontally or vertically based on the Flex Direction.




<div class="d-flex flex-column justify-content-end">
  <div>
    <h1>Tourism</h1>
    <p>Plan your trip.</p>
    <button>Get Started</button>
  </div>
</div>

 

Example:- 

HTML Code:-

<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <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.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  </head>
  <body>
    <div class="bg-container d-flex flex-column justify-content-end">
      <div class="tourism-card">
        <h1 class="main-heading">Tourism</h1>
        <p class="paragraph">Plan your trip.</p>
        <button class="button">Get Started</button>
      </div>
    </div>
  </body>
</html>

CSS Code:- 

.bg-container {
  background-image: url("https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/ocean.jpg");
  height: 100vh;
  background-size: cover;
}
.tourism-card {
  text-align: center;
  background-color: white;
  padding: 5px;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
}
.main-heading {
  font-family: "Roboto";
}
.paragraph {
  font-family: "Roboto";
}
.button {
  color: white;
  background-color: #25b1cc;
  width: 138px;
  height: 36px;
  border-width: 0px;
  border-radius: 20px;
}

Output:- 


 

 

Try out changing the Flex Direction and Justify Content with the Bootstrap class names in the below Code Playground.

Example:-

HTML Code:-

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <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.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  </head>
  <body>
    <div class="d-flex flex-column justify-content-end box-container">
      <div class="box box-orange"><p>Box 1</p></div>
      <div class="box box-green"><p>Box 2</p></div>
    </div>
  </body>
</html>

CSS Code:-

.box{
  width: 100px;
  height: 100px;
  color: white;
}
.box-orange{
  background-color: orange;
}
.box-green{
  background-color: green;
}
.box-container{
  width: 100vw;
  height: 100vh;
}

Output:- 


 

Comments

Post a Comment

Popular posts from this blog

Introduction to CSS Box Model | Part 1 | Build Your Own Static Website | Cheat Sheet

-
Image
  CSS Box Properties 1. Height The CSS height property specifies the height of an HTML element. .card {   height: 200px; } 2. Width The CSS width property specifies the width of an HTML element. .card {   width: 250px; } CSS Background Properties 1. Background Image The CSS background-image property specifies the background image of an HTML element.  .card {   background-image: url("https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/ocean.jpg"); } Warning:-  1. The background image takes the height of the content of an HTML element if you don't specify the height to  it. 2. The URL given to the background-image must be a valid URL to display the image.   2. Background Size The CSS background-size property specifies the size of the background image of an HTML element. .card {   background-size: cover; } Note:- Aspect Ratio is the ratio of the width and height (width/height) of an image. Example:- HTML Code:- <!DOCTYPE html...
Read more