Migration from

Bootstrap v3.x to
v4.x

When Bootstrap was first launched, it has gained popularity in the

web design and development world. From entirely CSS-driven style
sheets to a powerful, mobile-first, responsive, front-end framework
with lots of new features added including host of JavaScript plugins,
tools and icons that go hand in hand with forms and some more
components, its safe to say that Bootstrap has come a long way.
As of this writing, we have Bootstrap 4 with an alpha version which
is an incomplete release and not suitable for production. With this
version there are major changes in store. Lots of new features are
added and customization options will be available

WHY DESIGNERS LOVE

BOOTSTARP

Powerful Grid System: Bootstrap has the best responsive,

mobile first grid system available. Its easy to use and flexibility that
allows you to produce prototype layouts and make customization
easy.

Customization: Bootstrap is completely customizable. That

means you can create a different design from it, abandoning the
basic look of bootstrap templates.

Excellent documentation: Bootstrap has exceptional

documentation which can help you understand any part of the
framework whether you are a beginner or pro.

Rapid Development: Bootstrap offers reusable CSS and

JavaScript components that can help designers to easily create
the functionality and elements they need for their designs.

Migrating to Bootstrap
4

Bootstrap 4 is a major rewrite of almost the entire project. It has been a

massive undertaking that touches nearly every line of code.
Here are major changes to Bootstrap are discussed.

Improved grid system: Weve added a new grid tier to better

target mobile devices and completely overhauled our semantic
mixins.

Opt-in flexbox support is here: The future is nowswitch a

boolean variable and recompile your CSS to take advantage of a
flexbox-based grid system and components.

Dropped wells, thumbnails, and panels for cards: Cards are

a brand new component to Bootstrap, but theyll feel super
familiar as they do nearly everything wells, thumbnails, and
panels did, only better.

Brand new customization options:

Instead of relegating
style embellishments like gradients, transitions, shadows, and
more to a separate stylesheet like v3, weve moved all those
options into Sass variables. Want default transitions on
everything or to disable rounded corners? Simply update a
variable and recompile.

Rewrote all our JavaScript plugins: Every plugin has been

rewritten in ES6 to take advantage of the newest JavaScript
enhancements. They also now come with UMD support, generic
teardown methods, option type checking, and tons more.

Improved auto-placement of tooltips and popovers thanks

to the help of a tool called Tether.

Improved documentation: We rewrote it all in Markdown and

added a few handy plugins to streamline examples and code
snippets to make working with our docs way easier. Improved
search is also on its way.

Things need to know about

Bootstrap 4
As a designer, it is worth studying the news features and updates.
To design websites for Bootstrap you might think differently, but I
dont think its a waste of time to know and understand the things
you need to consider when designing Bootstrap-based websites.

Color: Bootstrap 4 comes with five major colors inside. These

colors comes with their respective classes and prefixes which can
be re-used across different components such as buttons, links
and alerts.

Grid System is Not in Pixels Anymore: In Bootstrap versions

1-3, grids are measured via pixels. However, in Bootstrap 4, grids
are measured via ems and rems. So if you are working on a
Photoshop layout design of a website its quite helpful if you are
going to see what the equivalent measurement of ems to pixel.

The Gutter: Bootstrap usually comes with 30 width gutter,

15px on each side of a column. This means padding left and
right for column will be 15px each side, where as margin left and
margin right for row is 15px. That gives you an idea how you will
put spaces on each columns on your designs. One good thing
about Bootstrap 4 is that allows you customize and compile your
own build based on your needs. This includes color, container
sizes and gutter padding.

Improved Navbar : The hardest and most tricky thing about

using Bootstrap 3 is the navbar. Its tough to figure out because
you need to add a lot of classes just to create it. Moreover, you
also need to go to your CSS to customize the colors and some
styles.

Optimize Styles Using SASS Instead of LESS : Bootstrap 3

used LESS as its main CSS pre-processor, but due its popular
front-end developers contributor it has switch to SASS via Libsass
Sass Complier written in C/C++ Bootstrap 4. Now you can
customize styles such as color, spacing, link styles, typography,
tables, grid breakpoints and containers via _ variables.scss file.

Conclusion
Although Bootstrap is only one of many available frameworks for
creating responsive, mobile-first websites, it offers a lot of
possibilities for designers. Knowing about updates and new
components will make these builds that much easier.