Learn Flutter Framework by Google to Build Beautiful Apps. Learn App Development on FlutterCampus

Ask Question or Answer

You can ask your question or answer the question you know.

How to make two box side by side with bootstrap ?

Posted on 2019 September 22 at 9:54:39 PM
i want to make two boxes side by side with bootstrap, please help me.
Arjun Chaudhary

2 Answers on this Question

Answered on 2019 September 22 at 10:19:13 PM

You can use .row and .col-sm-* classes to make boxes. There are other classes for a different resolution, .col-sm* will work on maximum 768 screen by Bootstrap 3. First, you need to know that there is 12 part = 100% so, try to understand the example below:

<div class="row">
    <div class="col-sm-6" style="background:#060;">
       50% Left box
    </div>
    <div class="col-sm-6" style="background:#600;">
       50% right box
    </div>
</div>

Here .col-sm-6 is 50% of width because 6 is half of 12. You can use 9 and 3 (9 + 3 = 12), like this you can use multiple columns too. But the sum of the class width must be 12. 

Answered on 2019 September 22 at 11:06:47 PM

Using flexbox is another option

<div class="container">

<div class="box box1">1</div>

<div class="box box2">2</div>

</div>

CSS style:

.container {

display: flex;

}

.box {

font-size: 200px;

}

Do you know the answer of this Question ?

Join with us on social media to see our updates on your feed.