Bootstrap wont get 4 DIVs in one row - html

Question

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> Templates</li>
<li> Pricing</li>
</div>
<div class="col-md-4">
<h2>Company</h2>
<li>About Us</li>
<li>Contact us</li>
<li>Terms of Servise</li>
<li>Privacy policy</li>
</div>
<div class="col-md-4">
<h2>Language</h2>
<li>Englisch</li>
<li>German</li>
<li>Srpski</li>
</div>
<div class="col-md-4">
<li>facebook</li>
<li>kaaa</li>
<li>kaaa</li>
</div>
</div>
</div>

Answer 1

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 meaning 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> Templates</li>
<li> Pricing</li>
</ul>
</div>
<div class="col-md-3">
<h2>Company</h2>
<ul>
<li>About Us</li>
<li>Contact us</li>
<li>Terms of Servise</li>
<li>Privacy policy</li>
</ul>
</div>
<div class="col-md-3">
<h2>Language</h2>
<ul>
<li>Englisch</li>
<li>German</li>
<li>Srpski</li>
</ul>
</div>
<div class="col-md-3">
<ul>
<li>facebook</li>
<li>kaaa</li>
<li>kaaa</li>
</ul>
</div>
</div>
</div>

Answer 2

Could be a screen size issue and also sytax issue
Bootstrap only allows 12 columns per row, so each column needs "width" of 3, col-md-3
Then since the size is set to md the columns widths are set up for a medium size screen
With col-xs-3 it will make the columns as small as they can go without overflowing to the next row
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-md-3 col-xs-3">
<h2>Product</h2>
<ul>
<li> Templates
</li>
<li> Pricing
</li>
</ul>
</div>
<div class="col-md-3 col-xs-3">
<h2>Company</h2>
<ul>
<li>About Us
</li>
<li>Contact us
</li>
<li>Terms of Servise
</li>
<li>Privacy policy
</li>
</ul>
</div>
<div class="col-md-3 col-xs-3">
<h2>Language</h2>
<ul>
<li>Englisch
</li>
<li>German
</li>
<li>Srpski
</li>
</ul>
</div>
<div class="col-md-3 col-xs-3">
<h2>Share</h2>
<ul>
<li>facebook
</li>
<li>kaaa
</li>
<li>kaaa
</li>
</ul>
</div>
</div>
</div>

Answer 3

check this snippet
.row {
display: flex;
}
<div class="container">
<div class="row">
<div class="col-md-4">
<h2>Product</h2>
<ul>
<li> Templates
</li>
<li> Pricing
</li>
</ul>
</div>
<div class="col-md-4">
<h2>Company</h2>
<ul>
<li>About Us
</li>
<li>Contact us
</li>
<li>Terms of Servise
</li>
<li>Privacy policy
</li>
</ul>
</div>
<div class="col-md-4">
<h2>Language</h2>
<ul>
<li>Englisch
</li>
<li>German
</li>
<li>Srpski
</li>
</ul>
</div>
<div class="col-md-4">
<h2>div4</h2>
<ul>
<li>facebook
</li>
<li>kaaa
</li>
<li>kaaa
</li>
</ul>
</div>
</div>
</div>
Hope this helps