Question posted in 
I’m creating my first website and i’m currently stuck on how I can place the text below my gift icon. With the icon also centred. Any help would be very much appreciated!
This is what I currently have, as you can see the gift icon is inline with the text "vouchers"
This is what I am trying to get – with the icon above the text
body {
overflow-x: hidden;
background-color: #393838;
color: white;
}
.navbar {
font-size: 1rem;
font-weight: 600;
letter-spacing: .1rem;
color: white;
display: inline-flexbox;
background-color: #393838;
}
.navbar-brand {
padding-left: 2rem;
}
/* navbar links font color */
.navbar-dark .navbar-nav .nav-link {
color:white;
}
/* hoover color navbar */
.navbar-dark .navbar-nav .nav-link.acitve,
.navbar-dark .navbar-nav .nav-link:hover {
color: #fdb629;
}
.top-content {
width: 100%;
padding: 0;
padding-top: 10rem;
}
.top-content .carousel-control-prev {
border-bottom: 0;
}
.top-content .carousel-control-next {
border-bottom: 0;
}
.top-content .carousel-caption {
padding-top: 200px;
color:white;
}
.top-content .carousel-indicators li {
width: 1px;
height: 0px;
margin-left: 10px;
margin-right: 10px;
border-radius: 50%;
}
.d-block {
height:800px
}
.footer{
background-color: #393838;
}
.bi {
font-size: 1.5rem;
color: white;
}
.bi.bi-gift:hover{
color: gold;
}<!doctype html>
<html lang="en">
<head>
<title>Homepage</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<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://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<link rel="stylesheet" href="main.css">
</head>
<body>
<!-- navbar -->
<header>
<nav class="navbar navbar-expand-lg fixed-top navbar-dark">
<a href="#" class="navbar-brand">
<img class="img-fluid ml-3" src="media/hotel-logo.png" alt="brand-logo" width="190" height="190">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu"
aria-controls="navbar-menu" aria-expanded="flase" aria-label="Toggle Navigation">
<span class="navbar-toggler-icon"></span>
</button>
</a>
<!-- menu items -->
<div class="collapse navbar-collapse"></div>
<div class="collapse navbar-collapse" id="navbar-menu">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a href="#" class="nav-link">Rooms</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Spa</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Casino</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Dining</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Entertainment</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Luxury Packages</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Weddings</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Contact Us</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">FAQ</a>
</li>
</ul>
<!-- icon and button in navbar -->
<div class="">
<a class="bi bi-gift" href="#" aria-hidden="true"><span>Vouchers</span></a>
<button type="button" href="#" class="btn btn-warning ">Book Now</button>
</div>
</div>
</nav>
</header> <!-- end of navbar-->
<!-- Top content -->
<div class="top-content">
<!-- Carousel -->
<div id="carousel-example" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example" data-slide-to="1"></li>
<li data-target="#carousel-example" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="media/1.jpg" class="d-block w-100" alt="slide-img-1">
<div class="carousel-caption">
<h1>Paradise Awaits...</h1>
</div>
</div>
<div class="carousel-item">
<img src="media/2.jpg" class="d-block w-100" alt="slide-img-2">
<div class="carousel-caption">
<h1>Relax and Rest</h1>
</div>
</div>
<div class="carousel-item">
<img src="media/3.jpg" class="d-block w-100" alt="slide-media-3">
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carousel-example" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-example" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!-- end image slider -->
<div class="container video-text ">
<br>
<h1> ABOUT US</h1>
<hr
class="ml-4 mb-4 mt-0"
style="width: 130px; background-color: #c5a651; height: 2px;"
/>
<p>Inspired by the villages of Europe, AAA Five Diamond Bellagio overlooks a Mediterranean-blue lake with fountains performing a magnificent ballet. Escape into an otherworldly plane of dance, music and acrobatics with “O” by Cirque du Soleil — aquatic theater in our Parisian-style opera house.
Among all the luxury resorts, artsy clubs, and romantic restaurants, there’s one place that stands out - Bellagio Hotel and Casino. Bellagio, built by Steve Wynn and operated by MGM Resorts, is a synonym of opulence. From spacious rooms to mesmerizing views, Bellagio offers an outstanding experience.</p>
</div>
<!-- video -->
<div class="video-container embed-responsive embed-responsive-21by9">
<video controls><source src="media/promo.mp4" type="video/mp4"></video>
</div>
<h1 class="pt-5"style="text-align:center;">Customer Reviews</h1>
<hr
class="mb-4 mt-0 mx-auto"
style="width: 200px; background-color: #c5a651; height: 2px;"
/>
<!-- Begin widget code -->
<div class="elfsight-app-f5e372b9-39aa-46f0-a073-9b4fb63f7f45" ></div>
<script src="https://apps.elfsight.com/p/platform.js" defer></script>
<!-- footer -->
<footer>
<div class="py-2 text-center" style="background-color: #c5a651;">
<h5>Get connected with us on social media<h5>
<div class="d-flex"></div>
<a href="" class="" style="padding-right:15px">
<i class="bi bi-instagram "></i>
</a>
<a href="" class="" style="padding-right:15px">
<i class="bi bi-facebook"></i>
</a>
<a href="" class="" style="padding-right:15px">
<i class="bi bi-twitter"></i>
</a>
</div>
</div>
<div class="">
<div class="container text-center text-md-start mt-5">
<!-- Grid row -->
<div class="row mt-3">
<!-- Grid column -->
<div class="col-md-3 col-lg-4 col-xl-3 mx-auto mb-4">
<!-- Content -->
<h6 class="text-uppercase fw-bold">Directions</h6>
<hr
class="mb-2 mt-0 d-inline-block mx-auto"
style="width: 60px; background-color: #c5a651; height: 2px"
/>
<p><a style="color: white;" href="https://www.google.com/maps/place/Bellagio+Hotel+%26+Casino/@36.1129498,-115.1786954,17z/data=!3m1!4b1!4m8!3m7!1s0x80c8c430cb5147bd:0x82f2c7c5d9d10d84!5m2!4m1!1i2!8m2!3d36.1129455!4d-115.1765067"
target="_blank">3600 S Las Vegas Blvd, Las Vegas, NV 89109, United States
</a></p>
</div>
<div class="col-md-4 col-lg-3 col-xl-3 mx-auto mb-md-0 mb-4">
<h6 class="text-uppercase fw-bold">Awards</h6>
<hr
class="mb-2 mt-0 d-inline-block mx-auto "
style="width: 60px; background-color: #c5a651; height: 2px"
/>
<div class="container">
<img class="img-fluid " src="media/Award1.png" alt="brand-logo" width="100" height="100">
<img class="img-fluid " src="media/Award2.png" alt="brand-logo" width="100" height="100">
<img class="img-fluid p-2 " src="media/Award3.png" alt="brand-logo" width="100" height="100">
</div>
</div>
<div class="col-md-4 col-lg-3 col-xl-3 mx-auto mb-md-0 mb-4">
<h6 class="text-uppercase fw-bold">Contact</h6>
<hr
class="mb-2 mt-0 d-inline-block mx-auto"
style="width: 60px; background-color: #c5a651; height: 2px"
/>
<p><i class="bi bi-telephone mr-3"></i>702.693.7111</p>
<p><i class="bi bi-envelope mr-3"></i> <a style="color: white;" href="mailto:[email protected]">[email protected]</a></p>
<p><i class="bi bi-calendar-check mr-3"></i>702.693.7222</p>
<p><i class="bi bi-printer mr-3"></i>01 234 567 89</p>
</div>
</div>
</section>
</footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.4.8/swiper-bundle.min.js" integrity="sha512-9bpSJxAAJvmeQaFXUNEj1/0eGdUshcOiO8M5PrRX0WT3S8s7omJGVe8sL1VoePTYPSariYUqnYJ/XbDwH4hbrA==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.4.5/swiper-bundle.min.js" integrity="sha512-1LlEYE0qExJ/GUfAJ0k2K2fB5sIvMv/q6ueo3syohvQ3ElWDQVSMUOf39cxaDWHtNu7M6lF6ZC1H6A1m3SvheA==" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
</body>
</html>
3
Answers
You can try applying these styles:
I build this quickly with bootstrap 4.
For break ligne between the gift and his word, I use simply a
<br>element.