Full width container text box in bootstrap

Question

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>

Answer 1

you have to use

class="container-fluid"

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