Set width of div to full page - html

Question

Hello i have a landing page. I would like to set width of my header to the full page with bootstrap. I was trying to set it with container-fluid class but its not working. How to fix this? That it will be responsive and width set to the full page? Thanks for Help
Here is the code:
#import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght#0,200;0,400;0,700;0,900;1,600&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght#0,200;0,700;0,900;1,600&display=swap');
.raleway600 {
font-family: raleway, sans-serif;
font-weight: 600;
font-style: italic;
}
.raleway900 {
font-family: raleway, sans-serif;
font-weight: 900;
font-style: normal;
font-size: 4em;
}
* {
font-family: "Raleway", sans-serif;
}
body {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
padding-top: 60px;
width: 98%;
font-family: "Raleway", sans-serif;
}
.navbar {
font-family: "Raleway", sans-serif;
}
.container {
padding-top: 10rem;
}
/* fix padding under menu after resize */
#media screen and (max-width: 767px) {
body {
padding-top: 60px;
}
}
#media screen and (min-width:768px) and (max-width: 991px) {
body {
padding-top: 110px;
}
}
#media screen and (min-width: 992px) {
body {
padding-top: 60px;
}
}
footer {
padding: 0;
margin: 0 auto;
position: relative;
background-color: rgb(11, 11, 11);
width: 100%;
}
.logo {
width: 7rem;
height: 7rem;
}
.navbar-brand {
margin-left: 17em !important;
}
#banner {
position: relative;
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("logo");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
}
.hero-text {
text-align: center;
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
.row-fluid {
text-align: center;
justify-content: center !important;
}
.img-responsive {
margin: 0 auto
}
nav {
overflow: auto;
}
header {
height: 100vh;
}
.card-img-top {
width: 100%;
height: 15vw;
object-fit: cover;
}
<header>
<div id="banner" class="container-fluid baner p-0 ">
<div class="hero-text">
<h1 class="raleway900">"Text 1"</h1>
<p class="raleway600"><strong>Text 2</strong></p>
<p class="raleway600"><strong>Text 3</strong></p>
<p class="raleway600"><strong>Text 4</strong> </p>
<p class="raleway600"><strong>Text 5</strong> </p>
<button class="btn btn-primary raleway600">Button 1</button>
<button class="btn btn-outline-light raleway600">Button 2</button>
</div>
</div>
</header>
https://jsfiddle.net/j28qyhrw/1/

Answer 1

You can have it, hope it helps
<div class="header container-fluid d-flex justify-content-between align-items-center">
<div class="logo">Logo</div>
<nav class="nav">
<ul class="d-flex">
<li>
Link 1
</li>
<li>
Link 2
</li>
<li>
Link 3
</li>
<li>
Link 4
</li>
</ul>
</nav>
<div class="hamburger-menu-wrap ">
<span></span>
<span></span>
<span></span>
</div>
</div>
<header class="banner container-fluid border-bottom">
<div class="banner1">
<p>Header 1</p>
<p>Header 2</p>
<p>Header 3</p>
<p>Header 4</p>
</div>
</header>
<div class="main-container container-fluid">
<p>Content 1</p>
<p>Content 2</p>
<p>Content 3</p>
<p>Content 4</p>
<p>Content 5</p>
</div>
<footer class="footer container-fluid text-center">
<p class=" pb-0">Footer</p>
</footer>
/* header */
.header{ background-color: #2b2d3b; color: #fff; padding-top: 10px; padding-bottom: 10px; }
.header nav ul{ list-style-type: none; padding: 0; margin: 0; background-color: #2b2d3b; color: #fff; }
.header nav ul li{ list-style: none; padding:0 ; margin: 0 15px; color: #fff; }
.header nav ul li a{ color: #fff; }
/* hamburger menu */
.hamburger-menu-wrap {width: 24px;height: 16px;cursor: pointer;z-index: 1;display: none;}
.hamburger-menu-wrap span {background: #fff;display: block;height: 2px;margin-bottom: 6px;width: 100%;float: right;cursor: pointer !important;}
#media(max-width:991px){
.hamburger-menu-wrap{ display: block; }
.header nav{ display: none; }
.hamburger-open .header nav{ display: flex; }
.hamburger-open .header nav ul{ flex-direction: column!important; }
}
.footer{ background-color: #2b2d3b; color: #fff; padding-top: 10px; padding-bottom: 10px; }
Or check in jsfiddle example link :
https://jsfiddle.net/DeveloperSandip/u6ph27cx/4/

Answer 2

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<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">
<a class="navbar-brand" href="#">Hidden brand</a>
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<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="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<div class="container-fluid p-md-5 p-5 m-md-auto">
<div class="text-center" id="">
<img id="logo" style="pointer-events:none;" src="" class="img-fluid g-md-5 p-md-5" alt="">
</div>
</div>
</body>
</html>
try
Responsive containers allow you to specify a class that is 100% wide until the specified breakpoint is reached, after which we apply max-widths for each of the higher breakpoints. For example, .container-sm is 100% wide to start until the sm breakpoint is reached, where it will scale up with md, lg, xl, and xxl.Watch the screenshot
hope it will help you
Why do you use your own css for it? I don't have much experience yet, it's possible that I misunderstood. It is enough to insert the cdn in the head - I thought. Could it be that your css file conflicts with Bootstrap?