body{
height: 100%;
font-size: 1rem ;
}
.navbar-brand{
font-family: 'Syne Mono', monospace;
color: black;
size: 0.5rem;
}
header {
width: 100%;
height: 100vh;
background: rgb(237,104,104);
background: linear-gradient(90deg, rgba(237,104,104,1) 0%, rgba(232,118,118,1) 50%, rgba(236,159,159,1) 100%);
position: relative;
overflow: hidden;
z-index: 2;
}
.navbar-color{
background: rgb(237,104,104);
background: linear-gradient(90deg, rgba(237,104,104,1) 0%, rgba(232,118,118,1) 50%, rgba(236,159,159,1) 100%);
}
.nav-link{
color: white;
}<!--Navbar-->
<nav class="navbar navbar-expand-lg navbar-color bg-light fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true"></a>
</li>
</ul>
</div>
</div>
</nav>
<!--Header-->
<header>
<div class="container-fluid">
<div class="col-md-6"><img src="/images/Online shopping _Outline.svg" alt="shoppingicon">
<div class="col-md-6">Textrheoefjfoj
</div>
</div>
</header>
</body>
</html>Hello! I'm new to web development and exploring the possibilities of using Bootstrap to enhance my skills in this field. However, I'm unsure about utilizing grids effectively, specifically how to place an image on the left with text alongside it. Can someone provide guidance or resources for better understanding? https://i.sstatic.net/SXckI.png