Why you need to switch to bootstrap 4.0?

1
Why you need to switch to
Bootstrap 4.0?
www.markupbox.com
2
Content

• Major upgrades in Bootstrap 4.0
• Rems based grid system
• Optional support for flexbox
• Enhanced media queries
• Addition of cards
• Inclusion of Reboot.css
• Saas variables
• Javascript enhancement
• How it will improve website performance?
• How markupbox.com can help you in switching your
  website?

3
(No Transcript)
4
Major upgrades in Bootstrap 4.0

• When Mark Otto and Jacob Thornton had launched
  Bootstrap 1.0 four years ago, it wasnt
  responsive and hence was less popular among
  developers. But over the years, the Bootstrap
  frameworks have set new standards, particularly
  in the field of mobile application development.
• And the latest Bootstrap 4.0 indicates several
  awesome features that can encourage the developer
  community to switch to this new framework.
• There are several key enhancements that one can
  witness in this latest Bootstrap framework.
• Read next slides for more information..

5
1. Rems based Grid System

• Although Bootstrap 4.0 comes with the same HTML
  syntax, but the grid system architecture has
  changed significantly.
• Users can use the advanced 12-column grids or
  container-fluid or even nested rows.
• With the rems based grid system, everything
  becomes dynamic.
• This is also going to support application
  development for devices of different sizes.

6
For example, you still can create your advance
12-columns grids like so
7
For example, Or, use container-fluid for
full-width rows
8
For example
nested rows
9
2. Optional Support for Flexbox

• Bootstrap 4.0 supports Flexbox and which can
  allow complex gridding.
• It can quickly allow switching of grid components
  without the need of adjusting the HTML syntax.
• There is no need to use the Match Height feature
  when you opt in for the Flexbox support.

10
3. Enhanced Media Queries

• In Bootstrap 4.0, media queries are configurable
  with Sass.
• It gives you a better control with the
  flexibility of choosing your own break-points.

11
example media queries are configurable with Sass
12
Continue Reading From Next Slide...

• USA 1 404 857 1565
• UK 44 192 360 6144

sales_at_markupbox.com
markupbox.com
13

4. Addition of Cards

• If you were using panels and wells in Bootstrap
  3.0, its time to forget them now.
• In Bootstrap 4.0, you will find Cards instead
  that are nothing but content container.
• Cards includes options of modifying content of
• header,
• footer,
• background color
• a host of other types of contents

14

5. Inclusion of Reboot.css

• Previously, Bootstrap used Normalize.css as its
  CSS reset.
• Normalize is awesome and well-respected.
• With Bootstrap 4, they actually just take
  normalize.css, and add some Bootstrap things to
  it.
• Bootstrap 4.0 has this new reboot component,
  allowing to combine the reset and the base styles
  into a single file.
• Now, you can use just Reboot.css and add some
  Bootstrap components to it.

15

6. Sass Variables

• Bootstrap 4.0 offers better customization
  opportunities, and the inclusion of the Sass
  variables in a single file can make your
  customization task effortless.
• You can custom things like
• Colors
• Options (Flex Box, transitions, rounded, shadows,
  etc.)
• Spacing
• Body (defaults)
• Link Styles
• Grid Breakpoints
• Grid Containers
• Grid Columns
• Typography
• Components
• Tables
• And more

16

7. JavaScript Enhancement

• JavaScript is all set to be the future of the web
  development, and in Bootstrap 4.0, one can
  witness more of the script.
• For example, all plugins are powered with the
  JavaScript with the codes written in ES6.

17
Continue Reading From Next Slide...

• USA 1 404 857 1565
• UK 44 192 360 6144

sales_at_markupbox.com
markupbox.com
18
How it will help in improving a websites overall
performance?

• 1. Fast Compilation
• The developer community is particularly excited
  about the new Bootstrap versions Sass
  orientation, which allows them to a faster
  compilation. Moreover, the customization
  opportunity of Sass variables can encourage
  custom developments.
• 2. Flexible Layouts
• With an enhanced grid system and the Flexbox
  support in Bootstrap 4.0, it allows users to
  create simple layouts in CSS. It also allows
  content alignment in the columns of equal heights
  for the optimization of the layout.

19
How it will help in improving a websites overall
performance?

• 3. Easy Content Modification
• With the inclusion of Cards in this latest
  Bootstrap version, the content modification task
  has got a lot easier. One can now easily modify
  the header, footer, images, background color
  using this new feature.
• 4. Mobile First Framework
• Bootstrap 4.0 is truly meant for the mobile
  application development with its improved grid
  system. By using small size tiers, a developer
  can target the application development for
  devices of different screen sizes, particularly
  mobile devices.

20
How it will help in improving a websites overall
performance?

• 5. User Friendly
• With the improved auto-placement of tools and an
  improved library, developers find Bootstrap 4.0
  as a more user-friendly framework for creating
  responsive designs.
• 6. Custom Development
• Bootstrap 4.0 helps customize a number of
  components, such as colors, spacing, link style,
  typography, tables etc. Moreover, the Sass
  variables bring a greater customization
  opportunity.
• 7. Better Use of Plugins
• In Bootstrap 4.0, plugins are written in ES6 and
  are compiled with Babel. This helps users to
  maintain plugins more easily and one can use a
  number of plugins for feature enhancement.

21
How markupbox has an edge in this field?

• At MarkupBox, a team of developers has been using
  Bootstrap frameworks for application developments
  since the very inception of this framework.
• With the release of the Alpha version of
  Bootstrap 4.0, the team is gearing up to leverage
  on its new features and capabilities.
• The developers are learning about the new
  inclusions in this latest Bootstrap version and
  are ready to use the improvements to create more
  responsive designs.

22
About MarkupBox

• We are a focussed markup services firm offering
  quality and affordable PSD to HTML conversion
  services to our clients from all over the world.
  We have been in the business for approximately 8
  years now and have delivered over 4000 projects
  successfully for various business houses, digital
  agencies and freelances from all over the world.
• More than 70 of our business comes from our
  existing customers who have enjoyed using our
  services at an affordable cost.
• We would feel privileged to know your
  requirements. Get in touch today

23

• USA 1 404 857 1565
• UK 44 192 360 6144

sales_at_markupbox.com
markupbox.com
24
Thanks )