CODEWITHSUNDEEP
csshtmlbootstrap-4
NoChance
NoChance

Reputation: 5752

How to left align element inside bootstrap 4 container-fluid

In this case, I need the text in Line 1 and Line 2 to be left aligned without the gap in the left appearing in line 2 regardless of the device size.

I tried to apply m-1, p-1, text-left, and even negative padding but none of those removed the leading space in line 2. Thanks.

JSFiddle containing problem code Here

<h4>Line 1-Header4 </h4>
<div class="container-fluid">
   <h4> Line2-Header4 </h4>  <!-- HERE IS THE ISSUE -->
   <div class="row zz-border-Top2 
      border-bottom border-primary text-center bg-light">
      <div class="col-sm-1 font-weight-bold text-dark bg-warning">
         <h6>Text1</h6>
      </div>
      <div class="col-sm-2">
         <h6> Text 2 </h6>
      </div>
      <div class="col-sm-9 text-left" style="color:navy;">
         <h6>Text 3</h6>
      </div>
   </div>
</div>

Upvotes: 3

Views: 4040

Answers (1)

Temani Afif
Temani Afif

Reputation: 272723

You need to use row inside the container to compensate the padding added by the container with the negative margin of the row

<link rel="stylesheet" type="text/css" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<h4>Line 1-Header4 </h4>
<div class="container-fluid">
  <div class="row">
   <h4> Line2-Header4 </h4>  <!-- HERE IS THE ISSUE -->
  </div>
   <div class="row zz-border-Top2 
      border-bottom border-primary text-center bg-light">
      <div class="col-sm-1 font-weight-bold text-dark bg-warning">
         <h6>Text1</h6>
      </div>
      <div class="col-sm-2">
         <h6> Text 2 </h6>
      </div>
      <div class="col-sm-9 text-left" style="color:navy;">
         <h6>Text 3</h6>
      </div>
   </div>
</div>

Upvotes: 3

Related Questions