Home Why the divs are not floating away using BootStrap?
Reply: 2

Why the divs are not floating away using BootStrap?

Umair Shah Yousafzai
1#
Umair Shah Yousafzai Published in 2017-09-14 09:19:41Z

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 :

Anmol Sandal
2#
Anmol Sandal Reply to 2017-09-14 09:23:59Z

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>

cloned
3#
cloned Reply to 2017-09-14 09:24:31Z

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.

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.252505 second(s) , Gzip On .

© 2016 Powered by cudou.com design MATCHINFO