Bootstrap carousel and Jumbotron

by

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

 

01
02
03
04
05
06
07
08
09
10
11
12
13
14
<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
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<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

Leave a Comment

3 + twenty =