CSS Question
Bootstrap wont get 4 DIVs in one row
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...
it should look something like that... .I hope you do understand what i mean!
so this is my code: `
<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>
Recommended for you: Get network issues from WhatsUp Gold. Not end users.
Answer Source
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>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download