How to code two colored full-width header?

Question

I'm codding new website. How to code this layout? I need a full-width header, but one side is gradient (4 cols) and another is white (8 cols). Layout: https://i.stack.imgur.com/tN2Ec.png

I could use a flexbox, but I can't put a bootstrap grid inside it.

@Paulie_D I have tried to research it and have tried to code. — Ivan Ivanov, Mar 28 '19 at 16:01
However - https://stackoverflow.com/questions/28565976/css-how-to-overflow-from-div-to-full-width-of-screen or https://stackoverflow.com/questions/33564131/bootstrap-full-width-with-2-different-backgrounds-and-2-columns — Paulie_D, Mar 28 '19 at 16:03
@Paulie_D thank you. I am going to try to use a "before" and "after" elements — Ivan Ivanov, Mar 28 '19 at 16:15

score 0 · Answer 1 · answered Mar 28 '19 at 16:25

<div class="header"></div>

just use linear-gradient like this

.header {
  background: linear-gradient(
   to right,
   #ff9e2c 0%,
   #ff9e2c 50%,
   #b6701e 50%,
   #b6701e 100%
  );
  height: 100%; //what height or width u want
  width: 100%;
}


</style>

use can use it like

  background: linear-gradient(
   to right,
   #ff9e2c 0%,
   #b6701e 50%,
   #b6701e 100%
  );

too but effect change

score 0 · Answer 2 · answered Mar 28 '19 at 16:42

You have create col-4 and col-8 in your header and apply background individually. If you apply gradient to your header without column it'll create problem for you in different resolutions. I create a very basic example for you, i hope it'll help you out. Thanks

.white-bg {
 background-color: #fff;
}
.gradient-bg {
 background-image: linear-gradient(red, yellow);
}

<!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<header>
 <div class="row">
  <div class="col-4 gradient-bg">Gradient Background</div>
  <div class="col-8 white-bg">White Background</div>
 </div>
</header>

How to code two colored full-width header?

2 Answers2