CODEWITHSUNDEEP
csstwitter-bootstrapresponsive-designtwitter-bootstrap-3breakpoints
Ty Bailey
Ty Bailey

Reputation: 2432

Make Bootstrap 3 have same breakpoints as Bootstrap 2

I'm in the process of converting a Bootstrap 2 site to Bootstrap 3. I'm not changing the layout at all and I need the breakpoints to remain the same during this conversion.

Bootstrap 2 breaks down to the stacked mobile view at the iPad portrait viewport, which I believe is 992px. I know you can customize Bootstrap 3's breakpoints here: http://getbootstrap.com/customize/ but I'm wondering what should I set the 4 LESS breakpoint variables to be for it to break down just like Bootstrap 2 does?

Upvotes: 1

Views: 890

Answers (2)

zessx
zessx

Reputation: 68790

You might no be able to get the expected behavior, migrating from to because :

  • TB3 is mobile first, not TB2
  • TB3 uses 4 differents layouts, and TB2 uses 5

Here are TB2 breakpoints :

  • >=1200px : Large display
  • >=980px : Default
  • >=768px : Tablets
  • <=767px : Phones to tablets
  • <=480px : Phones

And TB3 ones :

  • <=767px : Extra smal devices (Default)
  • >=768px : Small devices
  • >=992px : Medium devices
  • >=1200px : Large devices

If you're lucky, Phones to tablets and Phones styles are similars. If they're, you just have to set those LESS variables :

  • @screen-xs: 480px (default)
  • @screen-sm: 768px (default)
  • @screen-md: 980px
  • @screen-lg: 1200px (default)

As both Phones to tablets and Phones layouts were fluid in TB2, you won't have to change anything to get it working in TB3.

If you're not lucky, and Phones to tablets and Phones styles differents, you'll need to adapt your layout. Your problem is that TB3 merged Phones to tablets and Phones layouts, and you can't easily remove a breakpoint.

Upvotes: 2

theRyanMark
theRyanMark

Reputation: 710

Bootstrap 2 vs. Bootstrap 3 @media Comparison

Large Devices:Desktops

Bootstrap 2 >= 1200px

Bootstrap 3 >= 1200px

Medium devices

Bootstrap 2 >= 768px and <= 979px

Bootstrap 3 >= 992px

Small Devices:Tablets

Bootstrap 2 <= 767px

Bootstrap 3 >= 768px

Extra Small Devices

Bootstrap 2 <= 480px

Bootstrap 3 < 768px

Twitter Bootstrap 2 widths:

/* Large desktop */
@media (min-width: 1200px) { ... }
 
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }
 
/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }
 
/* Landscape phones and down */
@media (max-width: 480px) { ... }

Bootstrap 2 @media Documentation is found here
Bootstrap 3 @media Documentation is found here

Great Migration Guide

Upvotes: 3

Related Questions