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>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
