Make Bootstrap Column take full page width (or at least 90%) - html

Question

I am working on a final project for a class, and am just learning how to use bootstrap. While I have some working knowledge of HTML and the like (or know where to go if I get stuck), the one thing I cannot figure out for the life of me is how to make the bootstrap columns take up more of the screen. I've copied and pasted the relevant code below, hopefully someone can tell me what I am doing wrong or if this can even be resolved!
I have been looking at other slack posts (I forgot to copy the link, sorry!) and the w3schools website, but am still having the same problem.
<nav class="navbar navbar-expand-sm bg-white navbar-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Awards</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Resume</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Papers</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<! –– The columns still aren't taking up 100% of the screen width. ––>
<div class="col-sm-2">
<! –– Ideally more to the left ––>
Welcome the user to the website here
</div>
<div class="col-sm-4">
Brief bit of information about me
</div>
<div class="col-sm-6">
Image carosel (idk how to spell) with images of me, my friends & family
</div>
</div>
</div>

Answer 1

When you use container class its by default takes 80% of window width along with margin right and left auto. For 90% of window you need to use container-fluid class so it cover full width of window. Then you col-4 col-2 and col-5 to achieve 90%.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-sm bg-white navbar-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Awards</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Resume</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Papers</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<! –– The columns still aren't taking up 100% of the screen width. ––>
<div class="col-sm-2">
<! –– Ideally more to the left ––>
Welcome the user to the website here
</div>
<div class="col-sm-4">
Brief bit of information about me
</div>
<div class="col-sm-5">
Image carosel (idk how to spell) with images of me, my friends & family
</div>
</div>
</div>
Use this :
<div class="container-fluid">
<div class="row">
<! –– The columns still aren't taking up 100% of the screen width. ––>
<div class="col-sm-2">
<! –– Ideally more to the left ––>
Welcome the user to the website here
</div>
<div class="col-sm-4">
Brief bit of information about me
</div>
<div class="col-sm-5">
Image carosel (idk how to spell) with images of me, my friends & family
</div>
</div>
</div>