Full width container or jumbotron in Yii2 With Material Bootstrap Library

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.

score 2 · Accepted Answer · edited Nov 25 '15 at 16:08

2

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

edited Nov 25 '15 at 16:08

ʍѳђઽ૯ท

16,646
7
53
108

answered Nov 24 '15 at 19:32

ScaisEdge

131,976
10
91
107

doesn't work i'm not sure why! code: http://paste.ofcode.org/BLGcnjpDmv4M2Z8KeJYnBD – ʍѳђઽ૯ท Nov 25 '15 at 08:34
have you took the classname form the layout (main.php)? I have update the answer.. – ScaisEdge Nov 25 '15 at 15:52
thanks.the problem solved with this your sentence: `remember to remove this class also from the layout you are using` but, what is the best way for doing this, i mean, what will you do with these lines and of course the maincontent? i mean, what class will you use or something like this? because everything's gonna be messed up ! without the container - http://paste.ofcode.org/wxhYED6RLEmYvXXhiL5nSf tnx again – ʍѳђઽ૯ท Nov 25 '15 at 16:10
1

If the my answer is correct please mark as accepted. For your last question the best way the style without container is always used in your app then remove this form yuor layout (main.php) otherwise create a proper layout and when you need change the reference to the layout in your controller/action. If you need you can also define an you class (eg: in yourapp/web/css/site.css) and assign at this class the style you need..I hope this is what you are looking for otherwise please post a more clear question.. – ScaisEdge Nov 25 '15 at 16:20
finally i did it without need any deleting or something like that.just a trick.thank you – ʍѳђઽ૯ท Nov 25 '15 at 16:38
using `container-fluid` as a root tag and using `row` class for `jumbotron` class.everything is ok right now. – ʍѳђઽ૯ท Nov 25 '15 at 17:04

score 2 · Answer 2 · answered Nov 24 '15 at 22:26

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>

Full width container or jumbotron in Yii2 With Material Bootstrap Library

2 Answers2