CODEWITHSUNDEEP
htmltwitter-bootstrap
Umar
Umar

Reputation: 65

Bootstrap containerception work aroud?

I'm trying to create this layout.

check image

Is it possible to create this layout without having to use multiple containers?

I have tried to position the content absolute and it just gets messy. The content (one half) needs to be in a container while the background (grey and image) span full width

<article class="tiled">
     <div class="container">
          <div class="row">
              <div class="col-sm-6">
                  <h2>The problem</h2>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                  <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
               </div>
               <div class="col-sm-6">
                  <img src="images/the-problem.jpg"/>
              </div>
          </div>
     </div>
</article>

Upvotes: 1

Views: 57

Answers (2)

Alexander
Alexander

Reputation: 4527

You could set background on the .container element.

.bg{
  background: gray;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

      <div class="container bg">
        <div class="row">
          <div class="col-xs-6">
            <h2>The problem</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </div>
          <div class="col-xs-6">
            <img class="img-responsive" src="https://i.sstatic.net/4EmfQ.png"/>
          </div>
        </div>
      </div>

Or use Nesting columns, for example:

.bg {
  background: gray;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-xs-12 bg">
      <div class="row">
        <div class="col-xs-6">
          <h2>The problem</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
        <div class="col-xs-6">
          <img class="img-responsive" src="https://i.sstatic.net/4EmfQ.png"/>
        </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

sumit chakraborty
sumit chakraborty

Reputation: 141

#first_half{background-color:grey;}
#second_half{width:100%;height:100%;background-image:url('images/the-problem.jpg');background-size:contain;background-repeat:no-repeat;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<article class="tiled">
          <div class="container">
            <div class="row">
              <div class="col-sm-6 col-xs-6" id="first_half">
                  <h2>The problem</h2>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                  <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
              </div>
              <div class="col-sm-6 col-xs-6" id="second_half">
                
              </div>
            </div>
          </div>
        </article>

If you want exactly what is in the image that you shared, then you should go about like this: 1. One whole container.
2. Inside we have 1 row with full column width.
3. Inside that we have 1 row with 2 columns of col-lg-6 width of bootstrap (50%).
4. Now this becomes your main layout.
5. With the first half you can do whatever you want regarding the text and background color.
6. Now the most important part, the second half. Do you want to keep the image as image in the div or background image of the div.

         Pros : Image will have width and height of container div and hence making it responsive becomes much easier and the image will always span the whole div making your container looks more responsive rather than a newspaper clipping.

         Cons : Image can get distorted due to change in aspect ratio of your div if not thought through carefully.

7. I generally use the background option with a bit of media queries to go along with.

Sorry I don't have the image but if you put the image there it will work just fine

Upvotes: 0

Related Questions