CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Mary
Mary

Reputation: 1135

In Bootstrap, how do I left align my button with the element above?

I have a JSFiddle here:

https://jsfiddle.net/sf4wkyx0/

My 'Add' button isn't quite left aligned with the textarea:

enter image description here

But both are preceded by an element with class col-2 so I'm not sure why the alignment is slightly off.

How do I left align my 'Add' button exactly with the textarea?

Upvotes: 0

Views: 60

Answers (2)

Miroslav Glamuzina
Miroslav Glamuzina

Reputation: 4557

You were nesting you .row classes incorrectly. Just fix the nesting issue and it should be all good.

According to Bootstrap's own API documentation, when nesting columns any columns .col should be nested within a .row. The two should not be combined on a single element.

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="modal-body">
  <div class="modal-body-scrolled border-primary border-bottom p-0 mt-2">
    <div class="row">
      <label for="duration" class="col-2 pl-0">Description</label>
      <div class="col-10 pl-0 d-inline">
        <textarea class="form-control" rows="2" style="min-width: 100%"></textarea>
      </div>
    </div>
    <div class="row">
      <div class="col-2 spacer"></div>
      <div class="col-10 pl-0 d-inline">
        <button type="button" class="btn btn-sm btn-primary ml-auto"> Add </button>
      </div>
    </div>
  </div>
</div>

Upvotes: 0

Robin
Robin

Reputation: 5427

Add pl-0 of your button section's parent, it will be fine.

<div class="row col-12 mb-2 pl-0">
  <div class="col-2 spacer"></div>
  <div class="col-10 pl-0 d-inline">
     <button type="button" class="btn btn-sm btn-primary ml-auto"> Add </button>
  </div>
</div>

You can check this https://jsfiddle.net/7r0b8voj/

Upvotes: 1

Related Questions