title: How can I make carousel use 2 row in 1 column using Bootstrap
body: <p>From what I understand about row and col,
  number 1 would be one row with .col-12,
  then number 2 and 3 in one row but with carousel in the middle using two row. can it be done?</p>
  
  <pre><code>            &lt;!--Carousel &amp; Main Menu--&gt;
          &lt;div class="container websiteheader"&gt;
          &lt;br&gt;
          &lt;!--New Menu--&gt;
              &lt;div class="row"&gt;
                      &lt;div class="col-md-12 col-sm-12 col-xs-12"&gt;
                          &lt;a href="bim.htm"&gt;&lt;img class="center-block" src="images/menu/icon-new.png"&gt;&lt;/a&gt;
                          &lt;h4 class="text-center"&gt;New&lt;/h4&gt;
                      &lt;/div&gt;
               &lt;/div&gt;
          &lt;!--New Menu--&gt;
  
  
              &lt;div class="row"&gt;
                  &lt;!-- Support Menu--&gt;
                  &lt;div class="col-md-2"&gt;
                      &lt;img class="center-block" src="images/menu/icon-support.png"&gt;
                      &lt;h4 class="text-center"&gt;SUPPORT&lt;/h4&gt;
               &lt;/div&gt;
                  &lt;!-- Support Menu--&gt;
                  &lt;!-- Carousel--&gt;
                  &lt;div id="myCarousel" class="carousel slide"&gt;
                      &lt;div class="col-md-8"&gt;
                      &lt;!--Carousel Bullets Indicators--&gt;
                      &lt;ol class="carousel-indicators"&gt;
                      &lt;li data-target="myCarousel" data-slide-to="0" class="active"&gt;&lt;/li&gt;
                      &lt;li data-target="myCarousel" data-slide-to="1"&gt;&lt;/li&gt;
                      &lt;li data-target="myCarousel" data-slide-to="2"&gt;&lt;/li&gt;
                  &lt;/ol&gt;
                      &lt;!--Carousel Bullets Indicators--&gt;
  
                      &lt;!--Carousel Item List--&gt;
                      &lt;div class="carousel-inner"&gt;
                          &lt;div class="item active"&gt;
                              &lt;img src="images/carousel/index/index-001.jpg" width="100%" alt="VNIX MY"&gt;
                              &lt;div class="carousel-caption"&gt;
                                &lt;h3&gt;Title 1&lt;/h3&gt;
                                  &lt;p&gt;Para 1&lt;br&gt;
                                  Para 2&lt;br&gt;
                                  Para 3&lt;/p&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="item"&gt;
                              &lt;img src="images/about/index-002.jpg" width="100%" alt="VNIX MY"&gt;
                              &lt;div class="carousel-caption"&gt;
                                &lt;h3&gt;Title 2&lt;/h3&gt;
                                  &lt;p&gt;This is slider 2 paragraph&lt;/p&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="item"&gt;
                              &lt;img src="images/about/index-003.jpg" width="100%" alt="VNIX MY"&gt;
                              &lt;div class="carousel-caption"&gt;
                                &lt;h3&gt;Title 3&lt;/h3&gt;
                                  &lt;p&gt;This is slider 3 paragraph&lt;/p&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;!--Carousel Item List--&gt;
  
                      &lt;!-- Carousel nav --&gt;  
                      &lt;a class="carousel-control left" href="#myCarousel" data-slide="prev"&gt;
                      &lt;span class="icon-prev"&gt;&lt;/span&gt;
                   &lt;/a&gt;  
                   &lt;a class="carousel-control right" href="#myCarousel" data-slide="next"&gt;
                      &lt;span class="icon-next"&gt;&lt;/span&gt;
                   &lt;/a&gt;
                      &lt;!-- Carousel nav --&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;!-- Carousel--&gt;
                  &lt;!-- Services Menu--&gt;
                  &lt;div class="col-md-2"&gt;
                      &lt;img class="center-block" src="images/menu/icon-services.png"&gt;
                      &lt;h4 class="text-center"&gt;SERVICES&lt;/h4&gt;
                  &lt;/div&gt;
                  &lt;!-- Services Menu--&gt;
                  &lt;div class="col-md-10"&gt;
                  &lt;div class="col-md-2"&gt;
                      &lt;img class="center-block" src="images/menu/icon-about_us.png"&gt;
                      &lt;h4 class="text-center"&gt;ABOUT US&lt;/h4&gt;
                  &lt;/div&gt;
                  &lt;/div&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-md-2"&gt;
                      &lt;img class="center-block" src="images/menu/icon-about_us.png"&gt;
                      &lt;h4 class="text-center"&gt;ABOUT US&lt;/h4&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;/div&gt;
          &lt;br&gt;
  </code></pre>
  
  <p></p>
  
  <p>This is what I want to achieve <a href="http://s22.postimg.org/5h5n94s3l/image.jpg" rel="nofollow">http://s22.postimg.org/5h5n94s3l/image.jpg</a>
  This is currently I got from the codes <a href="http://s28.postimg.org/uf0kisou5/image.jpg" rel="nofollow">http://s28.postimg.org/uf0kisou5/image.jpg</a></p>