0

I am trying to make below HTML layout

Required Layout

As you can see, I have 2 rows and content in 1st row is indented within a Bootstrap Container class. In 2nd row, i have 2 columns having a background color and image respectively and they span across entire screen. However text within them is again indented similar to content in Row 1. Attaching the code i tried.

<div class="container" style="background: bisque;">
    <div class="row">
        <div class="col-xs-12">
            <h1>Normal Boxed Width</h1>
        </div>
    </div>
</div>
<div class="container-fluid">
 <div class="row">
  <div class="col-sm-6" style="background-color:lavender;">
   <div class="row" >
    <div class="container">
     <h1>Left Panel</h1>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae doloribus unde, distinctio a autem, soluta nulla similique. Vero natus deleniti, culpa consequuntur eveniet beatae laudantium in fuga mollitia sapiente! Assumenda!</p>
    </div>
   </div>
  </div>
  <div class="col-sm-6" style="background-color:aliceblue;">
   <h1>Right Panel</h1>
  </div>
 </div>
</div>

I also tried few solutions provided in this link However this doesn't seem to be the right approach. How can i achieve the layout which is shown in above image?

Community
  • 1
  • 1
Rajan Phatak
  • 524
  • 8
  • 24
  • like this? http://codepen.io/anon/pen/bqVbMv – Michael Coker Feb 28 '17 at 01:54
  • @ZimSystem Solution which you are marking as duplicate does not work. I have explicitly given my scenario which does not match with others. Since you mark the question duplicate, people stop responding and i am not getting the answer – Rajan Phatak Feb 28 '17 at 02:34
  • @Michale Coker Its not right answer. Please consider this scenario as 2 columns within container-fluid class and it has a text occupying 50% of container class – Rajan Phatak Feb 28 '17 at 02:36
  • You've been given suggestions that *will* work, but you need to make the effort. If you feel it's not a dup, then post *all* of the relevant code you've tried including the image size, margins, expected responsive layout, etc.. With some effort you should be able to get it working. http://www.codeply.com/go/Oz2q27v68E – Carol Skelly Feb 28 '17 at 02:54
  • 1
    Here's another example: http://www.codeply.com/go/bcBDeEjvoA -- using the same technique as described in the other answer with a few tweaks. – Carol Skelly Feb 28 '17 at 03:04
  • @ZimSystem I tried this solution as well. However this does not work well for me since i have an image spanning till end of page. In this example, since we have used background color, it looks fine. – Rajan Phatak Feb 28 '17 at 04:32

0 Answers0