1

This is my sample code

<div class="container">
  <div class="row">

    <div class="col-md-6" style="background-color:red; min-height:100px;">
      sample
    </div>

    <div class="col-md-6" style="background-color:yellow; min-height:100px;">
      sample
    </div>

  </div>
</div>

and I have this

container result

But I need this

container-fluid

I can reach result that I want with container-fluid, but I need container...

FireFoxII
  • 828
  • 4
  • 18
  • 31

2 Answers2

1

Reading the commentaries of your question, why not use the class container-fluid and create a custom class that helps to limit and center the container-fluid element when the width of the screen is greater than the specified (1170px in your case). For example, with a code like this:

HTML

<div class="container-fluid custom-class">
  <div class="row">

    <div class="col-md-6" style="background-color:red; min-height:100px;">
      sample
    </div>

    <div class="col-md-6" style="background-color:yellow; min-height:100px;">
      sample
    </div>

  </div>
</div>

CSS

.custom-class {
  max-width: 1170px;
  margin: 0 auto;
}

Example:

You can play with the width resize on the next example, and check if this is what you are expecting. On this example, max-width was decremented to 900px so you can visualize how it works.

https://jsfiddle.net/8bz97a1u/1/

UPDATE:

Here you have a new example with full-width background (that have two colors) and an inner html with fixed max-width (of 900px in the example):

HTML

<div class="container-fluid custom-background">
  <div class="row fixed-max-width">

    <div class="col-md-6 border border-primary" style="min-height:100px;">
      sample
    </div>

    <div class="col-md-6 border border-primary" style="min-height:100px;">
      sample
    </div>

  </div>
</div>

CSS

.fixed-max-width {
  max-width: 900px; /* Example, but you can replace by the value you need */
  margin: 0 auto;
}

.custom-background {
  background: linear-gradient(90deg, red 50%, yellow 50%);
}

LIVE EXAMPLE

https://jsfiddle.net/8bz97a1u/2/

Shidersz
  • 16,846
  • 2
  • 23
  • 48
  • No, there is always the same problem... Look here https://jsfiddle.net/o5ybg4jf/ ... I want fixed-width but background must cover full width – FireFoxII Oct 16 '18 at 09:18
  • 1
    Sorry, i'm not really understanding your problem/goal. I'm still not sure why **container-fluid** alone do not work for you. Can you explain what you need please? – Shidersz Oct 16 '18 at 14:27
  • Sorry, my english is very poor... As you can see in the first image, on resolution like 1600width and with container fixed, the background fill only the container and white outside the container while I want that the background cover the entire width of the screen... The result must be like, for example, background container-fluid and web structure container fixed... Hope I was clear :) – FireFoxII Oct 17 '18 at 07:02
  • So, you want the background to be full width (i.e. fill the available width of the screen), but the inner html have a fixed max width of **X** pixels? If the background is the same for all the web page, then you can add it to the body or a wrapper container, and keep all other html inside a container of fixed width (I will update with an example of this). The other possible case you might want are that backgrounds of all the html elements stretch to full width even when the elements have a fixed width, and i don't know if this is possible to make. – Shidersz Oct 17 '18 at 16:47
0

I figured out how to do that without so much code. Similar with Shidersz answer, but dealing more with structure. Mantaining responsivity and using bootstrap classes: HTML

<div class="position-relative">
  <div class="container-fluid background-holder">
    <div class="row h-100">
      <div class="col-md-6 bg-primary">
        <p class="text-left">left split</p>
      </div>
      <div class="col-md-6 bg-warning">
        <p class="text-right">right split</p>
      </div>
    </div>
  </div>

  <div class="container">
    <div class="row text-center">
      <section class="col-md-6">
        <h1>left content</h1>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eget mauris ut enim scelerisque sollicitudin in nec nisl. Quisque arcu arcu, bibendum id nunc sit amet, auctor bibendum tellus. Sed non scelerisque nulla. Sed pharetra lacus sapien, et condimentum
        ante condimentum non. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce magna lorem, lacinia congue varius blandit, facilisis quis nulla. Maecenas eu finibus tortor, sed volutpat justo. Fusce pulvinar
      </section>
      <section class="col-md-6">
        <h1>right content</h1>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eget mauris ut enim scelerisque sollicitudin in nec nisl. Quisque arcu arcu, bibendum id nunc sit amet, auctor bibendum tellus. diam at placerat consectetur. Aliquam nec nisl luctus, imperdiet
        dolor non, feugiat ligula.
      </section>
    </div>
  </div>
</div>

CSS

.background-holder {
  overflow: hidden;
  margin: 0 auto;
  position: absolute;
  height: 100%;
  pointer-events: none;
  z-index: -1;
}

.container {
  border-left: 2px solid red;
  border-right: 2px solid red;
}

jsfiddle DEMO

Giovan Cruz
  • 681
  • 9
  • 21