CODEWITHSUNDEEP
csstwitter-bootstrap
Sidney Sousa
Sidney Sousa

Reputation: 3614

Responsive columns in bootstrap

I created one row with a single column(col-lg-12) and another row with two columns(col-lg-12).I noticed that in small devices,the first row does not properly align with the second row.

    <div class="container">  
     <!------------------------------------ first section-------------------------------------------------->
     <div class="row" id="firstSection">
         <div class="col-lg-12">
            <span class="glyphicon glyphicon-tree-deciduous"></span>
           <h2 class="heading2">Your home away from home</h2>
           <h4>Prima luce, cum quibus mons aliud consensu ab eo. Praeterea iter est quasdam res ex<br/>communi.Etiam habetis sem dicantur magna mollis euismod.</h4>
           <p class="p1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae dolorem id in inventore, maiores consequuntur modi? Omnis dolore quam vel. Illo accusantium, porro laudantium saepe necessitatibus id ullam voluptate nihil!<br/></p> 
         </div>
    </div>
     <!------------------------------------ end of first section-------------------------------------------------->

     <!------------------------------------ second section--------------------------------------------------> 
    <div class="row" id="secondSection">
            <div class="col-lg-6">
                <article class="section1">                             
                    <span class="glyphicon glyphicon-tree-deciduous"></span>
                    <h2>BUSINESS TRAVELLER</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore eveniet distinctio non, dolor asperiores ducimus quidem. Tempore exercitationem, velit magnam beatae quia, similique, eaque aliquam provident inventore iste et sequi! and fre</p>
                    <button type="button" class="btn btn-default">READ MORE</button>              
                </article>      
            </div><!--  end of column --->

            <div class="col-lg-6">
                <section class="section2">
                    <span class="glyphicon glyphicon-tree-deciduous"></span>
                    <h2>ACCOMPANYING A LOVED-ONE</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing       elit. Dolore eveniet distinctio non, dolor asperiores ducimus quidem. Tempore exercitationem, velit magnam beatae quia, similique, eaque aliquam provident inventore iste et sequi!</p>
                    <button type="button" class="btn btn-default">READ MORE</button>
                </section>
            </div><!--  end of column --->       
     </div><!-- row -->!>
      <!------------------------------------ end of second section------------------------------------------->
</div><!-- end of container -->

and below is the css code

   #firstSection{
   background-color:#ffffff;
   margin-left:12px;
   margin-right:12px;
   padding-top: 120px;
   margin-top:-80px;   
   }

   .section1{
   background: #ffffff;
   padding: 50px;
   margin-top:30px;
   margin-left:px;
   }
   .section2{
    background: #ffffff;
    padding: 50px;
    margin-left:20px;
    margin-top:30px;
    }

Upvotes: 0

Views: 37

Answers (1)

Dhaval Chheda
Dhaval Chheda

Reputation: 5187

change your <div> declaration as follows 

<div class="col-lg-12 col-xs-12"> <!-- this will align the element in the same manner on small screen as it would have on larger screens -->

for identical alignment don't add any margin or padding to these divs

Upvotes: 1

Related Questions