Question 43923 in Html Question posted in
Some basic documentation can be found here.

How can I remove vertical spacing between columns in bootstrap – Html

Basically it created a vertical spacing in columns which I am struggling to find a way to remove

<div


 class="container-fluid">
        <div class="row ">
            <h1 class="heading">A Simple database</h1>
            <h2 class="col-7" id="search-section">Search Bar and others</h2>
            <h2 class="col-5" id="result-section">Result</h2>
        </div>
        <div class="row">
            <div id="data-box" class="col-7">
                <label for="">Search with Serial number   :</label>
                <input type="text" id="search-box" maxlength="5" placeholder="Enter Serial Number">
                <input type="submit" value="Submit" id="sub">
            </div>
            <div id="result-box" class="col-5"></div>
        </div>
    </div>

i tried to use
margin-bottom= 20px
but it didn’t work

Tags:

2

Answers


  1. 0

    You can use the CSS property margin-bottom with a value of 0 to remove the vertical spacing between columns in Bootstrap

    <div class="container-fluid">
  <div class="row">
    <h1 class="heading col">A Simple database</h1>
  </div>
  <div class="row">
    <h2 class="col-7" id="search-section">Search Bar and others</h2>
    <h2 class="col-5" id="result-section">Result</h2>
  </div>
  <div class="row">
    <div id="data-box" class="col-7">
      <label for="">Search with Serial number:</label>
      <input type="text" id="search-box" maxlength="5" placeholder="Enter Serial Number">
      <input type="submit" value="Submit" id="sub">
    </div>
    <div id="result-box" class="col-5"></div>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    For Bootstrap 5x use g-0 along with the class row (Docs)

    The gutters between columns in our predefined grid classes can be
    removed with .g-0. This removes the negative margins from .row and the
    horizontal padding from all immediate children columns.

    Example class="row g-0"

    For Bootstrap 4x use the class no-gutters along with row

    Example class="row no-gutters"

    These will remove the column spacing.

    Note: All direct children of element with class row should have a col or col-* class.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search