Skip to Content

How it works: Bootstrap in Salesforce commerce cloud

Capgemini
2018-10-01

The front-end aspect of web development plays a crucial role in the customer experience: it is the bridge that connects user interface and user experience. A fluid and smooth navigation flow helps users get from one task to another, and developers help achieve this goal.

What is Bootstrap?

In my non-biased (hah!) opinion, developers are great at finding the most efficient ways to solve problems. One solution is to use libraries which are a collection of precompiled routines that a program can use. Bootstrap is an open source front-end framework which offers a simple way to create and design web layouts while offering a wide range of interface components such as forms, templates, accordions, etc. Whether you want an image carousel or a responsive form which changes width for mobile and desktop views, Bootstrap can do it all. Bootstrap was developed by a couple of innovative developers and designers from Twitter who created it to encourage consistency across internal tools.

Here is a brief overview of the major releases.

  • 2011 – The first major release of Bootstrap, which was then known as Twitter Blueprint.
  • 2012 – Bootstrap 2 added features such as a responsive, 12-column grid layout.
  • 2013 – Bootstrap 3 added a mobile-first design.
  • 2018 – The stable version of Bootstrap 4 was released in early 2018, which includes Sass and flexbox support.

There are different approaches to implementing Bootstrap for your project. For example, you can use a content delivery network (CDN), downloading the library which includes compiled CSS and javascript locally to your system or through an npm package.

Bootstrap Features

Bootstrap follows a mobile-first design approach, which is the current trend for web development in recent years. According to Mayven, there are over 1.2 billion mobile web users, which solidifies its place in the web application industry.

Bootstrap also has Sass, Syntactically Awesome Style Sheets, which is used as a preprocessor. It is a CSS extension language which allows for the development for simple styling.

Bootstrap Grid

The Bootstrap grid system is one of the most used and powerful layouts in modern web design. It includes a mobile-first flexbox grid system to configure layouts. It also has a 12 column layout and different tiers so that it can have different media query variations. There are many different ways you can use the grid system as it is very flexible on how you want your web page structure to be formatted. It uses containers which act as the main wrapper around rows and columns which lay out the content. This grid system allows developers to create responsive web pages while also considering the different viewports and how the structure would adjust.

How Bootstrap works in SFCC

Bootstrap plays a role in Salesforce Commerce Cloud’s SFRA’s (storefront reference architecture) front-end design and layout. Bootstrap is installed using npm as the package manager. Each client work will require customizations which can be done with the bootstrapOverrides file(s) or the use of custom overrides to make any changes over Bootstraps.

With the inclusion of Bootstrap, developers can use the source code provided by calling class names that provide functionality or styling. They can also override the source codes with their own customized themes. Bootstrap also offers components such as forms, buttons, tooltips, and more which can be used site wide.

In the image below, you can see the button element with a bootstrap class attribute of “btn-primary” and “btn-large.” This is a style that comes from a Bootstrap class which can be overridden with your own custom style. These components are used throughout SFRA.

Conclusion

Efficiency is looked upon as one of the most important qualities in web development. For this reason, I do not see Bootstrap going away any time soon. If anything, its usage will continue to increase.

From a business standpoint, it makes sense to use one of the most popular and efficient front-end web design frameworks, which allows for a faster and easier web development process. With the number of third-party plugins and extensions, Bootstrap is also one of the most flexible and customizable front-end frameworks. In addition, it also has a small learning curve with multiple guides and online resources. The mobile-first architecture, which was adopted in Bootstrap 3, shows how adaptive Bootstrap is to the industry around it.