How to create text carousel in bootstrap

      No Comments on How to create text carousel in bootstrap

How to create text carousel in bootstrap – using bootstrap basics


Text Carousel


How to create text carousel in bootstrap

HTML:

<div class="container">
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators" id="my_indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div id='my_cnt' class="carousel-inner">
      <div class="item active">
        <img src="cropped-scanfcode1.png" alt="How to create text carousel in bootstrap">
        <div class='cnt_content'>
               Scanfcode helps you build great codes in HTML, CSS, C, C++, JavaScript, PHP, Android & much more.Scanfcode.com “CODE WANTS TO BE SIMPLE” is an initiative to help the upcoming programmers with the code.
        </div>
      </div>
      <div class="item">
        <img src="cropped-scanfcode1.png" alt="How to create text carousel in bootstrap">
        <div class="cnt_content">Scanfcode.com “CODE WANTS TO BE SIMPLE” is an initiative to help the upcoming programmers with the code. Scanfcode focuses on providing the most efficient code or snippets as the code wants to be simple. 
        </div>
      </div>
      <div class="item">
      <img src="cropped-scanfcode1.png" alt="How to create text carousel in bootstrap">
        <div class='cnt_content'>"When you don't create things, you become defined by your tastes rather than ability. your tastes only narrow & exclude people. so create.”
        </div>
      </div>
    </div>
  </div>
</div>

CSS:

#myCarousel
{
  height:450px;
  width:100%;
  text-align:center;
  margin:30px;
  box-shadow:0px 1px 3px 1px #f2f2f2;
}
#my_cnt
{
  padding:40px 20px 10px;
  font-family: 'Arima Madurai', cursive;
}
#my_cnt .item img
{
   border:solid 1px #f2f2f2;
   background-color:#f2f2f2;
   border-radius:100%;
   width:120px;
   padding:10px;
   margin:auto;
   display:block;
   
}
#my_indicators li
{
  background-color:#ff0066;
  border:solid 2px #ff0066;
  border-radius:3px;
}
.cnt_content
{
  padding:20px;
  font-size:18px;
  color:#333;
  margin-top:40px;
}
@media screen and (max-width: 600px) {
#myCarousel
{
  height:300px;
  }
 .cnt_content
{
  padding:2px;
  font-size:14px;
  color:#333;
  margin-top:15px;
}
 #my_cnt .item img
{
   width:100px;
}
  #my_cnt
{
  padding:20px;
}

Leave a Reply

Your email address will not be published. Required fields are marked *