CODEWITHSUNDEEP
javascriptcsstwitter-bootstrap
handcoded
handcoded

Reputation: 43

100% width div inside bootstrap container

I have a Wordpress website where each page should have a full width image underneath the nav bar. The theme I am using uses Bootstrap 3 and all content is loaded into a standard container which I'd like the slider images to break out of and be 100% wide.

If I set the slider to absolute positioning the content beneath the slider image becomes hidden and the image does not push over to the left.

Because there are allot of pages I do not want to have to make lots of templates and would prefer it if the end user didn't have to ring me every time they want to add a new page.

I don't really want to wrap the page content in a standard container because again it isn't very user friendly when in the future new pages are added.

Any ideas as to how to get around this problem would be greatly appreciated.

Upvotes: 2

Views: 287

Answers (1)

Luke
Luke

Reputation: 1806

Can't you just break out of the container div and start a new one after it?

Like this:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <style>
        .greenbox {
            background-color: green;
            width: 100%;
            height: 300px;
        }
        .redbox {
            background-color: red;
            width: 100%;
            height: 300px;
        }

    </style>
</head>
<body>
    <div class="container">
        <div class="greenbox">


        </div>
    </div>
        <!-- This will fill the whole width -->
        <div class="redbox">

        </div>

    <div class="container">

        <div class="greenbox">

        </div>
    </div>
</body>
</html>

Result:

enter image description here

Upvotes: 1

Related Questions