Bootstrap carousel and Jumbotron

Bootstrap carousel and Jumbotron, In this article i will show you  on how to use Bootstrap Carousel and Jumbotron  by stepping through the sample code below .

Jumbotron HTML Code

1. First create a div wrapper for your section.
2. Go  to Bootstrap website to get your Jumbotron Sample Code here
3. Create a Row  and then create a column “col-sm-12”(full Width)  inside to wrap over   the Jumbotron Code you have just created.
4. Paste the Jumbotron Code inside the Column.

Jumbotron  HTML CODE

 

<div class="jumbosection">
      <div class="row">
        <div class="col-sm-12">
            <div class="jumbotron jumbotron-fluid">
              <div class="container">
                 <h1 class="display-4">Welcome to My Site</h1>
                  <p class="lead">Build by Awesome for the Awesome</p>
               </div>
             </div>
          
        </div>
        
      </div>
   </div>

Carousel  HTML CODE

1.  First create a div row to wrap up  the code
2. Then Create a an empty column  -> the empty column will take up the remaining space of the unspecified column
3. The Total Column is “12” thus if there are 2 x <div class=”col”></div> , each empty column will take up 3 of the column space.
4. Then create the ” <div class =”col-sm-12 col-md-6″>” to wrap the carousel inside this Column.
5. So when it is in medium size the carousel will take up 6 column of space , while when if it is in small size  the carousel will take up 12 column which is the full width of the column.
6. Go get your Carousel code at here
7. Change the Content according to your needs

<div class="row">
         <div class="col"></div>
         <div class ="col-sm-12 col-md-6">
             <div id="mainCarousel" class="carousel slide" data-ride="carousel">
               <div class="carousel-inner">
                    <div class="carousel-item active">
                            <img class="d-block w-100" src="assets/image1.jpg" alt="First slide">
                    </div>
                    <div class="carousel-item">
                            <img class="d-block w-100" src="assets/image2.jpg" alt="Second slide">
                        
                             <div class="carousel-caption d-none d-md-block">
                             <h5>City Scene</h5>
                              <p>Just Another Wonderful City</p>
                        
                             </div>    
                    </div>
                    <div class="carousel-item">
                            <img class="d-block w-100" src="assets/image3.jpg" alt="Third slide">
                    </div>
                </div>
                  <a class="carousel-control-prev" href="#mainCarousel" 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="#mainCarousel" role="button" data-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                         </a>
               </div>
             
             
             
        
        </div>
         <div class="col"></div>
      
    </div>

Check out how to create a Bootstrap Navbar here