Menu
I used to have my website with Boostrap 3.3.4, and since I moved to Bootstrap 4 everything is broken.
Essentially the structure of my website was very simple, a container that contained some jumbotrons and some panels
<body>
<section class="container">
<div class="jumbotron vertical-center">
<div><img src="img/hello.jpg" style="width: 35%" class="img-responsive" title="Hello" alt="World"></div>
<h2>my website!!</h2>
<div class="panel panel-default">
<div class="panel-body">
<h4> stackoverflow </h4>
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
<h4><span class="glyphicon glyphicon-education" aria-hidden="true"></span><strong> This is reall cool! </h4>
</div>
</div>
and so on.
CSS would be simply
.container {
max-width: 600px;
background:white;
padding: 30px 30px;
text-align: center;
background: transparent;
}
.jumbotron {
background: white;
}
Here I would have a suite of centered, responsive nice blocks (with roundede edges) that would NOT take the full width of the screen.
I have no idea how to adapt that with Bootstrap 4.
373
Given valid Bootstrap 3 HTML markup, this upgrade tool replaces the Bootstrap 3. x CSS classes with Bootstrap 4. x classes. Additionally, this tool updates the structure of components like Navbar, Panel, List and others in accordance with the Bootstrap 4 Docs.
1. In the platform, inside the site you want to update, click Templates. 2. Open the file bootstrap_js, there paste the javascript code of the latest version of bootstrap.
While the answer on this question is actually very useful, I also found out that there is no such thing as an upgrade from Bootstrap 3 to 5. Those are just different toolkits. So this question is in a way obsolete. The real answer should be, don't upgrade.
Whenever you switch from one major version to another, with any software, you should expect breaking changes.
In the case of Bootstrap, it's more than breaking-changes. It's almost a completely new library (in fact, it is completely rewritten, for the most part!). In terms of development, think of it as a different library vaguely resembling the old one.
The best advice I could give you is to revert to v3. If you want to take advantage of the fully developed product, use latest v3 available. There are very few real life cases where upgrading switching a functional website from Bootstrap v3 to Bootstrap v4 makes sense in terms of development time and/or investment.
If you are really determined to do this (maybe for educational purposes or whatnot), consider rebuilding it from scratch, using v4. If you do need to convert old templates (HTML markup) run them through the Bootstrap v3 to v4 markup converter.
But keep in mind that even with this tool or similar, considering all changes in terms of architecture, layout, JavaScript plugins, form elements, switch from glyphicons to font awesome, switch from LESS to SASS, renamed variables, changed responsive breakpoints and any custom CSS you (or any v3 theme/plugin/add-on) might currently use for overriding defaults, you still have a lot of chances of messing it up and you're better off (and with a superior end product) if you rebuild from scratch, IMHO.
Moving from v3 to v4 makes a lot more sense in terms of: "I used to develop websites using v3 and now I use v4 in new projects", rather than "I upgraded a website from v3 to v4".v3 is not obsolete and will not be for a good number of years.
In fact, it is a much more more suitable option for a production environment than v4 at the moment. In this regard, a quick look at bootstrap-4 questions, will confirm it's not (yet) production ready. Basic functionality is still broken or at least under-developed on widely used devices.
In the particular case of your markup, this should do:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<section class="container">
<div class="jumbotron vertical-center">
<div class="d-flex justify-content-around align-items-center">
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg?v=2bb144720a66" style="width: 35%" class="img-fluid" title="Hello" alt="World">
</div>
<h2>my website!!</h2>
<div class="card">
<div class="card-body">
<h4> stack<b>overflow</b> </h4>
</div>
</div>
<div class="card">
<div class="card-body">
<h4><i class="fa fa-university"></i><strong> This is reall cool! </strong></h4>
</div>
</div>
</div>
</section>Note I replaced glyphicon with fa as Bootstrap v4 uses font awesome icons and I also centered the logo as a reminder v4 makes use of flexbox to center and evenly distribute, should you ever need it (i.e.: place <h2> inside .d-flex to align and distribute in line with logo)
91
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
