Full width container or jumbotron in Yii2 With Material Bootstrap Library - css

Question

I'm trying to get full width container with jumbotron or something like this in full width:
<div class="container" style="margin: 0 auto;width: 100%;background-color: red">
<div class="jumbotron">
<h1>Full Width Layout</h1>
<p class="lead">The Bootstrap 3 grid is fluid only. This example shows how to use a custom container to create a fixed width layout.</p>
<p><a class="btn btn-large btn-success" href="http://bootply.com/tagged/bootstrap-3" target="ext">More
Examples</a>
</p>
</div>
</div>
currently i'm using : https://github.com/FezVrasta/bootstrap-material-design with Yii2.
I've tryied everything about this, but still the problem exist and it's not full width.

Answer 1

If you want full width
you don't have to use container in your page and remember to remove this class also from the layout you are using. (or you can define a layout without this class and set in your action $this->layout= "yourNewLayout"; before render the page) typically the default layout is located in /view/layouts/main.php
then you must remove this line:
class="container"
then you can see a full with yii2 web app.
and just a minor
you shuold use:
style="margin: 0 auto;width: 100%; background-color: red;">

Answer 2

To make the jumbotron full width, and without rounded corners, place
it outside all .containers and instead add a .container within.
<div class="jumbotron">
<div class="container">
...
</div>
</div>
See Docs
And since you're using Bootstrap-Material, you can use the built in classes to add color (this is dependent on the material-fullpalette.css, not material.css, See Docs)
See Working Example Snippets.
$.material.init()
/*ADD YOURSELF*/
.jumbotron.jumbo-red {
background: red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.4.4/css/material-fullpalette.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.4.4/js/ripples.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.4.4/js/material.min.js"></script>
<div class="well">Your Own CSS for Color</div>
<div class="jumbotron jumbo-red">
<div class="container">
<h1>Full Width Layout</h1>
<p class="lead">The Bootstrap 3 grid is fluid only. This example shows how to use a custom container to create a fixed width layout.</p>
<p><a class="btn btn-large btn-success" href="#" target="ext">More
Examples</a>
</p>
</div>
</div>
<hr>
<div class="well">Material CSS for Color</div>
<div class="jumbotron jumbotron-material-red-A700">
<div class="container">
<h1>Full Width Layout</h1>
<p class="lead">The Bootstrap 3 grid is fluid only. This example shows how to use a custom container to create a fixed width layout.</p>
<p><a class="btn btn-large btn-material-green" href="#" target="ext">More
Examples</a>
</p>
</div>
</div>