SYS-CON MEDIA Authors: Zakia Bouachraoui, Liz McMillan, Carmen Gonzalez, Roger Strukhoff, David Linthicum

Article

Migrating to Bootstrap 3 with Legacy Code

by Philip Quinn of LogEntries

Bootstrap 3 is now established and stable  after its release a year and a half ago, but there is still a sizeable number of websites and web applications that are still styled using Bootstrap 2.

If you're starting to build a web application, especially for quick prototyping, using Bootstrap 3 is the clear option. But, if you already have a mature application, it is likely you have a large amount of code that needs to be refactored.

This refactoring may not be easy as there are a lot of changes with the the recent Bootstrap upgrade; many breaking changes were introduced by the new version. For example, Class names were combined, renamed and even removed, not to mention the new classes that are now included.

The main challenge is that the two cannot live together in the same application. This is mainly a javascript issue but as there is no benefit of having just the css of both (still not a good idea as this will cause a large amount of duplication) it is best to remove all of bootstrap 2 and replace with the newer version.

So what are these changes?

A major change that could easily make the whole of your styling look incorrect is that bootstrap 3 uses "box-sizing: border-box;" A simple example is putting a 1 pixel border on a 100% width div, with content-box. This will result in a width of 100% + 2 pixels. With border-box, it will be 100%, the border will be inside of the box.

There was also a big consolidation with the class names, which can be seen in the image below.

BS3Migration1

Grid Migration

The grid is now fluid by default. If you need to have a container with a fixed width then you need to use a wrapper to keep it contained.

There is no more span*. Now, there is base column unit named col that is sized using col-lg-*. So instead of span2 you'd now use col col-lg-2. This also works for offsets so offset* is now col-offset-*.

Modal Migration

A major change is that modals are hidden by default, so when converting them you need to remove .hide class from .modal.
The classes .modal-header .modal-body .modal-footer need to be  inside .modal-content which in turn needs to be inside .modal-dialog.

New classes that weren't in the last version include:

BS2Migration2

So how do I switch?

Find and replace all uses of bootstrap 2 with the equivalent bootstrap 3. This is a lot of grunt work, searching the files can be trivial if the html is formatted cleanly and contains no templates. It can be done with lots of tools available online including this handy tool.

But the state of your code may not allow for easy swapping of the classes.

In our case,we had a lot of templates, and some of the classes were generated by javascript and others were part of Angular templates. Parsing these is not easy to automate while still getting 100% accuracy.

The method we ended up using is a more long-term approach which allowed for a more continuous deployment of the code.

You need be able to not break production while still doing a migration in a gradual manner.
And how did you achieve this gradual crossover? Prefixing the version of bootstrap to avoid conflicts. By added a prefix to all the class names, both in the class names and the corresponding javascript, you can migrate parts piece by piece, and still have a stable working bootstrap. Once the whole of the bootstrap is prefixed, you can then bring in bootstrap 3.

Both versions can now live together in the application. This allows for a slower migration, but also mark your code with where needs more refactoring as it is obvious due to the prefixed classes.

This may sound like a mammoth task depending on your code base, and it is by no means trivial, but it IS still doable. The way to go about this is to write a script to find all the uses of bootstrap 2 class and to replace them with a prefixed version. This task may be more manual in places if there is auto generated class names in javascript but this most likely will not be an issue with Bootstrap class names most likely.

The next task is to edit the javascript to avoid conflict with Bootstrap 3's javascript, method names are the same and this will cause havoc in the code base.

Once this is in you will quickly see your success, check all your components are in working order. The best way to see if the behavior of your application is broken would be to have automated testing of the applications behavior using acceptance testing.

Don't worry if you're not quite there yet, and check out this other blog post on acceptance testing that can help you out. Good luck!


10-ways-to-lead-with-analytics

Get set up in minutes, and gain insights in seconds

Start Free Trial Setup a Demo

More Stories By Trevor Parsons

Trevor Parsons is Chief Scientist and Co-founder of Logentries. Trevor has over 10 years experience in enterprise software and, in particular, has specialized in developing enterprise monitoring and performance tools for distributed systems. He is also a research fellow at the Performance Engineering Lab Research Group and was formerly a Scientist at the IBM Center for Advanced Studies. Trevor holds a PhD from University College Dublin, Ireland.

