CODEWITHSUNDEEP
csstwitter-bootstrapresponsive-designtwitter-bootstrap-3
user1981437
user1981437

Reputation: 93

Positioning one div next to others

This is probably is a stupid question but im pretty new to Bootstrap and dont know which is the proper way to fix the following:

I have 5 divs one bellow other ( filled with a pink color ) and another div (filled with a yellow color). There is also a <hr/> line which starts after the div no:5. Like showed on the picture

What i want to do is to place the yellow div right from the pink ones like on the image bellow:enter image description here I have tried to add the yellow div with the length of col-md-10 inside the first row, but it doesnt look like i wanted.

Bootply here.

Any help is appreciated. Keep in mind that everything needs to be responsive.

Upvotes: 2

Views: 72

Answers (3)

syc3r
syc3r

Reputation: 1

The best option is to use the "XS" measure because of, bootstrap is used for mobile first, so that the first measure to take account is the "xs" one and the rest depends on this. I mean that if you put col-xs-12 only, the result for responsive is the same if you put "col-xs-12 col-sm-12 col-md-12, col-lg-12".

For that reason if you want to have the same view as in larger sizes as in smaller sizes you can use like this:

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

    <div class="col-xs-2 text-center">
        <div class="box text-center">1</div>
        <div class="box text-center">2</div>
        <div class="box text-center">3</div>
        <div class="box text-center">4</div>
    </div>  
    <div class="col-xs-10 yellow">  YeLLoW ? </div>    
  </div>
  <hr>

</div>

Upvotes: 0

Turnip
Turnip

Reputation: 36732

Your use or rows is causing this issue. Combine your box's in to a column: DEMO

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

    <div class="col-md-2 col-xs-3 col-sm-2">
        <div class="box text-center">1</div>
        <div class="box text-center">2</div>
        <div class="box text-center">3</div>
        <div class="box text-center">4</div>
    </div>  
    <div class="col-md-10 col-xs-9 col-sm-10 yellow">  YeLLoW ? </div> 

  </div>
  <hr>
</div>

Upvotes: 2

alou
alou

Reputation: 1502

You need to wrap all lef divs in a .col-md-2 container and the yellow part as you have it, something like

     <div class="col-md-2 box col-xs-3 col-sm-2">
       <div class="pink">div 1</div>
       <div class="pink">div 2</div>
       <div class="pink">div 3</div>
       <div class="pink">div 4</div>
       <div class="pink">div 5</div>
     </div>
     <div class="col-md-10 box col-xs-9 col-sm-10">
       <div class="yellow">yellow part</div>

     </div>

Upvotes: 0

Related Questions