Bootstrap wont get 4 DIVs in one row

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> <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 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 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>

Bootstrap wont get 4 DIVs in one row

Sign up