Working on responsive template with bootstrap and trying to create something like
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
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.Bootstrap+Flex Way
How to achieve the space that you’re expecting:
<div>
inside yourservices-*
On your container i.e
services-*
give the following propertiesYou can nest
.container
after.container-fluid
and also you can stlyle the class.services
or.container-fluid
to give thebackground-color
and for having the background colors as you example i used pseudo element for the.services
clas