In the layout, there is a strip (blue on top) that climbs over the edge of the grid (container). If it would be on both sides, then there are no problems - I make it outside the container, and the content in the container (as other blocks are made), but the question is that the strip crawls out of the net on one side only and nothing comes to mind how to implement it.

layout

  • set container-fluid for the background, which should be the full width - lexxl
  • The background should not be the full width. For clarity, attached a piece of the layout. Above the blue strip, occupies 10 columns, but it must "go" for the edge of the grid on one side. - VeroLom
  • then you can try position: absolute for this "blue line" (or variations with a pseudo-element for it, etc.) and stretch it to the right to the desired size - lexxl

2 answers 2

Background looks out from under the container on one side only.

The gradient allows you to set a background with a blue bar running from the middle to the right edge of the screen:

 background: linear-gradient(to right, transparent 50%, darkblue 50%); background-size: 100% 30px; background-repeat: no-repeat;

To make this background under the main container, you can make a matryoshka:

.container-fluid > .row with gradient> .container > .row with site .row

Or:

<header> with gradient> .container > .row with site <header>

For clarity, tint areas with the logo and menu in different shades of blue.

enter image description here

1. .container-fluid

In the bootstrap two container options : container-fluid always occupies the entire width of the screen, but simply container sets the column to a fixed width.

https://jsfiddle.net/glebkema/ohLhdwqw

 .header { color: darkblue; font-weight: bold; } @media (min-width: 768px) { .header { background: linear-gradient(to right, transparent 50%, darkblue 50%); background-size: 100% 30px; background-repeat: no-repeat; } } .contacts { background: darkblue; color: white; height: 30px; line-height: 30px; } .logo { background: #ccf; height: 100px; line-height: 100px; } .menu { background: #99f; height: 70px; line-height: 70px; } 
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <div class="container-fluid"> <div class="row header"> <div class="container"> <div class="row"> <div class="col-sm-3 logo">Logo</div> <div class="col-sm-9 contacts">Contacts</div> <div class="col-sm-9 menu">Menu</div> </div> </div> </div> </div>

2. <header>

In HTML5, the <header> element specifies the <header> a site or section .

https://jsfiddle.net/glebkema/g54am6u4

 header { color: darkblue; font-weight: bold; } @media (min-width: 768px) { header { background: linear-gradient(to right, transparent 50%, darkblue 50%); background-size: 100% 30px; background-repeat: no-repeat; } } .contacts { background: darkblue; color: white; height: 30px; line-height: 30px; } .logo { background: #ccf; height: 100px; line-height: 100px; } .menu { background: #99f; height: 70px; line-height: 70px; } 
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <header> <div class="container"> <div class="row"> <div class="col-sm-3 logo">Logo</div> <div class="col-sm-9 contacts">Contacts</div> <div class="col-sm-9 menu">Menu</div> </div> </div> </header>

  • Thanks, that is necessary! With .container-fluid did not understand yet, therefore I do not really understand how to use it. - VeroLom pm
  • @VeroLom The bootstrap has two container options . container-fluid always occupies the entire width of the screen, and just container sets the page material to a fixed-width column. If you need a neat column for menus, text and photos. then take container . If you need to take the entire width of the screen - container-fluid . - Gleb Kemarsky
  • As I understand it, if a part of the page (block) has a background that is different from the other blocks, then you must first register .container-fluid , in it is an element with a background, and in it is already a regular .container with content? Bootstrap only recently began to learn, I do not know everything and comprehended. - VeroLom
  • @VeroLom .container defines a common column for the material, and .container-fluid helps add a block that extends beyond this column. For example, a photo, slideshow or video. By the way, to set the background to the full width of the screen, you can use not only .container-fluid , but also <header> . Added this option to your answer. - Gleb Kemarsky

If in the container the blue blue band takes up more than half, then you can do this:

http://www.bootply.com/bdhIp9EVor

 <style> #header:after { content: "fill"; width: 50%; background: lightblue; position: absolute; right: 0; top: 0; z-index:-999; } #menu { background: lightblue; } </style> <div class="container-fluid"> <div class="container" id="header"> <div class="row"> <div class="col-md-2">LOGO</div> <div class="col-md-8" id="menu">NAV</div> </div> </div> </div>