Bootstrap Grid Framework within Wordpress Theme Issue - css

Question

I am having an issue with bootstrap grid framework within Wordpress. I am trying to create a grid. 2 Rows. First row is one column and second row is three columns with a little space in between them. The columns on the site are stacked as rows and not side by side. Bootstrap documentation says if you don't use something like sm-3 after col, then it will generate widths automatically.
Page in question: http://dev.dragonscaletech.com/our-story/
<div id="shoutOuts">
<div class="container">
<div class="row">
<div class="col">
<h1>Shout Outs!</h1>
</div>
</div>
<div class="row">
<div class="col">
<h4>The TitanTough21 Foundation</h4><br>
<p>An amazing foundation formed to find a cure for Li-Fraumeni Syndrome. Li-Fraumeni Syndrome is a rare genetic disorder that greatly increases the risk of developing several types of cancer, particularly in children and young adults. In addition,
they work hard to help families pay their cancer bills.</p>
<p>Learn more at: www.TitanTough21.org</p>
</div>
<div class="col">
<h4>47 Films</h4><br>
<p>A Digital Filmmaking Company based in Broward County, Florida.</p>
<p>Really, a great company with great people.</p>
<p>Learn more on Facebook: 47FilmsLLC</p>
</div>
<div class="col">
<h4>Seagull Services</h4><br>
<p>Assists individuals with life challenges by providing education, training, employment, residential services, community integration and support services.</p>
<p>We are working with Seagull Services to assemble a manageable quantity of Back Scratch Scrubbers for us!</p>
<p>Learn more at: www.SeagulServices.org</p>
</div>
</div>
</div>

Answer 1

The issue occurs because you are trying to use Bootstrap 4 syntax with Bootstrap 3 running on your site. Those 2 don't mix well.
Solution: Replace col with col-xs-4 in the second row and with col-xs-12 in the first row.
Alternatively, load Bootstrap 4 files on your site.
P.S. Remember that both the col class in Bootstrap 4 as well as col-xs-* in Bootstrap 3 are non-responsive i.e. those classes define what happens on the smallest screens and you probably don't want 3 columns on the smallest screens. So, adjust accordingly.

Answer 2

Searched quite a bit on google and discovered the container-fluid class. Then I searched Stack Overflow and found this post.
Bootstrap 3 adding gutters to the grid system
I modified the code to this and got exactly what I'm looking for! Thank you to all that gave me more things to check out.
<div id="shoutOuts">
<div class="container">
<div class="row">
<div class="col-sm-12">
<h1>Shout Outs!</h1>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="container-fluid">
<h4>The TitanTough21 Foundation</h4><br>
<p>An amazing foundation formed to find a cure for Li-Fraumeni Syndrome. Li-Fraumeni Syndrome is a rare genetic disorder that greatly increases the risk of developing several types of cancer, particularly in children and young adults. In addition,
they work hard to help families pay their cancer bills.</p>
<p>Learn more at: www.TitanTough21.org</p>
</div>
</div>
<div class="col-sm-4">
<div class="container-fluid">
<h4>47 Films</h4><br>
<p>A Digital Filmmaking Company based in Broward County, Florida.</p>
<p>Really, a great company with great people.</p>
<p>Learn more on Facebook: 47FilmsLLC</p>
</div>
</div>
<div class="col-sm-4">
<div class="container-fluid">
<h4>Seagull Services</h4><br>
<p>Assists individuals with life challenges by providing education, training, employment, residential services, community integration and support services.</p>
<p>We are working with Seagull Services to assemble a manageable quantity of Back Scratch Scrubbers for us!</p>
<p>Learn more at: www.SeagulServices.org</p>
</div>
</div>
</div>
</div>

Answer 3

you could use col-md-offset-2 class ass described here in Bootstrap 3, if you are using Bootstrap 4 there are no more Offset classes, so you should use auto margins because Bootstrap 4 use flexbox
this certainly solves your issue