CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
hm hm
hm hm

Reputation: 87

bootstrap set margin left equal to .container

i have a problem with Bootstrap. I want to set two elements - one with content which is centered (lets name it .top) and another which will be equally on the left side to .top and on the right side it'll stick to the right side of the browser (lets name it .btm). I know that when i'll add .container class it will center my .top element (by adding margin-left: auto and margin-right: auto), but how to make the .btm element to be on the same level as .top element on the left side? When i'll set some margin-left i'll lose the value of it in first changing the width of browser. How can i achieve this? Currently i have something like this:

HTML:

<div class="container">
  <div class="row">
    <div class="top">
      <strong>top text</strong>, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum
    </div>
  </div>a
</div>


<div class="row"> 
  <div class="btm"> <!-- i want to make this equal on the left side as the ".top" element-->
    <strong>bottom text</strong>, , lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum
  </div>
</div>

CSS:

body {
  background-color: #cfcfcf;
}
.top{
    height: 100px;
}
.btm{
  margin-left: 10%;
  background: #008B4F;
}

Here's the codepen: http://codepen.io/anon/pen/YGdmQG

Upvotes: 0

Views: 1702

Answers (3)

Logeshwaran
Logeshwaran

Reputation: 461

You Should Close <div class="container"> at last after to the .btm section.

What you did is you have closed the div immediatly after the ".top" section.

And remove margin-left:10% on your .btm css.

Your HTML Should Be:-

     <div class="container">
        <div class="row">
          <div class="top">
            <strong>top text</strong>, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, 
          </div>
        </div>

        <div class="row"> 
          <div class="btm"> <!-- i want to make this equal on the left side as the ".top" element-->
           <strong>bottom text</strong> lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsumipsum
          </div>
        </div>
   </div>

CSS:-

.btm{
  background: #008B4F;
}

Upvotes: 2

Nirmal Krishna
Nirmal Krishna

Reputation: 53

Remove margin left from btm class

   .btm{
      background: #008B4F;
    }

Upvotes: 0

Jazzzzzz
Jazzzzzz

Reputation: 1633

Here you go my friend

body {
  background-color: #cfcfcf;
}
.top{
    height: 100px;
}
.btm{
  background: #008B4F;
}
<div class="container">
  <div class="row">
    <div class="top">
      <strong>top text</strong>, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum
    </div>
  </div>
</div>


<div class="row"> 
  <div class="btm">
    <strong>bottom text</strong>, , lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum
  </div>
</div>

Upvotes: 0

Related Questions