Resolved issues with the bootstrap content

Question

Resolved issues with the bootstrap content

Currently working on a responsive template using Bootstrap and aiming to create a design similar to https://i.sstatic.net/9jNOQ.png

I noticed that the background can be set with .container-fluid, but the content is aligned within a container. How can this effect be achieved? Here is my current 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>

As of now, the text extends to the full width of the container. Should I incorporate a nested-container like so?

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

or is there a better approach to achieve this layout?

html css bootstrap-4 frontend

Answer 1

Answer №1

Unique Gradient Approach

To create a unique gradient background, use the following CSS code:

background:linear-gradient(to right,black,black,green,green)

. Apply the class container to 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>

New Approach with Bootstrap+Flex

Follow these steps to achieve the desired layout:

Add another <div> inside each of your services-* sections
Assign a width value for each inner <div> as needed

Apply the following CSS properties to your container classes (e.g., services-black)

.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>

Answer 2

Unique Gradient Approach

To create a unique gradient background, use the following CSS code:

background:linear-gradient(to right,black,black,green,green)

. Apply the class container to 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>

New Approach with Bootstrap+Flex

Follow these steps to achieve the desired layout:

Add another <div> inside each of your services-* sections
Assign a width value for each inner <div> as needed

Apply the following CSS properties to your container classes (e.g., services-black)

.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>

Answer 3

Answer №2

You have the option to nest a .container within a .container-fluid, and you can also style the classes .services or .container-fluid to set the background-color. An example would be using pseudo-elements for the .services class.

.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 apply 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>

Answer 4

You have the option to nest a .container within a .container-fluid, and you can also style the classes .services or .container-fluid to set the background-color. An example would be using pseudo-elements for the .services class.

.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 apply 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>

Resolved issues with the bootstrap content

Answer №1

Unique Gradient Approach

New Approach with Bootstrap+Flex

Answer №2

Similar questions

Creating a Submenu with HTML and CSS

Is there a way to determine if a variable includes Chinese or Japanese characters?

Guide to making an adaptive hamburger menu using Bootstrap

Tips for Retrieving and Modifying Bounds in Google Maps to Add or Remove Markers from a List

Fade Effect on Bootstrap Icons

Is it possible to enable auto-completion for IDs in a separate CSS file using WebStorm 7?

Inject a jQuery form submission using .html() into a div element

Adding a row from two drop-down lists to a table and deleting it upon selection

Bootstrap grid. Instead of moving to the next row, scroll horizontally when the content overflows

The text/font-weight of the header button is mysteriously shifting without warning

What is the process for embedding iframe content onto a main webpage?

I am having difficulty with my ajax code and I am unsure of how to resolve it

Radio button default checked value remains unchanged when a different selection is made

Overflowing Bootstrap navbar problem

The one-click button is functional on larger screens, while on mobile devices, only a double click will register

How can I ensure that my Bootstrap 4 column adjusts to its content appropriately?

Identifying rectangular shapes in an image and overlaying a div on top using Jquery

Encountered a challenge when attempting to substitute styles using classes in material-ui

Is it more effective to be precise when choosing IDs in CSS?

Issues with Autofocus while Searching and Selecting from Dropdown menu