What is Bootstrap?

Bootstrap is a free front-end framework for faster and easier web development

Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins

Bootstrap also gives you the ability to easily create responsive designs

What is Responsive Web Design?

Responsive web design is about creating web sites which automatically adjust themselves to look good on all devices, from small phones to large desktops.

Why Use Bootstrap?

Advantages of Bootstrap:

Easy to use:

Anybody with just basic knowledge of HTML and CSS can start using Bootstrap

Responsive features:

Bootstrap’s responsive CSS adjusts to phones, tablets, and desktops

Mobile-first approach:

In Bootstrap 3, mobile-first styles are part of the core framework

Browser compatibility:

Bootstrap is compatible with all modern browsers (Chrome, Firefox, Internet Explorer, Safari, and Opera)

Latest version of Bootstrap 4 Alpha 6

Alpha 6 has landed, and it’s one of our biggest ships to date. We’ve rewritten our grid system and all major components in flexbox, forging ahead with it as our default layout option as we drop IE9 support. With 700 commits since our last release, we have some catching up to do.

Embracing Flexbox :

Bootstrap 4 is now flexbox by default! Flexbox is an immensely powerful layout tool, providing unparalleled flexibility (hah) and control to our grid system and core components. It comes at the cost of dropping IE9 support, but brings significant improvements to component layout, alignment, and sizing.

If you’re unfamiliar with flexbox, here’s some of the power you can expect to utilize in Bootstrap 4:

  • Automatic equal-width grid columns (e.g., two columns are automatically 50% wide)
    Equal height and equal width cards
  • Vertical and horizontal centering without hardcoding values with translateor margin
  • Utility classes for easily (and responsively!) changing display, direction, alignment, and more
  • Auto margins for easy spacing
  • Justified navigation and button groups
  • No more HTML white space or broken table-style rendering.

Grid updates :

Our grid system has been updated and is more flexible than ever. New in Alpha 5 are breakpoint specific grid gutters. That’s right, now you can customize the width of your gutters across each and every grid tier by modifying the Sass map.

The .container behaviors have changed slightly in Alpha 5. We now set the width of each container alongside a max-width: 100%; to ensure proper rendering across browsers in both our default and flexbox modes. Similarly, we fixed a bug in our flexbox grid where columns didn’t properly collapse at lower breakpoints.

Lastly, we’ve changed a few breakpoint and container dimensions. The sm tier’s container is now smaller than it’s viewport dimensions and the lg tier has changed from 940px to 960px for grid columns that more cleanly by 12.

Utilities overhaul

Utility classes got a ton of attention with Alpha 5 and will continue to in Alpha Major changes in this release include:

  • Simpler margin and padding syntax (e.g., now mx-auto instead of m-x-auto).
  • Renamed .pull-*-left and .pull-*-right to their CSS properties (e.g., now .float-*-left and .float-*-right).
  • Separated background and color utilities for more explicit styling.
  • Renamed image utilities, moving from .img-rounded and .img-circle to .rounded and .rounded-circle, respectively.
  • Removed the display: block; from .img-fluid as it’s unnecessary for creating responsive images (the inline-block default works great as-is).
  • .Added new vertical-align utilities with .align-top, .align-middle, and more.

1 Comment

  • Moahmmed Riyaz May 16, 2017 at 7:22 am

    Fantastic blog Made by Riyaz Good job Man Keep it up…!

    Reply

Leave a Comment