Why the divs are not floating away using BootStrap? - html

Question

My divs are not floating left like it should as I am using BootStrap Grid System so if I used 4 cols and then again the 2nd div should take the next 4 cols but instead it's going down in the same cols not in row?
/*!
* Venue Management System (Common CSS)
* Author # Umair Shah Yousafzai
* Author Email # nicefellow1234#gmail.com
* Date # 14 Aug2017
*/
#font-face {
font-family: MyriadPro-Regular;
src: url(../fonts/MyriadPro-Regular.otf);
}
#font-face {
font-family: Quicksand-Bold;
src: url(../fonts/Quicksand-Bold.ttf);
}
#font-face {
font-family: Quicksand-Light;
src: url(../fonts/Quicksand-Light.ttf);
}
#font-face {
font-family: Quicksand-Regular;
src: url(../fonts/Quicksand-Regular.ttf);
}
body {
background-color: rgb(232,246,235);
font-family: Quicksand-Light;
letter-spacing: 2px;
}
ul li {list-style: none !important }
a { text-decoration: none !important }
.container {padding-top: 100px;}
.dashboard {
border: 0.5px solid #cccccc;
padding: 30px;
}
.dashboard-menu-item {
padding: 60px 0px 60px 0px;
color:white;
text-align: center;
font-weight: bold;
font-size: 12px;
}
.menu-icon {
font-size: 20px !important;
}
.item-bg-dark {
background-color: rgb(37,80,87);
}
.item-bg-light {
background-color: #ffffff;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
<!-- Dashboard Horizontal Menu -->
<div class="dashboard">
<ul>
<li>
<a href="#">
<div class="dashboard-menu-item item-bg-dark col-sm-3">
<i class="fa fa-sliders menu-icon" aria-hidden="true"></i> YOUR DASHBOARD
</div>
</a>
</li>
<li>
<a href="#">
<div class="dashboard-menu-item item-bg-dark col-sm-3">
<i class="fa fa-sliders menu-icon" aria-hidden="true"></i> YOUR DASHBOARD
</div>
</a>
</li>
<li>
<a href="#">
<div class="dashboard-menu-item item-bg-dark col-sm-3 col-sm-offset-4">
<i class="fa fa-sliders menu-icon" aria-hidden="true"></i> YOUR DASHBOARD
</div>
</a>
</li>
</ul>
</div>
</div>
Expected Output :

Answer 1

You forgot to add row class in the provided example to parent element and also put bootstrap grid classes to the next element i.e li. Kindly check the updated code.
/*!
* Venue Management System (Common CSS)
* Author # Umair Shah Yousafzai
* Author Email # nicefellow1234#gmail.com
* Date # 14 Aug2017
*/
#font-face {
font-family: MyriadPro-Regular;
src: url(../fonts/MyriadPro-Regular.otf);
}
#font-face {
font-family: Quicksand-Bold;
src: url(../fonts/Quicksand-Bold.ttf);
}
#font-face {
font-family: Quicksand-Light;
src: url(../fonts/Quicksand-Light.ttf);
}
#font-face {
font-family: Quicksand-Regular;
src: url(../fonts/Quicksand-Regular.ttf);
}
body {
background-color: rgb(232,246,235);
font-family: Quicksand-Light;
letter-spacing: 2px;
}
ul li {list-style: none !important }
a { text-decoration: none !important }
.container {padding-top: 100px;}
.dashboard {
border: 0.5px solid #cccccc;
padding: 30px;
}
.dashboard-menu-item {
padding: 60px 0px 60px 0px;
color:white;
text-align: center;
font-weight: bold;
font-size: 12px;
}
.menu-icon {
font-size: 20px !important;
}
.item-bg-dark {
background-color: rgb(37,80,87);
}
.item-bg-light {
background-color: #ffffff;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
<!-- Dashboard Horizontal Menu -->
<div class="dashboard">
<ul class="row">
<li class=" col-sm-4">
<a href="#">
<div class="dashboard-menu-item item-bg-dark">
<i class="fa fa-sliders menu-icon" aria-hidden="true"></i> YOUR DASHBOARD
</div>
</a>
</li>
<li class=" col-sm-4">
<a href="#">
<div class="dashboard-menu-item item-bg-dark">
<i class="fa fa-sliders menu-icon" aria-hidden="true"></i> YOUR DASHBOARD
</div>
</a>
</li>
<li class=" col-sm-4">
<a href="#">
<div class="dashboard-menu-item item-bg-dark ">
<i class="fa fa-sliders menu-icon" aria-hidden="true"></i> YOUR DASHBOARD
</div>
</a>
</li>
</ul>
</div>
</div>

Answer 2

Try the following markup for your ul/li:
<ul class="row">
<li class="col-4"> </li>
<li class="col-4"> </li>
</ul>
Change the "col-4" to whatever bootstrap col-class(es) you need.