CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Josh
Josh

Reputation: 164

Bootstrap rows inconsistent padding

I have a grid template with 3 columns, and my first row in the column is being pushed by a few pixels. What CSS option do I need to change for this? I'm using bootstrapenter image description here

<div class="col">
  <div class="col-sm">
    <input type="redacted" class="form-control" id="redacted" placeholder="" required>
  </div>
</div>
<div class="col">
  <div class="col-sm">
    <input type="redacted" class="form-control" id="redacted" placeholder="">
  </div>
</div>
<div class="col">
  <div class="col-sm">
    <input type="redacted" class="form-control" id="redacted" placeholder="">
  </div>
</div>

Here's the CSS

.gridMatchInputs {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

Upvotes: 0

Views: 140

Answers (1)

blurfus
blurfus

Reputation: 14031

If you remove this line grid-template-columns: 200px 200px 200px; from your CSS and use .row when you want to have elements in a new row, I think you achieve what you are looking for

See demo below 

.gridMatchInputs {
  display: grid;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="gridMatchInputs">
  <!-- Row 1 -->
  <div class="row">
    <!-- column 1 -->
    <div class="col-sm">
      <input type="text" class="form-control" id="1" placeholder="1" required>
    </div>

    <!-- column 2 -->
    <div class="col-sm">
      <input type="text" class="form-control" id="2" placeholder="2">
    </div>
    <!-- column 3 -->
    <div class="col-sm">
      <input type="text" class="form-control" id="3" placeholder="3">
    </div>
  </div>
  
  <!-- row 2 -->
  <div class="row">
    <div class="col-sm">
      <select class="form-control" id="select1">
        <option selected>select1</option>
      </select>
    </div>

    <div class="col-sm">
      <select class="form-control" id="select2">
        <option selected>select2</option>
      </select>
    </div>

    <div class="col-sm">
      <select class="form-control" id="select3">
        <option selected>select3</option>
      </select>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions