Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Bootstrap 3 stacking issue - 1st col drops on medium

Bootstrap 3 stacking issue - 1st col drops on medium

Problem

I have the code below in Bootstrap 3. It all works perfectly except if you are on the tablet the logo drops down and doesn't stay top left. It works great on phone and works great on desktop.... What am I missing?

http://www.bootply.com/K3G0VtD0OS


  
   
    

  

 
Search bar goes here

Problem courtesy of: chrislhardin

Solution

I believe that this is occurring because you only allow 2 bootstrap columns for BOTH "sharing icons" and "account login". So when you get to tablet size, 2 columns is not enough room and it wraps the "account login" (it does not wrap "sharing icons" because that element has the pull-right class on it).

You can fix this by reducing the unnecessary 8 columns for the search bar to 7 when in col-sm (tablet size), so that the wrapper for "sharing icons" and "account login" can have 3 columns instead of 2, while allowing it to still be 8 in col-md and higher.

Updated bootply

Change One:

sharing icons
account login

Change Two:

Search bar goes here
Solution courtesy of: Tricky12

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Bootstrap 3 stacking issue - 1st col drops on medium

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×