Remove margins between rows

user_13587886 0
Viewed 449

I want to remove margins between hello and dd how could i do it.

<div className="container border border-primary">
        <div className="row">
          <div className="">A </div>
            <div className="col">
                <div className="row justify-content-between m-0 p-0">
                    <p>hello</p>
                    <p>hello</p>
                </div>
                <div className='row m-0 p-0'>
                    dd
                </div>
            </div>
        </div>
    </div>

enter image description here

twitter-bootstrap css html
2 Answers

You have to remove the margin of the <p> elements to remove the space between the rows.

You have three possibilities to solve this:

  • Using Bootstrap utility class .m-0 on the <p> elements itself.
  • A custom CSS rule to remove the margin of the <p> elements.
  • Using a <span> element instead of a <p> element.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<div class="container border border-primary">
  <div class="row">
    <div>A</div>
    <div class="col">
      <div class="row justify-content-between m-0 p-0">
        <p class="m-0">hello</p>
        <p class="m-0">hello</p>
      </div>
      <div class='row m-0 p-0'>dd</div>
    </div>
  </div>
</div>

user_38408400

You can use .no-gutters from the Bootstrap grid system.

<div class="row no-gutters">
  <div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
user_43149310
Related