My text doesn't fit the whole div and the link puts itself in the right instead of middle on the bottom like in the last example. How to fix it?
Section that doesn't work:
<section class="row">
<header class="col-12">
<hr class="privacy-hr">
<h1><!--Tables, buttons and forms in Bootstrap-->Tables, buttons and forms in Bootstrap</h1>
<hr class="privacy-hr">
</header>
<article class="col-12 col-lg-6 col-xl-7 d-flex">
<div class="alert alert-light d-flex flex-wrap" role="alert">
<div class="flex-grow-1 align-self-start">
<h4 class="alert-heading"><!--Tables-->Tables</h4>
<p><!--Tables look neat and are stylised by many bootstrap classes, learn more how to make them.-->Tables look neat and are stylised by many bootstrap classes, learn more how to make them.asdasdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsds</p>
<hr>
<h4 class="alert-heading"><!--Buttons-->Buttons</h4>
<p><!--Bootstrap makes creating buttons way more easier than you might have thought of. Just see how to create one.-->Bootstrap makes creating buttons way more easier than you might have thought of. Just see how to create one.asdasdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsds</p>
<hr>
<h4 class="alert-heading"><!--Forms-->Forms</h4>
<p><!--Forms have its own structure apart from only classes which helps in making them responsive throughout the website.-->Forms have its own structure apart from only classes which helps in making them responsive throughout the website.asdasdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsds</p>
<hr>
</div>
<div class="flex-grow-1 align-self-end">
<h4><a class="badge badge-secondary text-white text-wrap" style="width: 42%; padding: 2.5%; overflow-wrap: break-word;" href="https://www.000webhost.com/privacy" target="_blank"><!--Wanna try it!-->Wanna try it!</a></h4>
</div>
</div>
</article>
<article class="col-12 col-lg-6 col-xl-5 d-flex mb-3">
<img alt="grid" src="img/headings.webp" width="100%" height="100%">
</article>
</section>
Section that does work:
<section class="row">
<header class="col-12">
<hr class="privacy-hr">
<h1><!--Typography-->Typography</h1>
<hr class="privacy-hr">
</header>
<article class="col-12 col-lg-6 col-xl-7 d-flex">
<div class="alert alert-light d-flex flex-wrap" role="alert">
<div class="flex-grow-1 align-self-start">
<h4 class="alert-heading"><!--Text-->Text</h4>
<p><!--Don't bother stylising text to make it look more clear and catchy. Just use some classes to make any changes that has been introduced in Bootstrap for years including muting text, changing it's color, making it bigger, smaller, underlined etc.-->Don't bother stylising text to make it look more clear and catchy. Just use some classes to make any changes that has been introduced in Bootstrap for years including muting text, changing it's color, making it bigger, smaller, underlined etc.</p>
<hr>
<h4><!--Headings-->Headings</h4>
<p><!--Bootstrap lets your h1-h5 tags style individually from display-4 to display-1 to increase sizes via rems, making it responsive and also using this class is making headings look more interesting and innovative ny changing its font and style that the text is written.-->Bootstrap lets your h1-h5 tags style individually from display-4 to display-1 to increase sizes via rems, making it responsive and also using this class is making headings look more interesting and innovative ny changing its font and style that the text is written.</p>
<hr>
</div>
<div class="flex-grow-1 align-self-end">
<h4><a class="badge badge-secondary text-white text-wrap" style="width: 42%; padding: 2.5%; overflow-wrap: break-word;" href="https://www.000webhost.com/privacy" target="_blank"><!--Show me examples!-->Show me examples!</a></h4>
</div>
</div>
</article>
<article class="col-12 col-lg-6 col-xl-5 d-flex mb-3">
<img alt="grid" src="img/headings.webp" width="100%" height="100%">
</article>
</section> <!-- DONE 2 -->
The whole code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Boostrap is easy, we'll show you!</title>
<!-- versioning can often help (href="css/style.css?ver=2.0") -->
<!-- BOOTSTRAP 4 -->
<!-- FACEBOOK -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://reportsquestionsznaczki65.000webhostapp.com/technologie-bootstrap" />
<meta property="og:image" content="https://reportsquestionsznaczki65.000webhostapp.com/img/test.jpg" />
<meta property="og:title" content="Bootstrap is easy, we'll show you!" />
<meta property="og:description" content="Bootstrap is a powerfull tool for web developers. It helps making stunning, responsive and clean websites in seconds. Learn how to make one!" />
<!-- FACEBOOK -->
<link rel="canonical" href="https://reportsquestionsznaczki65.000webhostapp.com/">
<meta name="description" content="Bootstrap is a powerfull tool for web developers. It helps making stunning, responsive and clean websites in seconds. Learn how to make one!">
<meta name="keywords" content="xenon, xenon extremely, xeda, department of websites, boostrap, bootstrap 4.3.1, new version of bootstrap, how to learn bootstrap, learn bootstrap">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://reportsquestionsznaczki65.000webhostapp.com/technologie-bootstrap/css/restyledsites.css">
<script type="text/javascript" src="https://ff.kis.v2.scr.kaspersky-labs.com/FD126C42-EBFA-4E12-B309-BB3FDD723AC1/main.js?attr=HNcecbXkAjO1yHhh-pNBXESV_ZTLuJpbfYlz8PgHs3zTfdkaI5adfNuX3mhDGzVglHBEzEZEMfIct55AjcyzRjr9d4sYw_kfNR5FBegUPuwTVOsiRo0KFIOKQnKEvNOV" charset="UTF-8"></script><link rel="stylesheet" crossorigin="anonymous" href="https://ff.kis.v2.scr.kaspersky-labs.com/E3E8934C-235A-4B0E-825A-35A08381A191/abn/main.css?attr=aHR0cHM6Ly9yZXBvcnRzcXVlc3Rpb25zem5hY3praTY1LjAwMHdlYmhvc3RhcHAuY29tL3RlY2hub2xvZ2llLWJvb3RzdHJhcC8"/><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
</head>
<body>
<!-- nav bar -->
<nav class="sticky-top mb-0 navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="https://reportsquestionsznaczki65.000webhostapp.com/">
<img src="https://reportsquestionsznaczki65.000webhostapp.com/img/xewhite.png" width="40" height="40" class="d-inline-block align-top" alt="">
</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="lang-box text-center"><!--Choose language:-->Choose your language:<br><a class="language-link" href="?lang=pl">PL</a> | <a class="language-link" href="?lang=en">EN</a></div>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="https://reportsquestionsznaczki65.000webhostapp.com/technologie-bootstrap"><!--Home-->Home</a>
</li>
<!-- DROPDOWN -->
<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">
<!--Bootstrap-->Bootstrap </a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown" id="dropdown-section">
<!-- JS CODE HERE -->
</div>
</li>
<!-- DROPDOWN -->
<li class="nav-item">
<a class="nav-link" href="https://reportsquestionsznaczki65.000webhostapp.com/technologie-bootstrap/privacy"><!--Privacy Policy-->Privacy Policy</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://reportsquestionsznaczki65.000webhostapp.com/technologie-bootstrap/contact-us"><!--Contact us-->Contact us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://reportsquestionsznaczki65.000webhostapp.com/technologie-bootstrap/about-us"><!--About us-->About us</a>
</li>
</ul>
</div>
</nav>
<header class="pt-0 box jumbotron jumbotron-fluid text-center">
<h1 class="display-3"><!--Home-->Janeq's Bootstrap Academy</h1>
</header>
<div class="container-fluid text-center text-white">
<!-- home content -->
<header class="row mb-5 justify-content-center">
<div class="typewriter coding d-none d-lg-block">
<h2>
<!--We'll teach you Bootstrap!-->We'll teach you Bootstrap! <code>
<!--As no one does.-->As no one does. </code>
</h2>
</div>
</header>
<main>
<section class="row">
<header class="col-12">
<hr class="privacy-hr">
<h3 class="privacy-title-heading"><!--Bootstrap Basics-->Bootstrap's Basics</h3>
<hr class="privacy-hr">
</header>
<article class="col-12 col-lg-6 col-xl-7 d-flex">
<div class="alert alert-light d-flex flex-wrap" role="alert">
<div class="flex-grow-1 align-self-start">
<h4 class="alert-heading"><!--Grid-->Grid</h4>
<p><!--Bootstrap lets you split your page into 12 pieces, making it easier to response to different varieties of screens like mobile, laptops and TVs. Bootstrap always favours smaller screens like mobiles then going up to desktops and TVs.-->Bootstrap lets you split your page into 12 pieces, making it easier to response to different varieties of screens like smartphones, laptops and TVs. Bootstrap always favours smaller screens like smartphones then going up to desktops and TVs.</p>
<hr>
<h4><!--Classes-->Classes</h4>
<p><!--Bootstrap is using various classes to make its job done. Though it may seem unclean, it saves you from writing those individual lines of code since they are already written. It means that you don't have stylise every HTML element as you used to without Bootstrap..-->Bootstrap is using various classes to make its job done. Though it may seem unclean, it saves you from writing those individual lines of code since they are already written. It means that you don't have stylise every HTML element as you used to without Bootstrap.</p>
<hr>
</div>
<div class="flex-grow-1 align-self-end">
<h4><a class="badge badge-secondary text-white text-wrap" style="width: 42%; padding: 2.5%; overflow-wrap: break-word;" href="https://reportsquestionsznaczki65.000webhostapp.com/technologie-bootstrap/basics">Learn the basics!</a></h4>
</div>
</div>
</article>
<article class="col-12 col-lg-6 col-xl-5 d-flex mb-3">
<img alt="grid" src="img/obraz bootstrap.png" width="100%" height="100%">
</article>
</section> <!-- DONE -->
<section class="row">
<header class="col-12">
<hr class="privacy-hr">
<h1><!--Typography-->Typography</h1>
<hr class="privacy-hr">
</header>
<article class="col-12 col-lg-6 col-xl-7 d-flex">
<div class="alert alert-light d-flex flex-wrap" role="alert">
<div class="flex-grow-1 align-self-start">
<h4 class="alert-heading"><!--Text-->Text</h4>
<p><!--Don't bother stylising text to make it look more clear and catchy. Just use some classes to make any changes that has been introduced in Bootstrap for years including muting text, changing it's color, making it bigger, smaller, underlined etc.-->Don't bother stylising text to make it look more clear and catchy. Just use some classes to make any changes that has been introduced in Bootstrap for years including muting text, changing it's color, making it bigger, smaller, underlined etc.</p>
<hr>
<h4><!--Headings-->Headings</h4>
<p><!--Bootstrap lets your h1-h5 tags style individually from display-4 to display-1 to increase sizes via rems, making it responsive and also using this class is making headings look more interesting and innovative ny changing its font and style that the text is written.-->Bootstrap lets your h1-h5 tags style individually from display-4 to display-1 to increase sizes via rems, making it responsive and also using this class is making headings look more interesting and innovative ny changing its font and style that the text is written.</p>
<hr>
</div>
<div class="flex-grow-1 align-self-end">
<h4><a class="badge badge-secondary text-white text-wrap" style="width: 42%; padding: 2.5%; overflow-wrap: break-word;" href="https://www.000webhost.com/privacy" target="_blank"><!--Show me examples!-->Show me examples!</a></h4>
</div>
</div>
</article>
<article class="col-12 col-lg-6 col-xl-5 d-flex mb-3">
<img alt="grid" src="img/headings.webp" width="100%" height="100%">
</article>
</section> <!-- DONE 2 -->
<section class="row">
<header class="col-12">
<hr class="privacy-hr">
<h1><!--Tables, buttons and forms in Bootstrap-->Tables, buttons and forms in Bootstrap</h1>
<hr class="privacy-hr">
</header>
<article class="col-12 col-lg-6 col-xl-7 d-flex">
<div class="alert alert-light d-flex flex-wrap" role="alert">
<div class="flex-grow-1 align-self-start">
<h4 class="alert-heading"><!--Tables-->Tables</h4>
<p><!--Tables look neat and are stylised by many bootstrap classes, learn more how to make them.-->Tables look neat and are stylised by many bootstrap classes, learn more how to make them.asdasdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsds</p>
<hr>
<h4 class="alert-heading"><!--Buttons-->Buttons</h4>
<p><!--Bootstrap makes creating buttons way more easier than you might have thought of. Just see how to create one.-->Bootstrap makes creating buttons way more easier than you might have thought of. Just see how to create one.asdasdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsds</p>
<hr>
<h4 class="alert-heading"><!--Forms-->Forms</h4>
<p><!--Forms have its own structure apart from only classes which helps in making them responsive throughout the website.-->Forms have its own structure apart from only classes which helps in making them responsive throughout the website.asdasdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsds</p>
<hr>
</div>
<div class="flex-grow-1 align-self-end">
<h4><a class="badge badge-secondary text-white text-wrap" style="width: 42%; padding: 2.5%; overflow-wrap: break-word;" href="https://www.000webhost.com/privacy" target="_blank"><!--Wanna try it!-->Wanna try it!</a></h4>
</div>
</div>
</article>
<article class="col-12 col-lg-6 col-xl-5 d-flex mb-3">
<img alt="grid" src="img/headings.webp" width="100%" height="100%">
</article>
</section>
<footer class="row footer-bottom mt-5">
<div class="col-12 footer footer-bottom bg-dark p-3 lead mb-0"><!--This site was created by Jan Kustra, the executive of: XeDA+ Department of Websites.-->This site was created by Jan Kustra, the executive of: XeDA+ Department of Websites and the owner of Janeq's Bootstrap Academy.</div>
</footer>
</div>
<noscript>
<meta http-equiv="refresh" content="0; URL=https://reportsquestionsznaczki65.000webhostapp.com/noscript.html"/>
</noscript>
<script src="https://reportsquestionsznaczki65.000webhostapp.com/technologie-bootstrap/js/dropdown_hover.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="https://reportsquestionsznaczki65.000webhostapp.com/technologie-bootstrap/js/lessonmaker2.js"></script> <!-- Created by Jan Kustra, XeDA+ Department of Websites ©. Copying is expressly forbidden! -->
<div style="text-align: right;position: fixed;z-index:9999999;bottom: 0;width: auto;right: 1%;cursor: pointer;line-height: 0;display:block !important;"><a title="Hosted on free web hosting 000webhost.com. Host your own website for FREE." target="_blank" href="https://www.000webhost.com/?utm_source=000webhostapp&utm_campaign=000_logo&utm_medium=website&utm_content=footer_img"><img src="https://cdn.000webhost.com/000webhost/logo/footer-powered-by-000webhost-white2.png" alt="www.000webhost.com"></a></div><script>function getCookie(t){for(var e=t+"=",n=decodeURIComponent(document.cookie).split(";"),o=0;o<n.length;o++){for(var a=n[o];""==a.charAt(0);)a=a.substring(1);if(0==a.indexOf(e))return a.substring(e.length,a.length)}return""}getCookie("hostinger")&&(document.cookie="hostinger=;expires=Thu, 01 Jan 1970 00:00:01 GMT;",location.reload());var wordpressAdminBody=document.getElementsByClassName("wp-admin")[0],notification=document.getElementsByClassName("notice notice-success is-dismissible"),hostingerLogo=document.getElementsByClassName("hlogo"),mainContent=document.getElementsByClassName("notice_content")[0],wpSidebar=document.getElementById("adminmenuwrap"),wpTopBarRight=document.getElementById("wp-admin-bar-top-secondary");if(null!=wordpressAdminBody&¬ification.length>0&&null!=mainContent){var googleFont=document.createElement("link");googleFontHref=document.createAttribute("href"),googleFontRel=document.createAttribute("rel"),googleFontHref.value="https://fonts.googleapis.com/css?family=Roboto:300,400,600",googleFontRel.value="stylesheet",googleFont.setAttributeNode(googleFontHref),googleFont.setAttributeNode(googleFontRel);var css="@media only screen and (max-width: 576px) {#main_content {max-width: 320px !important;} #main_content h1 {font-size: 30px !important;} #main_content h2 {font-size: 40px !important; margin: 20px 0 !important;} #main_content p {font-size: 14px !important;} #main_content .content-wrapper {text-align: center !important;}} @media only screen and (max-width: 781px) {#main_content {margin: auto; justify-content: center; max-width: 445px;} .upgrade-btn-sidebar {display: none;} #wp-toolbar .top-bar-upgrade-btn {width: 52px; height: 46px !important; padding: 0 !important;} .top-bar-upgrade-btn__text {display: none;} .dashicons-star-filled.top-bar-upgrade-btn__icon::before {font-size: 28px; margin-top: 10px; width: 28px; height: 28px;}} @media only screen and (max-width: 1325px) {.web-hosting-90-off-image-wrapper {position: absolute; max-width: 95% !important;} .notice_content {justify-content: center;} .web-hosting-90-off-image {opacity: 0.3;}} @media only screen and (min-width: 769px) {.notice_content {justify-content: space-between;} #main_content {margin-left: 5%; max-width: 445px;} .web-hosting-90-off-image-wrapper {position: absolute; right: 0; display: flex; padding: 0 5%}} @media only screen and (max-width: 960px) {.upgrade-btn-sidebar {border-radius: 0 !important; padding: 10px 0 !important; margin: 0 !important;} .upgrade-btn-sidebar__icon {display: block !important; margin: auto;} .upgrade-btn-sidebar__text {display: none;}} .web-hosting-90-off-image {max-width: 90%; margin-top: 20px;} .content-wrapper {z-index: 5} .notice_content {display: flex; align-items: center;} * {-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;} .upgrade_button_red_sale{box-shadow: 0 2px 12px -6px #cc292f; max-width: 350px; border: 0; border-radius: 3px; background-color: #ff5c62 !important; padding: 15px 55px !important; margin-bottom: 48px; font-size: 14px; font-weight: 800; color: #ffffff;} .upgrade_button_red_sale:hover{color: #ffffff !important; background: rgba(255,92,98, 0.9) !important;} .upgrade-btn-sidebar {text-align:center;background-color:#ff5c62;max-width: 350px;border-radius: 3px;border: 0;padding: 12px; margin: 20px 10px;display: block; font-size: 12px;color: #ffffff;font-weight: 700;text-decoration: none;} .upgrade-btn-sidebar:hover, .upgrade-btn-sidebar:focus, .upgrade-btn-sidebar:active {background-color: rgba(255,92,98, 0.9); color: #ffffff;} .upgrade-btn-sidebar__icon {display: none;} .top-bar-upgrade-btn {height: 100% !important; display: inline-block !important; padding: 0 10px !important; color: #ffffff; cursor: pointer;} .top-bar-upgrade-btn:hover, .top-bar-upgrade-btn:active, .top-bar-upgrade-btn:focus {background-color: #ff5c62 !important; color: #ffffff !important;} .top-bar-upgrade-btn__icon {margin-right: 6px;}",style=document.createElement("style"),sheet=window.document.styleSheets[0];style.styleSheet?style.styleSheet.cssText=css:style.appendChild(document.createTextNode(css)),document.getElementsByTagName("head")[0].appendChild(style),document.getElementsByTagName("head")[0].appendChild(googleFont);var button=document.getElementsByClassName("upgrade_button_red")[0],link=button.parentElement;link.setAttribute("href","https://www.hostinger.com/hosting-starter-offer?utm_source=000webhost&utm_medium=panel&utm_campaign=000-wp"),link.innerHTML='<button class="upgrade_button_red_sale">Upgrade Now</button>',(notification=notification[0]).setAttribute("style","background-color: #f8f8f8; border-left-color: #ff5c62 !important;"),notification.className="notice notice-error is-dismissible";var mainContentHolder=document.getElementById("main_content");mainContentHolder.setAttribute("style","padding: 0;"),hostingerLogo[0].remove();var h1Tag=notification.getElementsByTagName("H1")[0];h1Tag.className="000-h1",h1Tag.innerHTML="Limited Time Offer",h1Tag.setAttribute("style","color: #32454c; margin-top: 48px; font-size: 48px; font-weight: 700;");var h2Tag=document.createElement("H2");h2Tag.innerHTML="From $0.72/month",h2Tag.setAttribute("style","color: #32454c; margin: 20px 0 45px 0; font-size: 48px; font-weight: 700;"),h1Tag.parentNode.insertBefore(h2Tag,h1Tag.nextSibling);var paragraph=notification.getElementsByTagName("p")[0];paragraph.innerHTML="Don’t miss the opportunity to enjoy up to <strong>4x WordPress Speed, Free SSL and all premium features</strong> available for a fraction of the price!",paragraph.setAttribute("style",'font-family: "Roboto", sans-serif; font-size: 18px; font-weight: 300; color: #6f7c81; margin-bottom: 20px;');var list=notification.getElementsByTagName("UL")[0];list.remove();var org_html=mainContent.innerHTML,new_html='<div class="content-wrapper">'+mainContent.innerHTML+'</div><div class="web-hosting-90-off-image-wrapper"><img class="web-hosting-90-off-image" src="https://cdn.000webhost.com/000webhost/promotions/wp-inject-default-img.png"></div>';mainContent.innerHTML=new_html;var saleImage=mainContent.getElementsByClassName("web-hosting-90-off-image")[0];wpSidebar.insertAdjacentHTML("beforeend",'<a href="https://www.hostinger.com/hosting-starter-offer?utm_source=000webhost&utm_medium=panel&utm_campaign=000-wp-sidebar" target="_blank" class="upgrade-btn-sidebar"><span class="dashicons dashicons-star-filled upgrade-btn-sidebar__icon"></span><span class="upgrade-btn-sidebar__text">Upgrade</span></a>'),wpTopBarRight.insertAdjacentHTML("beforebegin",'<a class="top-bar-upgrade-btn" href="https://www.hostinger.com/hosting-starter-offer?utm_source=000webhost&utm_medium=panel&utm_campaign=000-wp-top-bar" target="_blank"><span class="ab-icon dashicons-before dashicons-star-filled top-bar-upgrade-btn__icon"></span><span class="top-bar-upgrade-btn__text">Go Premium</span></a>')}</script></body>
</html>
Css are included in html code above.
Pictures to represent what I wanted to have:
What I have:
What it look like when it shrinks:
What I would like to have (literally a section above):
Site: https://reportsquestionsznaczki65.000webhostapp.com/technologie-bootstrap/?lang=en