Latest Stories
Moroccanoil®, the global leader in oil-infused beauty, is thrilled to announce the NEW Moroccanoil Color Depositing Masks, a collection of dual-benefit hair masks that deposit pure pigments while providing the treatment benefits of a deep conditioning mask. The collection consists of seven curated shades for commitment-free, beautifully-colored hair that looks and feels healthy.
The textured-hair category is inarguably the hottest in the haircare space today. This has been driven by the proliferation of founder brands started by curly and coily consumers and savvy consumers who increasingly want products specifically for their texture type. This trend is underscored by the latest insights from NaturallyCurly's 2018 TextureTrends report, released today. According to the 2018 TextureTrends Report, more than 80 percent of women with curly and coily hair say they purcha...
The textured-hair category is inarguably the hottest in the haircare space today. This has been driven by the proliferation of founder brands started by curly and coily consumers and savvy consumers who increasingly want products specifically for their texture type. This trend is underscored by the latest insights from NaturallyCurly's 2018 TextureTrends report, released today. According to the 2018 TextureTrends Report, more than 80 percent of women with curly and coily hair say they purcha...
We all love the many benefits of natural plant oils, used as a deap treatment before shampooing, at home or at the beach, but is there an all-in-one solution for everyday intensive nutrition and modern styling?I am passionate about the benefits of natural extracts with tried-and-tested results, which I have used to develop my own brand (lemon for its acid ph, wheat germ for its fortifying action…). I wanted a product which combined caring and styling effects, and which could be used after shampo...
The precious oil is extracted from the seeds of prickly pear cactus plant. After taking out the seeds from the fruits, they are adequately dried and then cold pressed to obtain the oil. Indeed, the prickly seed oil is quite expensive. Well, that is understandable when you consider the fact that the seeds are really tiny and each seed contain only about 5% of oil in it at most, plus the seeds are usually handpicked from the fruits. This means it will take tons of these seeds to produce just one b...
Steaz, the nation's top-selling organic and fair trade green-tea-based beverage company, announces its 2017 "Mind. Body. Soul." tour, which will bring authentic experiences inspired by the brand's signature Mind. Body. Soul. tagline to life across the country. The tour will inform, educate, inspire and entertain through events, digital activations and partner-curated experiences developed to support the three pillars of complete health and wellness.
The platform combines the strengths of Singtel's extensive, intelligent network capabilities with Microsoft's cloud expertise to create a unique solution that sets new standards for IoT applications," said Mr Diomedes Kastanis, Head of IoT at Singtel. "Our solution provides speed, transparency and flexibility, paving the way for a more pervasive use of IoT to accelerate enterprises' digitalisation efforts. AI-powered intelligent connectivity over Microsoft Azure will be the fastest connected pat...
There are many examples of disruption in consumer space – Uber disrupting the cab industry, Airbnb disrupting the hospitality industry and so on; but have you wondered who is disrupting support and operations? AISERA helps make businesses and customers successful by offering consumer-like user experience for support and operations. We have built the world’s first AI-driven IT / HR / Cloud / Customer Support and Operations solution.
ScaleMP is presenting at CloudEXPO 2019, held June 24-26 in Santa Clara, and we’d love to see you there. At the conference, we’ll demonstrate how ScaleMP is solving one of the most vexing challenges for cloud — memory cost and limit of scale — and how our innovative vSMP MemoryONE solution provides affordable larger server memory for the private and public cloud. Please visit us at Booth No. 519 to connect with our experts and learn more about vSMP MemoryONE and how it is already serving some of...
Darktrace is the world's leading AI company for cyber security. Created by mathematicians from the University of Cambridge, Darktrace's Enterprise Immune System is the first non-consumer application of machine learning to work at scale, across all network types, from physical, virtualized, and cloud, through to IoT and industrial control systems. Installed as a self-configuring cyber defense platform, Darktrace continuously learns what is ‘normal' for all devices and users, updating its understa...
Codete accelerates their clients growth through technological expertise and experience. Codite team works with organizations to meet the challenges that digitalization presents. Their clients include digital start-ups as well as established enterprises in the IT industry. To stay competitive in a highly innovative IT industry, strong R&D departments and bold spin-off initiatives is a must. Codete Data Science and Software Architects teams help corporate clients to stay up to date with the mod...
As you know, enterprise IT conversation over the past year have often centered upon the open-source Kubernetes container orchestration system. In fact, Kubernetes has emerged as the key technology -- and even primary platform -- of cloud migrations for a wide variety of organizations. Kubernetes is critical to forward-looking enterprises that continue to push their IT infrastructures toward maximum functionality, scalability, and flexibility. As they do so, IT professionals are also embr...
Platform9, the leader in SaaS-managed hybrid cloud, has announced it will present five sessions at four upcoming industry conferences in June: BCS in London, DevOpsCon in Berlin, HPE Discover and Cloud Computing Expo 2019.
At CloudEXPO Silicon Valley, June 24-26, 2019, Digital Transformation (DX) is a major focus with expanded DevOpsSUMMIT and FinTechEXPO programs within the DXWorldEXPO agenda. Successful transformation requires a laser focus on being data-driven and on using all the tools available that enable transformation if they plan to survive over the long term. A total of 88% of Fortune 500 companies from a generation ago are now out of business. Only 12% still survive. Similar percentages are found throug...
When you're operating multiple services in production, building out forensics tools such as monitoring and observability becomes essential. Unfortunately, it is a real challenge balancing priorities between building new features and tools to help pinpoint root causes. Linkerd provides many of the tools you need to tame the chaos of operating microservices in a cloud native world. Because Linkerd is a transparent proxy that runs alongside your application, there are no code changes required. I...