Borders on bootstrap columns with various height

Borders on bootstrap columns with various height.markdown

Borders on bootstrap columns with various height

A Pen by Theuy Limpanont on CodePen.

License.

index.html

<div class="container-fluid">
  <form action="" class="form-process">
    <div class="row row-relative form-process-body">
      <div class="col-md-8">
        <div class="row row-relative">
          <div class="col-md-6 ">
            <h1>col-md-6</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias doloribus reprehenderit atque dignissimos quasi, repellat, repellendus nisi maxime doloremque cumque adipisci unde deleniti molestiae temporibus iure natus ipsa ducimus, ex.
            </p>
          </div>
          <div class="col-md-6 col-border-left">
            <div class="col-border-left-padding">
              <h1>col-md-6</h1>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias doloribus reprehenderit atque dignissimos quasi, repellat, repellendus nisi maxime doloremque cumque adipisci unde deleniti molestiae temporibus iure natus ipsa ducimus,
                ex.
              </p>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias doloribus reprehenderit atque dignissimos quasi, repellat, repellendus nisi maxime doloremque cumque adipisci unde deleniti molestiae temporibus iure natus ipsa ducimus,
                ex.
              </p>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12 border-top">
            <h1>col-md-12</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo similique, nostrum reiciendis, ut ab, numquam veritatis iure ullam possimus ipsum odio a officia! Vitae molestiae officia dolor, ducimus optio impedit!</p>
          </div>
        </div>
      </div>
      <div class="col-md-4 col-border-left">
        <div class="col-border-left-padding">
          <h1>col-md-4</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias doloribus reprehenderit atque dignissimos quasi, repellat, repellendus nisi maxime doloremque cumque adipisci unde deleniti molestiae temporibus iure natus ipsa ducimus, ex.
          </p>
        </div>
      </div>
    </div>
    <div class="row row-relative form-process-footer">
      <div class="col-md-12">
        <h1>col-md-12</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo quam dignissimos quod cum asperiores, hic quibusdam inventore perferendis ad nesciunt accusamus earum vero dolore reprehenderit voluptatem quis! Atque, accusamus, cupiditate.</p>
      </div>
    </div>
  </form>
</div>

style.css

body {
  padding: 20px;
}

.form-process {
  background: #F5F8FF;
}

@media screen and (min-width: 768px) {

  .form-process .border-top {
    border-top: 1px dotted #ccc;
  }

  .row.row-relative.form-process {
    border-bottom: 1px dotted #ccc;
    border-right: 1px dotted #ccc;
    border-top: 1px dotted #ccc;
  }
  .row-relative {
    position: relative;
  }

  .col-border-padding {
    padding-left: 15px;
  }

  .col-border{
    padding-left: 0;
    position: static;
  }

  .col-border:before {
    content: '';
    position: absolute;
    height: 100%;
    border-left: 1px dotted #ccc;
  }
}

style.scss

// body {
//   padding: 20px;
// }

$border-color: red;

@mixin border($position) {
  border-#{$position}: 1px dotted $border-color;
}


.form-process-body {
  background: lightgray;
}

.form-process-footer {
  background: gray;
}

@media screen and (min-width: 768px) {
  .form-process-body {
    @include border('top');
    @include border('bottom');
  }
  .border-top {    
    @include border('top');
  }
  .row-relative {
    position: relative;
  }
  .col-border-left-padding {
    padding-left: 15px;
  }
  .col-border-left {
    padding-left: 0;
    position: static;
  }
  .col-border-left:before {
    content: '';
    position: absolute;
    height: 100%;
    @include border('left');
  }
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />