CODEWITHSUNDEEP
csstwitter-bootstrapyii2material-designbootstrap-material-design
ʍѳђઽ૯ท
ʍѳђઽ૯ท

Reputation: 16976

Full width container or jumbotron in Yii2 With Material Bootstrap Library

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.

Upvotes: 0

Views: 2081

Answers (2)

ScaisEdge
ScaisEdge

Reputation: 133380

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

Upvotes: 2

vanburen
vanburen

Reputation: 21663

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>

Upvotes: 2

Related Questions