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" >
    <div >
      <h1 >"Text 1"</h1>
      <p ><strong>Text 2</strong></p>
      <p ><strong>Text 3</strong></p>
      <p ><strong>Text 4</strong> </p>
      <p ><strong>Text 5</strong> </p>
      <button >Button 1</button>
      <button >Button 2</button>
    </div>
  </div>
</header>

https://jsfiddle.net/j28qyhrw/1/

CodePudding user response：

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

CodePudding user response：

You can have it, hope it helps

<div >
    <div >Logo</div>
    <nav >
      <ul >
        <li>
          <a href="" title="">Link 1</a>
        </li>
        <li>
          <a href="" title="">Link 2</a>
        </li>
        <li>
          <a href="" title="">Link 3</a>
        </li>
        <li>
          <a href="" title="">Link 4</a>
        </li>
      </ul>
    </nav>
    <div >
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>

  <header >
    <div >
      <p>Header 1</p>
      <p>Header 2</p>
      <p>Header 3</p>
      <p>Header 4</p>
    </div>
  </header>

  <div >
    <p>Content 1</p>
    <p>Content 2</p>
    <p>Content 3</p>
    <p>Content 4</p>
    <p>Content 5</p>

  </div>

  <footer >
    <p >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/