Differences Between Bootstrap 3 and Bootstrap 4: A Comparative Analysis

During an interview, I was questioned about the differences between the grid systems of Bootstrap 3 and Bootstrap 4. Unfortunately, I couldn't provide a satisfactory answer at that time despite my extensive research. In Bootstrap 3, we had col-sm, col-md, and col-xl classes as shown below:

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

I struggled to understand the differences during the interview. Can someone please provide me with detailed insight into the changes from Bootstrap 3 to Bootstrap 4 in terms of the grid system?

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

In the Bootstrap 3 framework, it is important to specify a number after sm when using column classes. For example, instead of just col-sm, you should use col-sm-3. If no number is provided, the entire row will default to col-sm-12.

Check out the documentation here.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container-fluid">
  <div class="row">
    <div class="col-sm" style="background-color:lavender;">.col-sm</div>
    <div class="col-sm" style="background-color:lavenderblush;">.col-sm-</div>
    <div class="col-sm" style="background-color:lavender;">.col-sm</div>
  </div>
</div>

For Bootstrap 4, the number "4" should be used with col-sm classes instead.

View the Bootstrap 4 documentation for more information.

Thanks to flexbox, grid columns without a specified width will automatically layout as equal width columns in Bootstrap 4. For example, four instances of .col-sm will each automatically be 25% wide from the small breakpoint and up. See the auto-layout columns section for more examples.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>


<div class="container-fluid">
  <div class="row">
    <div class="col-sm" style="background-color:lavender;">.col-sm-4</div>
    <div class="col-sm" style="background-color:lavenderblush;">.col-sm-4</div>
    <div class="col-sm" style="background-color:lavender;">.col-sm-4</div>
  </div>
</div>

Differences between Bootstrap 4 Grid and Bootstrap 3:

Bootstrap 4

https://i.sstatic.net/aGGmT.png

Bootstrap 3 https://i.sstatic.net/DhKzr.png

Answer №2

Enhanced Grid System

  • Transitioned to flexbox layout for improved flexibility and alignment options.
    1. Integrated flexbox support in grid mixins and classes.
    2. Introduced vertical and horizontal alignment classes within the flexbox model.
  • Revamped grid naming conventions and introduced a new grid tier system.
    1. Added a new 'sm' grid tier tailored for screens below 768px, offering increased control over layout. Updated tiers now include: xs, sm, md, lg, and xl. For example, what was previously '.col-md-6' in v3 is now '.col-lg-6' in v4.
    2. Revised 'xs' grid classes no longer require an infix, indicating they apply styles from min-width: 0 instead of a specific pixel value (e.g., '.col-xs-6' is now '.col-6'). Other tiers still utilize infixes (e.g., 'sm' for small).
  • Updated grid sizes, mixins, and variables for better customization.
    1. Sass map now available for specifying gutter widths at different breakpoints.
    2. New prep and sizing mixins added for column styling.
    3. Rethought media query breakpoints and container widths to accommodate new grid tier and maintain 12-column compatibility at max width.
    4. Utilizing Sass maps ($grid-breakpoints and $container-max-widths) for managing breakpoints and container widths, replacing individual variables for enhanced customization.
    5. Improved media query syntax with @include directives for streamlined code maintenance (e.g., '@include media-breakpoint-up(sm)').

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using jQuery's toggleClass method to implement CSS transformations

