How to achieve this layout with Bootstrap 3

Question

I was wondering if someone knows how I cam accomplish this using Bootstrap 3 while not hacking it.

As you can see from the picture below I'd like to have an inverted navbar at the top. Underneath I'd like to have a bar with black bg that only goes so far (for instance 4 columns with dark bg and the remaining 8 columns with light bg). That's the easy part. The problem I've found is how have the container bg have different colour of background.

At the moment I have this:

That's been achieved using this code:

<div class="navbar navbar-inverse navbar-fixed-top">

<div class="container nt-container">

    <div class="nt-header-top row">

        <div class="col-md-4">

            <h1 class="nt-logo">New Project</h1>

        </div>

        <div class="col-md-8 text-right">

            <h3>Some slogan here</h3>

        </div>

    </div>

    <div class="navbar-header">

        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>

        </button>

    </div>

    <div class="row">

        <div class="col-md-2">

            <ul class="nav navbar-nav">

                <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span></a></li>
                <li><a href="#about"><span class="glyphicon glyphicon-list"></span></a></li>
                <li><a href="#contact"><span class="glyphicon glyphicon-envelope"></span></a></li>

            </ul>

        </div>

        <div class="col-md-10 nt-top-title-bar">

            <section class="row">

                <div class="col-md-8 more-padding-left">

                    <h2 class="">Some slogan here</h2>

                </div>

                <div class="col-md-4 text-right">

                    <ul class="nav navbar-nav navbar-right">

                        <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span></a></li>
                        <li><a href="#about"><span class="glyphicon glyphicon-list"></span></a></li>
                        <li><a href="#contact"><span class="glyphicon glyphicon-envelope"></span></a></li>

                    </ul>

                </div>

            </section>

        </div>

    </div>

</div>

<div class="container nt-container">
<div class="row">

    <section class="col-md-2 nt-side-menu-section">

        <ul class="list-group">
            ...
        </ul>

    </section>

    <div class="col-md-5 more-padding-left">

        <h2>Heading 1</h2>
        <p>...</p>

    </div>

    <div class="col-md-5">

        <h2>Heading</h2>
        <p>...</p>

    </div>

</div>

<hr>

<footer>
    <p>&copy; Company 2013</p>
</footer>

I though maybe I could add div on the right gutter with a light background on top of the container background, but I thought this very hackish and inelegant.

Any suggestions on how to achieve this?

Answer 1

Ok...if I have this right the element in question has a class of .nt-top-title-bar.

You can do this with a pseudo element by adding:

.nt-top-title-bar:after {
  content: "";
  position: absolute;
  background: insert your color here;  /* Match the background of menubar*/
  top: 0;
  bottom: 0;
  width: 9999px;   /* some huge width */
  left: 100%;
} 

Codepen Example

CSS-Tricks Reference