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:
can anyone please tell me whats wrong with my code, thanks in advance