Having issue with container class in bootstrap?

user_11533703 0
Viewed 83

Here is the link https://vkacademy.in/newm.html

When I create a container for every section I am getting space in between for every container, how to avoid the space for each container.

When you see the output I am getting space for each container that I highlighted. how to avoid the space?

when you see the output I am getting space for each container that I highlighted. how to avoid the space please help me to get out of this

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">

<div class="container">
  <div class="container bg-danger">
    <h1>Bootstrap Tutorial</h1>
    <p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.</p>
  </div>
  <div class="container bg-success">
    <h1>Bootstrap Tutorial</h1>
    <p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.</p>
  </div>
</div>

bootstrap-5 twitter-bootstrap
3 Answers

The space you see is indeed on the paragraphs, but removing that isn't the right approach. Instead, use the overflow-hidden class to make the containers surround that space.

Note that I've removed the outer container wrapper. That's not necessary and not in line with Bootstrap's documentation for layout. Containers shouldn't be directly nested, and rarely should be nested in any fashion.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">

<div class="container bg-danger overflow-hidden">
  <h1>Bootstrap Tutorial</h1>
  <p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.</p>
</div>

<div class="container bg-success overflow-hidden">
  <h1>Bootstrap Tutorial</h1>
  <p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.</p>
</div>

A better solution is to use Bootstrap's layout structure as intended, with row and column elements. This handles overflow automatically, without extra classes. Notice how only one container is needed.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">

<div class="container">
  <div class="row bg-danger">
    <div class="col">
      <h1>Bootstrap Tutorial</h1>
      <p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.</p>
    </div>
  </div>

  <div class="row bg-success">
    <div class="col">
      <h1>Bootstrap Tutorial</h1>
      <p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.</p>
    </div>
  </div>
</div>

user_12648040

Please use this code. Because this is the correct use of "p-0" and "m-0" classes in the "container".

Example: container p-0 m-0

user_145149860

Try this, your problem in tag <p>, I add new class .mb-0

.one {
  background: red;
}

.two {
  background: green;
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />


<div class="container">
  <div class="bg-danger">
    <h1>Bootstrap Tutorial</h1>
    <p class="mb-0">Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.</p>
  </div>
  <div class="container bg-success">
    <h1>Bootstrap Tutorial</h1>
    <p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.</p>
  </div>
</div>

user_20946450
Related