2

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

Sebastian Brosch
  • 42,106
  • 15
  • 72
  • 87
Chetan Jain
  • 236
  • 6
  • 16

2 Answers2

2

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>
Sebastian Brosch
  • 42,106
  • 15
  • 72
  • 87
2

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>
Demartini
  • 101
  • 5
  • `.no-gutters` doesn't work here since he don't want to remove the space between columns. He want to remove the space between "hello" and "dd" (vertical) *"I want to remove margins between hello and dd"*. – Sebastian Brosch Jun 30 '20 at 13:02