CODEWITHSUNDEEP
csstwitter-bootstrap-3
Nevi
Nevi

Reputation: 328

Container Fluid Not Full Width

please take a look at my sample code

<div class="container-fluid">
    <section class="parallax-bg-1 text-center" style="background-image:url('https://killtheboredomdotcom.files.wordpress.com/2015/08/skyline-of-rome.jpg?w=1920&h=768&crop=1')">
        <h1 class="">Welcome</h1>

        <p class="lead">subtitle</p>
    </section>
</div>

the picture is in parallax mode but take a look at the screenshot it still has padding.

enter image description here

im trying to achieve the same result as this site: http://remtsoy.com/tf_templates/traveler/demo_v1_7/index.html

JS Fiddle:

http://jsfiddle.net/uf9np3kq/

Upvotes: 5

Views: 22807

Answers (6)

Saurabh Dhumane
Saurabh Dhumane

Reputation: 13

 <p>if you using vb.net so please go **-Layout.chtml** and find</p>

<div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

<p>and change it to the </p>

 <div class="container-fluid">
        <section>
            @RenderBody()
        </section>
    </div>
        <hr />
    <div class="container-fluid">
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

**i hope this method usefull for you..**

Upvotes: 0

Ramlal S
Ramlal S

Reputation: 1643

change 

<div class="container-fluid">
....
</div>

To

<div class="container-fullwidth">
....
</div>

Upvotes: 9

Adrian Enriquez
Adrian Enriquez

Reputation: 8413

Just swap your <section> and your .container-fluid. Assuming that your section has the background image. See updated fiddle below:

Fiddle

Current:

<div class="container-fluid">
  <section>...</section>
</div>

Change to:

<section>
  <div class="container-fluid">...</div>
</section>

Note: This also applies to .container not just .container-fluid

Upvotes: 0

Tushar Khatiwada
Tushar Khatiwada

Reputation: 2027

The default style of container-fluid has padding left and right of 15px. you can override the default behaviour by applying the following style:

.container-fluid{
   padding: 0;
}


.container-fluid{
    padding: 0 !important;
}
section.parallax-bg-1{
background-size: cover;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
    <div class="row">
<section class="parallax-bg-1 text-center" style="background-image:url('https://killtheboredomdotcom.files.wordpress.com/2015/08/skyline-of-rome.jpg?w=1920&h=768&crop=1')">
        <h1 class="">Welcome</h1>

        <p class="lead">subtitle</p>
    </section>
</div>
</div>

Upvotes: 11

n1kkou
n1kkou

Reputation: 3142

Just wrap your content in a div.row: http://jsfiddle.net/uf9np3kq/1/

Upvotes: 0

Andrew Carter
Andrew Carter

Reputation: 109

You might want to use the div class of jumbotron.

<div class="jumbotron">
  <div class="container">
    <h1>Welcome</h1>
    <p>Subtitle>
  </div>
</div>

It would look something like this: http://getbootstrap.com/examples/jumbotron/. Then you can apply the styles as you would like.

Upvotes: 1

Related Questions