html
<section id="title">
<div class="container-fluid">
<!-- Nav Bar -->
<nav class="navbar navbar-expand-lg navbar-dark">
<a class=" navbar-brand">tindog</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<ul class ="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="">Contact</a></li>
<li class="nav-item"><a class="nav-link" href="">Download</a></li>
<li class="nav-item"><a class="nav-link" href="">Pricing</a></li>
</ul>
</div>
</nav>
<!-- Title -->
<div class="row">
<div class="col-lg-6">
<h1 class="first">Meet new and interesting dogs nearby.</h1>
<button type="button" class="btn btn-dark btn-lg"><i class="fab fa-apple"></i> Download</button>
<button type="button" class="btn btn-outline-light btn-lg"><i class="fab fa-google-play"></i> Download</button>
</div>
<div class="col-lg-6">
<img src="images/iphone6.png" alt="iphone-mockup">
</div>
</div>
</div>
</section>
css
body
{
font-family: Montserrat;
}
#title
{
background-color: #ff4c68;
color: #fff;
}
.first
{
font-family : Montserrat-black;
font-size: 3rem;
line-height: 1.5;
}
.container-fluid
{
padding: 3% 15%;
}
I am following Angela Yu's Web Development Udemy course to enhance my skills. Right now, I am diving into Bootstrap. The objective of the code above is to utilize bootstrap class "container-fluid" for the div element within the section with the ID "title." My intention is to add extra padding to the div element so that the navbar, iPhone image, and text are spaced out more evenly from both sides on the web page.