Home > html > Border each item without padding in Bootstrap Grid System while keeping distance between them

Border each item without padding in Bootstrap Grid System while keeping distance between them

January 14Hits:1
Advertisement

I want to border each item in Bootstrap Grid System while keeping distance between them but struggle to achieve so.

Here is a simple Codepen to illustrate what I'm trying to achieve: http://codepen.io/anon/pen/xZLNqY

.card-box .image img {      width: 100%;      height: 100%;  }  .row {      padding: 2em;  }    .col-item {    border: 2px solid #000;    border-radius: 4px;  }  .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {    padding-left: 0px;    padding-right: 0px;  }
<div class="row">    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 col-item">      <div class="card-box">        <div class="col-md-6">          <div class="image">            <img src="https://i.scdn.co/image/3265a31d0ffddf3908647ca6c56874306bbf561b">          </div>        </div>        <div class="col-md-6">          <div class="content">              CrashThisParty          </div>        </div>      </div>    </div>    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 col-item">      <div class="card-box">        <div class="col-md-6">          <div class="image">            <img src="https://i.scdn.co/image/3265a31d0ffddf3908647ca6c56874306bbf561b">          </div>        </div>        <div class="col-md-6">          <div class="content">              CrashThisParty          </div>        </div>      </div>    </div>    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 col-item">      <div class="card-box">        <div class="col-md-6">          <div class="image">            <img src="https://i.scdn.co/image/3265a31d0ffddf3908647ca6c56874306bbf561b">          </div>        </div>        <div class="col-md-6">          <div class="header">              CrashThisParty          </div>        </div>      </div>    </div>  </div>

Answers

Here (if i got you right) :

.card-box .image img {
    width: 100%;
    height: 100%;
}
.row {
    padding: 2em;
}

.col-item {

}
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  padding-left: 0px;
  padding-right: 0px;
}
.card-box{
  position:relative;

  margin:10px;
    border: 2px solid #000;
  border-radius: 4px;
}
<div class="row">
  <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 col-item">
    <div class="card-box">
      <div class="row">
      <div class="col-md-6">
        <div class="image">
          <img src="https://i.scdn.co/image/3265a31d0ffddf3908647ca6c56874306bbf561b">
        </div>
      </div>
      <div class="col-md-6">
        <div class="content">
            CrashThisParty
        </div>
      </div>
      </div>
    </div>
  </div>
  <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 col-item">
    <div class="card-box">
      <div class="row">
      <div class="col-md-6">
        <div class="image">
          <img src="https://i.scdn.co/image/3265a31d0ffddf3908647ca6c56874306bbf561b">
        </div>
      </div>
      <div class="col-md-6">
        <div class="content">
            CrashThisParty
        </div>
      </div>
      </div>
    </div>
  </div>
  <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 col-item">
    <div class="card-box">
      <div class="row">
      <div class="col-md-6">
        <div class="image">
          <img src="https://i.scdn.co/image/3265a31d0ffddf3908647ca6c56874306bbf561b">
        </div>
      </div>
      <div class="col-md-6">
        <div class="header">
            CrashThisParty
        </div>
      </div>
      </div>
    </div>
  </div>
  <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 col-item">
    <div class="card-box">
      <div class="row">
      <div class="col-md-6">
        <div class="image">
          <img src="https://i.scdn.co/image/3265a31d0ffddf3908647ca6c56874306bbf561b">
        </div>
      </div>
      <div class="col-md-6">
        <div class="content">
            CrashThisParty
        </div>
      </div>
      </div>
    </div>
  </div>
  <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 col-item">
    <div class="card-box">
       <div class="row">
      <div class="col-md-6">
        <div class="image">
          <img src="https://i.scdn.co/image/3265a31d0ffddf3908647ca6c56874306bbf561b">
        </div>
      </div>
      <div class="col-md-6">
        <div class="content">
            CrashThisParty
        </div>
      </div>
      </div>
    </div>
  </div>
  <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 col-item">
    <div class="card-box">
       <div class="row">
      <div class="col-md-6">
        <div class="image">
          <img src="https://i.scdn.co/image/3265a31d0ffddf3908647ca6c56874306bbf561b">
        </div>
      </div>
      <div class="col-md-6">
        <div class="content">
            CrashThisParty
        </div>
      </div>
      </div>
    </div>
  </div>
</div>

A fiddle here : https://jsfiddle.net/vea6w65u/

Related Articles

Copyright (C) 2017 ceus-now.com, All Rights Reserved. webmaster#ceus-now.com 14 q. 0.879 s.