How to Divide Bootstrap Col-Md Div to Half Vertically

Split a div inside bootstrap vertically

Afer a bit of trial and error, i realized that the small grid class was the issue. I switched to class-md and got the desired result. So this:

<div class="ibox-content">
    <h1 class="no-margins">@Model.AirportPassEquipmentOffline.TransactionCount</h1>
    <small># of Transactions</small>
    <h1 class="no-margins">@Model.AirportPassEquipmentOffline.Income</h1>
    <small>Income generated</small>                 
</div>

Became this:

<div class="ibox-content">
    <div class="row">
        <div class="col-md-6">
            <h1 class="no-margins">@Model.AirportPassEquipmentOnline.TransactionCount.ToString("N0")</h1>
            <small># of Transactions</small>
        </div>
        <div class="col-md-6">
            <h1 class="no-margins">AED @Model.AirportPassEquipmentOnline.Income.ToString("N2")</h1>
            <small>Revenue generated</small>
        </div>
    </div>
</div>

Bootstrap 5 - Grid System - How to split a page vertically (2 Vertical Independent Rows, Cols or Containers)

You said you have tried col-6 * 2, but that should probably be the solution. Something like:

<div class='row'>
    <div class='col-6'>
        <div class='row'>
            <div class='col-12'>A</div>
            <div class='col-12'>B</div>
            <div class='col-12'>C</div>
        </div>
    </div>
    <div class='col-6'>
        <div class='row'>
            <div class='col-12'>D</div>
        </div>
    </div>
</div>

This way, screen will always have 2 half width columns, and every other column within will be full width of the parent col (i.e., 50% of the screen). col with A, B, C will only take their height, and won't match other col. Same with D.

vertical divider between two columns in bootstrap

If your code looks like this:

<div class="row">
  <div class="span6">
  </div>
  <div class="span6">
  </div>
</div>

Then I'd assume you're using additional DIVS within the "span6" DIVS for holding/styling your content? So...

<div class="row">
  <div class="span6">
    <div class="mycontent-left">
    </div>
  </div>
  <div class="span6">
    <div class="mycontent-right">
    </div>
  </div>
</div>

So you could simply add some CSS to the "mycontent-left" class to create your divider.

.mycontent-left {
  border-right: 1px dashed #333;
}

How to divide a web in 2 columns using bootstrap?

I've found a solution here: How to divide a Twitter bootstrap modal into 2 parts

<div class="modal-body row">
  <div class="col-md-6">
    <!-- Your first column here -->
  </div>
  <div class="col-md-6">
    <!-- Your second column here -->
  </div>
</div>

Can I give the col-md-1.5 in bootstrap?

As @bodi0 correctly said, it is not possible. You either have to extent Bootstrap's grid system (you can search and find various solutions, here is a 7-column example) or use nested rows e.g. http://bootply.com/dd50he9tGe.

In the case of nested rows you might not always get the exact result but a similar one

<div class="row">
    <div class="col-lg-5">
        <div class="row">
            <div class="col-lg-4">1.67 (close to 1.5)</div>
            <div class="col-lg-8">3.33 (close to 3.5)</div>
        </div>    
    </div>
    <div class="col-lg-7">
        <div class="row">
            <div class="col-lg-6">3.5</div>
            <div class="col-lg-6">3.5</div>
        </div>    
    </div>
</div>

Divide a column into 2 parts in Bootstrap 3

You have different options, however, I'd recommend you to start with a basic thing for ALL options, which is this:

<div class="main col-lg-9 myHalfCol">
    <div class="col-lg-6">

    </div>

    <div class="col-lg-6">

    </div>
</div>

Now you can target .myHalfCol without worrying about affecting any other .col-lg-6 class

As for approaches, you can use the padding model, leaving everything as is just adding some padding at the sides, like this:

.myHalfCol .col-lg-6{padding:0 10px;}

The margin model:
Here you use real margins, so you need to take care of width.

.myHalfCol .col-lg-6{width:48%; margin:0 1% /* or auto */;}

How to divide Bootstrap row to same size five columns?

Use col-*-2 to each column

Also use justify-content-center to center the columns (because the one unnecessary column(12/2=6))

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>  <div class="container">  <div class="row justify-content-center">    <div class="col-sm-2">      1    </div>    <div class="col-sm-2">      2    </div>    <div class="col-sm-2">      3    </div>        <div class="col-sm-2">      4    </div>    <div class="col-sm-2">      5    </div>  </div></div>

---

Related Topics