CODEWITHSUNDEEP
twitter-bootstrapbootstrap-4
Jeremy
Jeremy

Reputation: 46440

bootstrap container full width when small

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?

Upvotes: 5

Views: 16009

Answers (3)

mahan
mahan

Reputation: 15035

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;
  }
}

Upvotes: 2

Benjamin U.
Benjamin U.

Reputation: 638

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)

Upvotes: 1

rkm
rkm

Reputation: 3151

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>

Upvotes: 7

Related Questions