skip to Main Content

Working on responsive template with bootstrap and trying to create something like
enter image description here

I see, that bg can be .container-fluid , but content is container aligned. How can this be done? Now I have this structure

<div class="services">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12 col-md-4 services-black">
                <h1>SEO Optimized</h1>
                <p>
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
                </p>
            </div>
            <div class="col-12 col-md-4 services-red">
                <h1>Responsive</h1>
                <p>
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
                </p>
            </div>
            <div class="col-12 col-md-4 services-green">
                <h1>Cloud Services</h1>
                <p>
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
                </p>
            </div>
        </div>
    </div>
</div>

and now text is stretched to the full width of the container. Do I need nested-container such as

<div class="container-fluid">
    <div class="container">
        ..
    </div>
</div>

or something else? how to implement it correctly?

2

Answers


  1. Gradient Way

    You can assign background:linear-gradient(to right,black,black,green,green) to get the desired background.
    And container as class on your content.

    .services {
      background: linear-gradient(to right, black, black, green, green);
    }
    
    .services-red {
      background: red;
      color: white;
    }
    
    .services-green {
      background: green;
      color: white;
    }
    
    .services-black {
      background: black;
      color: white;
    }
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
    <div class="services">
      <div class="container">
        <div class="row">
          <div class="col-12 col-md-4 services-black">
            <h1>SEO Optimized</h1>
            <p>
              Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
            </p>
          </div>
          <div class="col-12 col-md-4 services-red">
            <h1>Responsive</h1>
            <p>
              Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
            </p>
          </div>
          <div class="col-12 col-md-4 services-green">
            <h1>Cloud Services</h1>
            <p>
              Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
            </p>
          </div>
        </div>
      </div>
    </div>

    Bootstrap+Flex Way

    How to achieve the space that you’re expecting:

    1. Get another <div> inside your services-*
    2. Give it a width as per your convenience.
    3. On your container i.e services-* give the following properties

      .services-black{
        display:flex;
        justify-content:flex-end; // Align box to right
      }
      .services-green{
        display:flex;
        justify-content:flex-start;  //Align box to left
      }
      .services-red{
        display:flex;
        justify-content:center;    //Align box to center
      }
      
    .cloud,
    .seo,
    .responsive {
      width: 60%;
    }
    
    .services-black {
      background: black;
      color: white;
      display: flex;
      justify-content: flex-end;
    }
    
    .services-green {
      background: green;
      color: white;
      display: flex;
      justify-content: flex-start;
    }
    
    .services-red {
      background: red;
      color: white;
      display: flex;
      justify-content: center;
    }
    
    @media (max-width: 768px) {
      .cloud,
      .seo,
      .responsive {
        width: 100%;
      }
    }
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
    <div class="services">
      <div class="container-fluid">
        <div class="row">
          <div class="col-12 col-md-4 services-black">
            <div class="seo">
              <h4>SEO Optimized</h4>
              <p>
                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
              </p>
            </div>
          </div>
          <div class="col-12 col-md-4 services-red">
            <div class="responsive">
              <h4>Responsive</h4>
              <p>
                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
              </p>
            </div>
    
          </div>
          <div class="col-12 col-md-4 services-green">
            <div class="cloud">
              <h4>Cloud Services</h4>
              <p>
                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
              </p>
            </div>
    
          </div>
        </div>
      </div>
    </div>
    Login or Signup to reply.
  2. You can nest .container after .container-fluid and also you can stlyle the class .services or .container-fluid to give the background-color and for having the background colors as you example i used pseudo element for the .services clas

    .services:before {
      position: absolute;
      left: 0;
      top: 0;
      background-color: black;
      height: 100%;
      width: 33.333%;
      display: block;
      content: "";
      z-index: -1;
    }
    
    .services:after {
      position: absolute;
      right: 0;
      top: 0;
      background-color: green;
      height: 100%;
      width: 33.333%;
      display: block;
      content: "";
      z-index: -1;
    }
    
     /* you can also give the styles to the .container-fluid*/
    .services {
      position: relative;
      color: white;
    }
    
    .services:before {
      position: absolute;
      left: 0;
      top: 0;
      background-color: black;
      height: 100%;
      width: 33.333%;
      display: block;
      content: "";
      z-index: -1;
    }
    
    .services:after {
      position: absolute;
      right: 0;
      top: 0;
      background-color: green;
      height: 100%;
      width: 33.333%;
      display: block;
      content: "";
      z-index: -1;
    }
    
    
    .services-black {
      background-color: black;
    }
    
    .services-red {
      background-color: red;
    }
    
    .services-green{
      background-color: green;
    }
            <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
            <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
            <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
            
             <div class="services">
    <div class="container-fluid">
    <div class="container">
    <div class="row">
    <div class="col-12 col-md-4 services-black">
    <h1>SEO Optimized</h1>
    <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
    </p>
    </div>
    <div class="col-12 col-md-4 services-red">
    <h1>Responsive</h1>
    <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
    </p>
    </div>
    <div class="col-12 col-md-4 services-green">
    <h1>Cloud Services</h1>
    <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
    </p>
    </div>
    </div>
    </div>
    </div>
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search