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 <strike>vaguely</strike> 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 <strike>upgrading</strike> 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`**](http://upgrade-bootstrap.bootply.com/).
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**. <strike>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 [tag: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.</strike>
___
In the particular case of your markup, this should do:
<!-- begin snippet: js hide: true console: true babel: false -->
<!-- language: lang-html -->
<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>
<!-- end snippet -->
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)
**Credit for this answer goes to Andrea. :)**

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 <strike>vaguely</strike> 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 <strike>upgrading</strike> 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`**](http://upgrade-bootstrap.bootply.com/).
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**. <strike>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 [tag: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.</strike>
___
In the particular case of your markup, this should do:
<!-- begin snippet: js hide: true console: true babel: false -->
<!-- language: lang-html -->
<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>
<!-- end snippet -->
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)