So guys my questions says I am trying to make 4 DIV's being in the same line/row however.
Product Company (middle) Languages DIV4
text... text... text... text...
text... text... text... text...
<div class="container">
<div class="row">
<div class="col-md-4">
<h2>Product</h2>
<li> <a href="templates.php">Templates</a></li>
<li> <a href="pricing.php">Pricing</a></li>
</div>
<div class="col-md-4">
<h2>Company</h2>
<li><a href="aboutus.php">About Us</a></li>
<li><a href="contact.php">Contact us</a></li>
<li><a href="terms.php">Terms of Servise</a></li>
<li><a href="policy.php">Privacy policy</a></li>
</div>
<div class="col-md-4">
<h2>Language</h2>
<li><a href="login.php">Englisch</a></li>
<li><a href="login.php">German</a></li>
<li><a href="login.php">Srpski</a></li>
</div>
<div class="col-md-4">
<li><a href="login.php">facebook</a></li>
<li><a href="login.php">kaaa</a></li>
<li><a href="login.php">kaaa</a></li>
</div>
</div>
</div>
First make sure that your markup is valid. E.g. for your li
tags the ul
tag was missing.
If you want to display 4 divs, you need the class col-md-3
instead of col-md-4
. Bootstrap is using a grid system with a default column count of 12. If you need 4 columns you have to use 12/4 = 3 meanding col-md-3
.
The md
stands for medium. So for small devices, the columns break and are displayed on top of each other. Watch the following example in fullscreen, to see the columns standing next to each other.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-3">
<h2>Product</h2>
<ul>
<li> <a href="templates.php">Templates</a></li>
<li> <a href="pricing.php">Pricing</a></li>
</ul>
</div>
<div class="col-md-3">
<h2>Company</h2>
<ul>
<li><a href="aboutus.php">About Us</a></li>
<li><a href="contact.php">Contact us</a></li>
<li><a href="terms.php">Terms of Servise</a></li>
<li><a href="policy.php">Privacy policy</a></li>
</ul>
</div>
<div class="col-md-3">
<h2>Language</h2>
<ul>
<li><a href="login.php">Englisch</a></li>
<li><a href="login.php">German</a></li>
<li><a href="login.php">Srpski</a></li>
</ul>
</div>
<div class="col-md-3">
<ul>
<li><a href="login.php">facebook</a></li>
<li><a href="login.php">kaaa</a></li>
<li><a href="login.php">kaaa</a></li>
</ul>
</div>
</div>
</div>