Home/ Questions/Q 9127309
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T07:15:13+00:00

I have a very basic layout done with Twitter Bootstrap: <body> <div class=container> <!–

  • 0

I have a very basic layout done with Twitter Bootstrap:

<body>
<div class="container">

    <!-- Navbar -->
    <div class="navbar">
        <div class="navbar-inner">
            ...
        </div>
    </div>

    <!-- Carousel -->
    <div class="row">
        <div class="span12">
            <div id="myCarousel" class="carousel slide" >
                ...
            </div>
        </div>
    </div>

    <!-- the content -->
    <section id="first_sect">
        <div class="row  alpha07">
            <div class="span12">
                <h1>header</h1>
                <p>Lorem ipsum dolor sit amet...</p>
            </div>
        </div>
    </section>

    <!-- whitespace row -->
    <div class="row  alpha07">
        <div class="span12">
            &nbsp; 
        </div>
    </div>

    <!-- adress footer -->
    <section id="adress section">
        <div class="row  alpha07">...
        </div>
    </section>
    <!-- End of Bootstrap Container -->
</div>
</body>

And i have a row horizontal alignment and width problem, picture tells this better:
enter image description here

  • Red background goes too much to left
  • No padding to the right

Bootstrap is out-of-box no changes made.
Page code: http://jsfiddle.net/thomson256/DMnhL/10/
Twitter bootstrap version 2.2.2

Question is: is this somekind of bug or am i just missing some wrapping html elements or changes to .less variables?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This is working as expected as far as I can see. Add an inner wrapping div for the content area and apply your css to that.

    .inner {
  padding: 2em;
  background: rgba(150, 50, 50, 0.7);
}

    Here is a fork: http://jsfiddle.net/gyf6c/1/.

    • 0