Quantcast
Channel: Active questions tagged javascript - Stack Overflow
Viewing all articles
Browse latest Browse all 140762

bootstrap column not resizing according to the screen size

$
0
0

i have created a bootstrap column in my html page like the following:

<div style="background-color: #F5F5F5	"><div  class="container"><div style="margin-top: 10px;" class="row"><div class="col-sm-6 col-md-3 col-lg-2"> <a href="" class="second"><i class="fa fa-birthday-cake" aria-hidden="true"></i></a> <p style="font-size: 20px;">Kids</p></div><div class="col-sm-6 col-md-3 col-lg-2"><a href="" class="second"><i class="fa fa-birthday-cake" aria-hidden="true"></i></a><p style="font-size: 20px;">Weddings</p></div><div class="col-sm-6 col-md-3 col-lg-2"><a href="" class="second"><i class="fa fa-birthday-cake" aria-hidden="true"></i></a><p style="font-size: 20px;">Other Events</p></div><div class="col-sm-6 col-md-3 col-lg-2"><a href="" class="second"><i class="fa fa-birthday-cake" aria-hidden="true"></i></a><p style="font-size: 20px;">Corporate</p></div><div class="col-sm-6 col-md-3 col-lg-2"><a href="" class="second"><i class="fa fa-birthday-cake" aria-hidden="true"></i></a><p style="font-size: 20px;">Venues</p></div><div class="col-sm-6 col-md-3 col-lg-2"><a href="" class="second"><i class="fa fa-birthday-cake" aria-hidden="true"></i></a><p style="font-size: 20px;">Catering</p></div></div></div></div>

	.second /* or selector a .fa */
  {  
  font-size:32px;
  border-radius: 50%;
  border: ridge;
  border-color: #777777;
  color:#777777;
  line-height: 2em;
  width: 2em;
  height: 2em;
  text-align: center;
  display: inline-block;
    transition:0.5s;
}

.second :hover {}
.fa {
/* optionnal vertical-align: middle;*/
}

i have imported bootstrap from cdn, now when i am viewing it in mobile, this columns are not coming as i specified, they are coming one each in a line like the following image:

enter image description here

can anyone please tell me whats wrong with my code, thanks in advance


Viewing all articles
Browse latest Browse all 140762

Latest Images

Trending Articles



Latest Images

<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>