CODEWITHSUNDEEP
htmlcssbootstrap-4
Manisha
Manisha

Reputation: 57

Full width container text box in bootstrap

How to make my code to use full width of the device? I am using bootstrap.

    <section class="special-area bg-white section_padding_100" id="about">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <!-- Section Heading Area -->
                        <div class="section-heading text-center">
                            <h2>Why Is It Special</h2>
                            <div class="line-shape"></div>
                        </div>
                    </div>
                </div>
<div class="row">
                <!-- Single Special Area -->
                <div class="col-12 col-md-4">
                    <div class="single-special text-center wow fadeInUp" data-wow-delay="0.2s">
                        <div class="single-icon">
                            <i class="ti-mobile" aria-hidden="true"></i>
                        </div>
                        <h4>Heading</h4>
                        <p>Some text here</p>
                    </div>
                </div>
            </div>
</section>

Upvotes: 3

Views: 1154

Answers (3)

Berdy
Berdy

Reputation: 34

You can include those parts of your code inside a pre-defined div whose class name is container-fluid. Here are the properties of container-fluid:

.container-fluid {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

You can also add a 100% width style to any other container as well, but maybe that can collide with other style rules of your CSS.

Hope it helps.

Upvotes: 1

Steven Kuipers
Steven Kuipers

Reputation: 847

From the docs:

Use .container-fluid for a full width container, spanning the entire width of the viewport.

Just make sure it is your outermost element.

Upvotes: 2

Ali
Ali

Reputation: 1795

you have to use 

class="container-fluid"

instead of container class because container class itself has paddings from the right and left...

Upvotes: 6

Related Questions