CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Grizzly
Grizzly

Reputation: 5943

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

Upvotes: 1

Views: 5207

Answers (2)

Serlite
Serlite

Reputation: 12258

Using only the Bootstrap scaffolding classes, this isn't too tricky to do - you just have to started using nested columns, and applying offset classes to successive columns. For example:

.box {
  border: 2px solid black;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-lg-4">
    <div class="row">
      <div class="col-lg-10 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>
    </div>
  </div>
  <div class="col-lg-4">
    <div class="row">
      <div class="col-lg-10 col-lg-offset-1 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 ",=" " "test1 ",=" " new=" " {=" " area=" " })'"="">
        </p>
      </div>
    </div>
  </div>
  <div class="col-lg-4">
    <div class="row">
      <div class="col-lg-10 col-lg-offset-2 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 ",=" " "test1 ",=" " new=" " {=" " area=" " })'"="">
        </p>
      </div>
    </div>
  </div>
</div>

Hope this helps! Let me know if you have any questions.

(Note that you'll have to expand the snippet to full screen to see it working, since otherwise it'll use the mobile media query.)

Upvotes: 1

Wowsk
Wowsk

Reputation: 3675

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

Upvotes: 2

Related Questions