BviLLe_Kid BviLLe_Kid - 6 months ago 19
HTML Question

Equal space between Bootstrap column elements

CSHTML:

<div class="row">
<div class="col-lg-4 box">
<h2>Test1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p><input type="button" class="btn btn-default" value="Create &raquo" onclick="location.href='@Url.Action("Create", "Test1", new { area = ""})'" /></p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4 box">
<h2>Test2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p><input type="button" class="btn btn-default" value="Create &raquo" onclick="location.href='@Url.Action("Create", "Test2", new { area = ""})'" /></p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4 box">
<h2>Test3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p><input type="button" class="btn btn-default" value="Create &raquo" onclick="location.href='@Url.Action("Create", "Test3", new { area = ""})'" /></p>
</div><!-- /.col-lg-4 -->
</div><!-- /.row -->


CSS:

.box{
border: 2px solid black;
}


Bootply

How do I create equal space between these 3
div
's and keep it centered? This goes underneath my
carousel
.

Any help is appreciated

Answer

I would use a flex box on the parent .row.

.box{
  border: 2px solid black;
  flex:1;
}
.box:nth-of-type(2) {
  margin:0px 10px 0px 10px;
}

.row{
  display:flex;
  width:100%;
}
<div class="row">
  <div class="box">
    <h2>Test1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p><input type="button" class="btn btn-default" value="Create »" onclick="location.href='@Url.Action(" create",="" "test1",="" new="" {="" area="" })'"=""></p>
  </div><!-- /.col-lg-4 -->
  <div class="box">
    <h2>Test2</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p><input type="button" class="btn btn-default" value="Create »" onclick="location.href='@Url.Action(" create",="" "test2",="" new="" {="" area="" })'"=""></p>
  </div><!-- /.col-lg-4 -->
  <div class="box">
    <h2>Test3</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p><input type="button" class="btn btn-default" value="Create »" onclick="location.href='@Url.Action(" create",="" "test3",="" new="" {="" area="" })'"=""></p>
  </div><!-- /.col-lg-4 -->
</div><!-- /.row -->