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

Reducing Bootstrap's container's lateral margins without creating your custom CSS. Is it possible? How? – Html

Here’s my web page (I’m sorry, but this post is going to contain quite a few screenshots, I don’t see any other way)

enter image description here

Do you see that scroll bar below the table? I don’t like it. So I decided to reduce lateral margins a little bit. Here’s a list of what I tried

  1. Specify margins manually. Result: no centering
<div class="container m-2">

enter image description here

  1. Using conainer-sm. Result: no margins at all
<div class="container-sm">

enter image description here

  1. Combine both methods. Result: I can’t properly describe it, but it’s weird
<div class="container-sm m-2">

enter image description here

  1. Using mx. Result: no centering
<div class = "container mx-4">

enter image description here

I searched on StackOverflow too (and googled)

How do I reduce lateral margins of my container without overriding Bootstrap’s CSS with my custom stylesheet?

It seems over the top to create your CSS for such a trivial thing (even if it’s as little as <style> .container {margin-left: 4 rem; margin-right: 4 rem} </style>)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<!-- and so forth -->
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

UPD: My latest findings

It has something to do with container‘s max-width (if I increase it from 1140 to, say, 2000, the margins shrink) and also with the outer-most row. See this dashed area? It’s what de-facto increases the margin on the right

enter image description here

I guess mw-100 and justify-content-center are my friends in this situation? It appears so

Tags:

2

Answers


  1. 0

    You can use the built-in container-fluid class instead of container to make the container span the full width of the viewport. This can help eliminate any unwanted lateral margins.

    <div class="container-fluid">
  <!-- Your content here -->
</div>
    Login or Signup to reply.
  2. 0

    You can’t reduce the sizing of Bootstrap containers without overriding the breakpoints that control them, or without overriding the specific container class CSS.

    However, you can switch to the fluid container and contain that with a custom container having widths of your choosing.

    Also, container-sm isn’t a valid Bootstrap 4 class.

    .container,
.container-fluid {
  background: pink;
  margin-bottom: 1rem;
}

.container-container {
  max-width: 95vw;
  margin: 0 auto;
}

@media (min-width: 500px) {
  .container-container {
    max-width: 90vw;
  }
}

@media (min-width: 700px) {
  .container-container {
    max-width: 85vw;
  }
}
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col">Standard container column content here.</div>
  </div>
</div>

<div class="container-container">
  <div class="container-fluid">
    <div class="row">
      <div class="col">Custom container container column content here.</div>
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search