CODEWITHSUNDEEP
csstwitter-bootstrap
user1260928
user1260928

Reputation: 3429

How to apply a vertical divider between div

I want to apply a vertical divider in my view.
I have done that: (see code snippet in full expanded view)

.grid-divider {
  position: relative;
  padding: 0;
}

.grid-divider>[class*='col-'] {
  position: static;
}

.grid-divider>[class*='col-md-4']:nth-child(n+1):before {
  content: "";
  border-left: 1px solid #DDD;
  position: absolute;
  top: 0;
  bottom: 0;
}

.col-padding {
  padding: 0 15px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="row grid-divider">
  <div class="col-md-4 text-center">
    <h1>Prévisionnel</h1>
    <div class="form-group">
      <label class="control-label col-md-3 control-label-tv" for="field_budgetCoutMateriaux">Budget Cout Materiaux</label>
      <div class="col-md-3">
        <input type="number" class="form-control" name="budgetCoutMateriaux" id="field_budgetCoutMateriaux" ng-model="vm.chantier.budgetCoutMateriaux" />
      </div>
    </div>

  </div>
  <div class="col-md-4 text-center">
    <h1>Prévisionnel</h1>
    <div class="form-group">
      <label class="control-label col-md-3 control-label-tv" for="field_budgetCoutMateriaux">Budget Cout Materiaux</label>
      <div class="col-md-3">
        <input type="number" class="form-control" name="budgetCoutMateriaux" id="field_budgetCoutMateriaux" ng-model="vm.chantier.budgetCoutMateriaux" />
      </div>
    </div>
  </div>
  <div class="col-md-4 text-center">
    <h1>Prévisionnel</h1>
    <div class="form-group">
      <label class="control-label col-md-3 control-label-tv" for="field_budgetCoutMateriaux">Budget Cout Materiaux</label>
      <div class="col-md-3">
        <input type="number" class="form-control" name="budgetCoutMateriaux" id="field_budgetCoutMateriaux" ng-model="vm.chantier.budgetCoutMateriaux" />
      </div>
    </div>
  </div>
</div>

But I am getting that : enter image description here

I don't know how to place the divider in a better way. Is there a way to well separate the three parts?

Thanks.

Upvotes: 1

Views: 1444

Answers (1)

Awadhesh verma
Awadhesh verma

Reputation: 540

Follow this css:

.grid-divider>[class*='col-'] {
     position: relative;
 }
.grid-divider>[class*='col-md-4']:nth-child(n+1):before {
    content: "";
    border-left: 1px solid #DDD;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
 }

Upvotes: 1

Related Questions