Categories
Web Design Web Development

Bootstrap 4 Introduction – What’s New

Bootstrap is a well-known and essential platform for web developers and front-end developers. Currently, the latest version of Bootstrap is v3.3.6. The Bootstrap project has stepped into their fourth birthday on 19th August 2015 and on the same day they have announced the upcoming version of Bootstrap 4.

Currently, it’s in the alpha stage and the source code is available in a GIT branch for forks. They have not declared the final release date of Bootstrap 4 yet. However, there is a predeclared development plan of having a few “alpha” releases, then two “beta” and two “RCs” (release candidates), and then the final version will be released.

Importantly, they have also announced that, unlike withdrawing further support for v2.x after the release of v3.0, which was a mistake, they will continue the support for v3.x after the release of Bootstrap 4.

Update 12th May 2020:

The team has released the latest stable version Bootstrap 4 (v4.5.0) today.

There are major changes that have been made in Bootstrap 4 and it is a rewrite of almost the entire project. Very old browser support has been dropped, moved from LESS to SCSS, switched from the px unit system to the em based unit system, some components have been dropped, and some new components have been added. Let’s see what are the changes and new features in Bootstrap 4.

Bootstrap 4 – Installation

Firstly, before you can check what are the new changes in the latest version, you need to get the source code from GIT into your system. Here’s a way below to do that.

#1 Clone the repository
git clone https://github.com/twbs/bootstrap
#2 Navigate to the directory
cd bootstrap
#3 Fetch all the remote branches
git fetch
#4 Switch to the version 4 development branch
git checkout v4-dev

Subsequently, after cloning the repository, you need to compile the SASS files and in order to do that, you need to use the gruntfile within the package. Node.js and Grunt.

npm install
npm install -g grunt-cli
grunt watch

Update 12th May 2020:
bootstrap 4

Here’re the available CDN versions below.

<link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" integrity="sha384-XXXXXXXX" crossorigin="anonymous">
<script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js" integrity="sha384-XXXXXXXX" crossorigin="anonymous"></script>

Update 12th May 2020:
bootstrap 4 cdn

Bootstrap 4 – What’s New

Moved from Less to Sass.

Therefore, Bootstrap 4 now compiles faster than ever.

Improved grid system.

Added a new grid tier to better target mobile devices and completely overhauled the semantic mixins.

Opt-in flex box support.

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

Dropped wells, thumbnails, and panels for cards.

To clarify, Cards are a brand new component to Bootstrap 4, but they’ll feel familiar as they do nearly everything wells, thumbnails, and panels did.

Consolidated all the HTML resets into a new module, Reboot.

Reboot steps in where Normalize.css stops, giving you more opinionated resets like box-sizing: border-box, margin tweaks, and more all in a single Sass file.

Brand new customization options.

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

Dropped IE8 support and moved to rem and em units.

The team has dropped support for IE8. It means we can take advantage of the best parts of CSS without being held back with CSS hacks or fallbacks. Pixels have been swapped for rems and ems where appropriate to make responsive typography and component sizing even easier. If you need IE8 support, keep using Bootstrap 3.

Rewrote all the JavaScript plugins.

The Bootstrap team has rewritten every plugin in ES6 to take advantage of the most recent JavaScript enhancements. Most importantly, they also now come with UMD support, generic teardown methods, option type checking, and tons more.

Improved auto-placement of tooltips and popovers with the help of a library called Tether.

Improved documentation.

They rewrote it all in Markdown and added a few handy plugins to streamline examples and code snippets to make working with the docs way easier. In addition, an improved search is also on its way.

Get started!

And lots more! For instance, custom form controls, margin and padding classes, new utility classes, and more have also been included.

If you are an early learner, here is the guide of the new bootstrap version for you.

Subsequently, with the Bootstrap 4 alpha release, the team has launched another side project of Official Bootstrap Themes which is a great addition to this platform.

By Supratim Roy

I'm a technology enthusiast with over fifteen years of hands-on work experience in the IT industry. My specialization in web development technology, allows me to quickly adopt innovative approaches and leading-edge technology solutions.

After passing the HS, I joined B.Com. under the CU. From the second year, I started studying computer courses. After graduating in Computer Applications (BCA) from Indira Gandhi National Open University (IGNOU), I started my career as a Jr. Software Dev. in 2005. After four years, in 2009, I got the opportunity to pursue a master's degree. In 2011, I completed MCA from Sikkim Manipal University (SMU). I carried out the journey of my carrier as Jr. Software Dev., Sr. Software Dev., TL, and PM. Now I'm working as the VP of Technology & Product at CodeClouds.

I use my technical knowledge, skill, expertise, and previous experience to analyze the requirements of the clients and understand their business philosophy. I try to deliver quality solutions and products in a timely manner with a high percentage of accuracy. I also prepare and manage project specifications, scope documentation, workflow, data diagram, and development documentation. I lead a team of around 50 highly talented members in a well-formed and structured way.

I love listening to music and watching the action, adventure, thriller, horror movies, and Discovery, Animal Planet, and Nat Geo TV channels. Photography is also one of my hobbies, however, I'm really an amateur! I like to read technical articles, journals, and documentaries about Indian Himalayas and wildlife. I'm passionate about adventure sports. I encourage peoples to love adventure sports.

I've traveled to many places and trekked in several parts of the Himalayas in India and Nepal. I'm a member of "MTG - Miles To Go" - a nature lover's association in Kolkata. I've done the Rock Climbing course from Parvat Abhiyatri Sangha affiliated with Anandabazar Patrika. I also participate in several community initiatives taken by an NGO.

Leave a Reply