Having trouble with upgrading from Bootstrap 3 to Bootstrap 4?

After upgrading from Bootstrap 3 to 4 in order to utilize the new cards functionality, I found that all of my formatting was thrown off. As a result, I reverted back to Bootstrap 3. Now, I need to display multiple images with descriptions below them in a single row with horizontal scrolling capability.

Below is the desired format:

https://i.sstatic.net/8Czcb.png

Here is the Bootstrap code that works in version 4, and I am looking for a way to make it compatible with version 3:


<div class="col-lg-4 col-md-6 mb-4">
   <div class="card h-100">
      <a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a>
      <div class="card-body">
         <h4 class="card-title">
            <a href="#">Item Three</a>
         </h4>
         <h5>$24.99</h5>
         <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!</p>
      </div>
      <div class="card-footer">
         <small class="text-muted">&#9733; &#9733; &#9733; &#9733; &#9734;</small>
      </div>
   </div>
</div>

<div class="col-lg-4 col-md-6 mb-4">
   <div class="card h-100">
      <a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a>
      <div class="card-body">
         <h4 class="card-title">
            <a href="#">Item Four</a>
         </h4>
         <h5>$24.99</h5>
         <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!</p>
      </div>
      <div class="card-footer">
         <small class="text-muted">&#9733; &#9733; &#9733; &#9733; &#9734;</small>
      </div>
   </div>
</div>
htmlcssasp.net-mvcbootstrap-4

Answer №1

Bootstrap 4 underwent a significant overhaul compared to Bootstrap 3.

This means that almost every aspect has been modified, requiring manual migration of all components.

Here's an illustration of a navbar in Bootstrap 4 (notice the notable differences): 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Refer to the official documentation for details:

https://getbootstrap.com/docs/4.0/components/navbar/

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

Troubleshooting problems with email templates using Handlebars JS within Nest JS

I am encountering an issue while using Handlebars JS in my Nest JS project to send emails. Although the email is sending properly, the content of the email body is not rendering correctly, resulting in responsiveness and styling problems. In my template: ...

cssnode.jsexpressnestjshandlebars.js

The Bootstrap table remains unresponsive despite using the .table-responsive class

I have created a bootstrap table but I am facing an issue with the horizontal scroll on mobile devices. Even after adding the table-responsive class to the element with the .table class, it is not working as expected. <div class="table-responsive t ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

Toggle between hiding and showing div elements issue

Currently in the final stages of developing an iPhone web app, I have encountered a small issue that needs to be resolved. I have successfully hidden one layer and displayed another with a button click. However, what I am aiming for is to toggle between s ...

javascripthtmlcsshideshow

Adding new elements to a div container

My goal is to populate a div element with items based on elements from an array. I need to duplicate an existing element on the page and append the new version to the div. Let me provide the code for better understanding: JavaScript: function apply(list ...

javascriptjqueryhtml

Problem with the `file` input not working properly

Currently, I am working on creating a form with two input fields - one for text and the other for file upload. However, the issue I am facing is that the Browse button for the file input is being displayed inside the input box. My goal is to have the butto ...

htmlformstwitter-bootstrapcssfile-upload

When working with Angular Universal, I encountered an issue where localStorage is not defined. This has caused a problem in a function that

I have a function in my application that requires an object as one of its parameters: const checkValues = { promoId: ..., ... unsaved: !JSON.parse(localStorage.getItem('unsaved')) ? [] : JSON.parse(localStorage.getItem('unsaved') ...

javascriptnode.jshtmlangularangular-universal

:hover doesn't fully implement background color on list items

When I hover over the dropdown items in my navigation menu, I would like the background color to change for the entire list item. Currently, the background color only changes when hovering over the text itself and reverts back to its original color when mo ...

htmllistcss

The HTML code is displayed on the page as source code and is not run by the browser

Here is the code snippet I am using: $link = "<a class=\"openevent\" href=\"$finalUrl\" target=\"_blank\">Open Event</a>"; foreach ($spans as $span) { if ($span->getAttribute('class') == 'categor ...

phphtmldomdocument

What separates text-align:center from margin auto?

As someone who is just beginning to learn about CSS, I have come across the properties: text-align:center; and margin:auto; Both of these seem to center elements, but how exactly do they differ from each other? Any insights would be much appreciated. T ...

css

What potential issues may arise from multiple ajax requests being made?

I want to incorporate a (Telerik MVC) grid that includes buttons in every row. When the button is clicked, an ajax request will update a boolean value in the database and display a "checkmark" image in one of the cells of that row. I am concerned about p ...

sql-serverasp.net-mvcajax

Error encountered: string literal not closed while attempting to load text using ajax

It appears that many programmers from various languages have encountered this issue. I am using jQuery to fetch AJAX text onto a screen, but firebug is indicating an unterminated string literal with an unhelpful example : $("#content").html("<div cla ...

jqueryhtmlruby-on-railsajaxdynamic

The Bootstrap column class is malfunctioning

Recently, I've been diving into the world of web development. I attempted to create three divs in one row using Bootstrap col class, but unfortunately it didn't turn out as expected. Two divs ended up in a row with some blank space, while the thi ...

csstwitter-bootstrap

The widths of inputs vary between FireFox and Chrome

I've been investigating why the widths in FireFox and Chrome show a significant difference. This variation is causing a problem with my Modal in the views. Chrome: https://i.sstatic.net/D0lgu.png FireFox: https://i.sstatic.net/do4YU.png Upon comp ...

htmlcsswidthpixel

Having trouble getting the img src to work in Django 2.1 template?

I'm having trouble displaying images in my Django template file. Despite uploading the images to media static files, they do not appear on the template. When I click on the image link in the Django admin page, it shows a "Page not found(404)" error me ...

pythonhtmldjangomarkdown

I am facing an issue where the JsonResult is not recognizing the ICollection within an object when making a post

Struggling with transferring Json data from the client to Controller Action in MVC 4 using Knockout.Js. The Json is posted successfully, but upon binding in the JsonResults Action, an ICollection present in the Json is missing in the object produced. A sn ...

jqueryasp.net-mvcjsonknockout.jsjsonresult

display the chosen choices from the jquery tool

I have implemented a Jquery movie seat selection plugin on my jsp website successfully. It allows users to select seats with ease. However, the issue I am facing is that due to my limited knowledge of Jquery, I am unable to display the selected seats by t ...

javascriptjquerycssjspplugins

Unexpected file fetching issue with PHP code

After spending a considerable amount of time analyzing this code, I am still unable to pinpoint the issue... function getComment($topic_id){ $sql = "SELECT * FROM comment WHERE topic_id='$topic_id' ORDER BY time DESC LIMIT 20"; $result = ...

phpjavascriptjqueryhtmlcss

When hovering over an anchor, apply a border or box-shadow effect to the image

I'm trying to make an image display a border or box-shadow when hovering over a link, along with an animated circle around the round image. I've attempted to achieve this with the following CSS code, but it doesn't seem to be working. https ...

htmlcss

Concealing the sidebar navigation menu on the web application

I have developed a custom Angular 4 web application. My goal is to implement an automatic hide feature for the navbar when a user hovers over it. I came across an example that demonstrates what I want to achieve at https://codepen.io/JFarrow/pen/fFrpg. Des ...

htmlcssbootstrap-4

Unable to apply the CSS styles on the webpage

I'm having trouble adjusting the CSS for a specific div with the class .cropper inside a component named image-cropper, and I can't figure out why it's not taking effect. Here is an image of the particular div. https://i.sstatic.net/spdJc. ...

htmlcssangular