I have a question about this situation Each time the button is clicked, jQuery toggles the class: .transition { background-color: #CBA; transform: translateX(100px) scale(0.5) rotate(180deg); } Within the <div class="container2"> And upon ...

jquerycsstoggleclass

Utilizing combined selectors in styled-components: A comprehensive guide

My existing CSS code is structured like this: .btn_1 { color: #fff; background: #004dda; display: inline-block; } .btn_1:hover { background-color: #FFC107; color: #222 !important; } .btn_1.full-width { display: block; width: 100%; } I ...

reactjscssstyled-components

Ways to Randomly Flip Divs

I have developed an application where all divs flip vertically on hover. I am looking for a way to make the flipping random without requiring a hover. Any ideas on how to achieve this? .vertical.flip-container { position: relative; float: left; ma ...

javascriptjqueryhtmlcss

The accordion won't function properly if it is added using append() after the document is ready

I have implemented a button to add an accordion, but unfortunately it doesn't seem to be working properly. I am unsure of how to troubleshoot and resolve this issue. If the accordion HTML is appended after the document.ready() function, then the accor ...

jqueryhtmlcss

In the world of HTML5, you can find the <main> nestled within the <

Plot: As I was creating a coupons website, I came across the issue of incorporating non-unique content into the <main><article> ..here..</article></main>. Problem: Despite w3schools' statement : The content inside the eleme ...

html

Triggering a JQuery Toggle Button

This is the code I'm currently working with: $('.access a').toggle(function() { $('link').attr('href', 'styles/accessstyles.css'); $('body').css('font-size', '16px'); }, fu ...

javascriptjqueryhtmljquery-uitoggle

increase the size of text for mobile devices by utilizing twitter bootstrap

Is there a way to increase the font size of my content on my app, which is using CSS based on Twitter Bootstrap 3? I attempted a solution from this particular question, but it seems to be overridden by Bootstrap itself. Here is what I have tried: @media ( ...

htmlcsstwitter-bootstrapfont-size

Using Bootstrap's CSS classes, is it possible to modify the background color of a table cell?

I'm currently working with Bootstrap 5.0 CSS and attempting to create a table with customized cell colors using some of my own CSS styles. The color property seems to be working correctly, but I'm running into an issue with Bootstrap not recogniz ...

csstwitter-bootstraphtml-tablebootstrap-5

What could be causing my Ionic button to not initialize in the expected state while using ngIf with a boolean property connected to an Ionic checkbox?

I'm currently in the process of setting up a list of ingredients with checkboxes and conditional buttons, but I'm facing some challenges with the default state. Ideally, I only want the button to be visible when the checkbox is unchecked so that ...

javascripthtmlangularionic-frameworkangular-ng-if

Angular Material style focused border

Upgrading from Angular 13 to Angular 15 has been quite the ordeal for me. Many of my designs are broken, and I'm still trying to fix them. The main issues seem to be related to upgrading Angular Material to version 15. Below is a list of all my curr ...

cssangularuser-interfaceangular-materialangular15

Update the content of the widget

Currently, I am utilizing the following script to display NBA standings: <script type="text/javascript" src="https://widgets.sports-reference.com/wg.fcgi?script=bbr_standings&amp;params=bbr_standings_conf:E,bbr_standings_css:1&amp"></sc ...

javascripthtmlcsswidget

When you hover over nested HTML-lists in a webpage, make the tree's long text lines expand gracefully using a combination of HTML, CSS

In my Angular 4 application, I have a left div that displays a tree of items as recursive HTML lists. When there is a long text, it gets cut off by the border of the div and a scrollbar appears. I want to have the text expand beyond the border and show in ...

htmlcssangularbootstrap-4

Is it possible to align text to an image within an input text field?

<input type="text" class="usernm" style="color:black;font-weight: bold;outline-width: 0;" id="username" /> I have a question about styling HTML. I am attempting to include an icon inside a text field, but I'm strugglin ...

csshtmlcss-position

Set a variable equal to the innerHTML

Although I am not very familiar with JavaScript, I am looking to generate HTML table TD elements dynamically using JavaScript. Unfortunately, the code I have written is not functioning correctly. <script type="text/javascript"> function changed(num) ...

javascripthtmldynamic

Preventing the <img> element from being selectable and draggable simultaneously is effective in Firefox, but not in Chrome or Opera

I have a picture that I want to render both unselectable and undraggable. (This is not an attempt to prevent users from copying) To accomplish this, I can: Add a .noselect class to the <img> tag. As recommended here. Disable pointer-events. (I am ...

htmlcssgoogle-chromefirefoxopera

Having trouble displaying nested routes in Angular within the view

I'm encountering some issues with child/nested routes in Angular 4. In the app.module.ts file, my imports statement looks like this: RouterModule.forRoot([ { path: 'templates', component: TemplateLandingC ...

htmlangulartypescriptsingle-page-applicationangular-router

having difficulty setting up tabs using uib-tabset

I have been experimenting with dynamically creating tabs using uib-tabset. Each tab is supposed to contain a different form, but the issue I am facing is that the textbox from the first form is being overwritten by the newly generated tab. When I enter d ...

htmlangularjs

When I click the button, the page goes blank and keeps loading endlessly

http://jsfiddle.net/iansan5653/7EPjH/17/ <head> <script type='text/javascript' src='https://www.google.com/jsapi'></script> <script type="text/javascript"> function chart() { var pressure; ...

javascripthtmlfunctiongoogle-visualization

Ensure that any modifications made to an Angular service are reflected across all components that rely on that service

I am currently in the process of replicating a platform known as Kualitee.com, which serves as a test-management tool utilized by QA Engineers. Within Kualitee, users can access multiple projects, each containing various test cases and team members. The ab ...

javascripthtmlangulartypescriptservice

Automatically activate the Focus Filterfield in the ng-multiselect-dropdown upon clicking

I've integrated the ng-multiselect-dropdown package into my Angular project using this link: https://www.npmjs.com/package/ng-multiselect-dropdown. Everything is functioning as expected, but I'm looking to automatically focus on the filter input ...

javascripthtmlangulartypescriptng-multiselect-dropdown