bootstrap container full width when small

Jeremy_9266 0
Viewed 8457

I have a bootstrap container that looks great on medium & larger. When small I want the container to be full width. I put mx-2 mx-md-auto clases on it, which causes it to left align nicely on small screens, but not go full width, because the container is normally a fixed width (510px). I don't want to modify the bootstrap container breakpoints, as I'd rather utilize responsive classes for this specific use of container. Anything I can do here?

bootstrap-4 twitter-bootstrap
3 Answers

On small screen (xs) Bootstrap sets width: auto to .container so it should be full screen by default.

Also Bootstrap is mobile-first framework so you should always start from the smallest screen and then override on larger screens. So normally you start with .col-X and then override it with .col-[screen]-Y if needed.

For example take a look at the following snippet and try to resize it:

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container">
  <div class="row">
    <div class="col-12 col-sm-6 col-md-3 col-lg-2">
      Test 1
    </div>
    <div class="col-12 col-sm-6 col-md-3 col-lg-2">
      Test 2
    </div>
  </div>  
</div>

user_32859450

Use custom CSS to override max-width of the container when reaching the desired width.

The max-width css property of the container that restricts its width. Since bootstrap does not have a utility class for max-width, you need to override it yourself. 

@media (max-width: 767.98px) {
  .mx-w-100 {
    max-width: 100% !important;
  }
}

user_82921780

Bootstrap will set containers on an xs screen to be full-width. If you want to have the container take the full width on other sizes, try

@media (max-width: 767.98px) {
  /*By default, containers are only full-width on xs screens. 
  This makes them full-width om sm screens as well*/
  .container {
    margin-left: 0;
    margin-right: 0;
    max-width: 100% !important;
  }
}

768px is the breakpoint between sm and md. If you want this to happen for any other screen sizes you can increase the media query to be between md and lg or lg and xl (however, at this point, you probably just want to use a container-fluid)

user_59090890
Related