Does Materialize CSS framework have a "container-fluid" equivalent?

Question

I am creating a website for a friends band, and I decided it'd be a good time to learn a new mobile first framework.

One of the biggest things I see bands doing is adding full width images (example), and I remembered reading this article about full-width rows in Bootstrap, and searched through Materialize's grid documentation, to no avail.

What I need is a way to create this "full width" row, ideally without breaking responsiveness. From my understanding, Bootstrap utilizes padding & margins in "container-fluid" (e.g., width: 100%;, padding: 0; margin: -15px;, where body I believe has a margin: 15px; padding: 15px;), which easily allows for the full-width rows, but Materiallize does not. Any help would be greatly appreciated, my design skills are not the best!

Answer 1

You could also do something like

.container{
            width: 100%;
            max-width:initial;
            > .row{
                margin: 0;
                > .col{
                    padding: 0;
                }
            }
        }

in your scss.

Here's the example:

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/css/materialize.min.css" rel="stylesheet"/>
<style>
.col {
  background-color: tomato;
}

.yellow {
  background-color: yellow;
}

.blue {
  background-color: blue;
}

.container {
  width: 100%;
  max-width:initial;
}
.container > .row {
  margin: 0;
}
.container > .row > .col {
  padding: 0;
}
</style>
<div class="container">
  <div class="row">
    <div class="col s12">
      This div is 12-columns wide on all screen sizes
    </div>
    <div class="col s6 yellow">6-columns (one-half)</div>
    <div class="col s6 blue">6-columns (one-half)</div>
  </div>
  <div class="row">
    <div class="col s12">
      This div is 12-columns wide on all screen sizes
    </div>
   
  </div>
</div>