Bootstrap 3 code not working as expected - html

Question

So I uploaded a question that's the same as this one, however, that got very overcrowded so I am putting up the question again in hopes of explaining my problem a bit better.
I am currently making my own website using HTML, CSS, and JavaScript with bootstrap alongside. While trying to make the site mobile friendly, I have noticed an error with how 3 of the buttons are being displayed on the screen. Basically, what I want to happen is for the three buttons to be stacked on top of each other with a gap in between each one when the web page is viewed on mobile. However, the buttons aren't displaying correctly. See the first image.
One thing that I will say, though, is that I am using the feature (not sure if it's only in Google Chrome) that when you click inspect element, you can select an option that allows you to view what the web page will look like on a mobile screen. What I'm getting at, is that I don't know if it's the code that's wrong or if Google Chrome's feature doesn't work that well.
If you do have any suggestions for applications I could use to view the HTML file on a mobile device, please let me know.
PLEASE NOTE. I HAVE ONLY GIVEN THE CODE FOR ONE OF THE BUTTONS AS THE OTHER TWO ARE BASICALLY THE SAME
#media (max-width: 767px){
.btn-block-xs {
display: block;
width: 100%;
margin-bottom: 10px;
}
}
#cheapestOption {
font-family: 'Pavanam', sans-serif;
background-color: rgba(255,255,255,0.3);
border: none;
}
#cheapestOption a {
text-decoration: none;
color: white;
}
#cheapestOption p {
font-family: 'Pavanam', sans-serif;
font-size: 50px;
}
#cheapestOption ul{
text-align: left;
font-size: 17px;
}
#cheapestOption:hover {
background-color: rgba(255, 255, 255, 0.6);
text-decoration: none;
}
<div class="container-fluid" id="grad"> <!-- Pricing Buttons -->
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-4">
<button type="button" id="cheapestOption" class="btn btn-block-xs" aria-label="center Align">
<a href="pricing.html" target="_blank">
<h4>Text</h4>
<p><strong>£££</strong><span>/ £5 a month</span></p>
<ul>
<li> Text </li>
<li> Text </li>
<li> Text </li>
<li> Text </li>
</ul>
</a>
</button>
</div>
(First picture shows what it looks like on mobile) (this is what needs fixing)
(Second picture shows what it looks like on desktop) (this is fine)

Answer 1

You html and css are not really following the bootstrap documentation. I suggest you read more on how bootstrap works. You can simplify a lot of what you are doing and probably make things look a lot better too.
I would suggest create a button which is a link and move the text out of it. To answer your question exactly please see this jsfiddle.
I moved your html to be in the correct col class Let me know if you have anymore questions,
html
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-4"><button type="button" id="cheapestOption" class="btn btn-block-xs" aria-label="center Align">
<a href="pricing.html" target="_blank">
<h4>Text</h4>
<p><strong>£££</strong><span>/ £££ a month</span></p>
<ul>
<li> Text </li>
<li> Text </li>
<li> Text </li>
<li> Text </li>
</ul>
</a>
</button></div>
<div class="col-md-4 col-sm-4 col-xs-4"> <button type="button" id="averageOption" class="btn btn-block-xs" aria-label="center Align">
<a href="pricing.html" target="_blank">
<h4>Text</h4>
<p><strong>£££</strong><span>/ £££ a month</span></p>
<ul>
<li> Text </li>
<li> Text </li>
<li> Text </li>
<li> Text </li>
</ul>
</a>
</button></div>
<div class="col-md-4 col-sm-4 col-xs-4"> <button type="button" id="expensiveOption" class="btn btn-block-xs" aria-label="center Align" disabled>
<h4>Text</h4>
<p><strong>£££</strong><span>/ £££ a month</span></p>
<p id="tempBottom"><strong>Coming Soon</strong></p>
</button></div>
</div>
</div>
CSS
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
#cheapestOption {
font-family: 'Pavanam', sans-serif;
background-color: red;
border: none;
}
#cheapestOption a {
text-decoration: none;
color: white;
}
#cheapestOption p {
font-family: 'Pavanam', sans-serif;
font-size: 1em;
}
#cheapestOption ul {
text-align: left;
font-size: 17px;
}
#cheapestOption:hover {
background-color: rgba(255, 255, 255, 0.6);
text-decoration: none;
}
#averageOption {
font-family: 'Pavanam', sans-serif;
width: 100%;
background-color: red;
border: none;
color: white;
}
#averageOption a {
text-decoration: none;
color: white;
}
#averageOption p {
font-family: 'Pavanam', sans-serif;
font-size: 1em;
}
#averageOption ul {
text-align: left;
font-size: 17px;
}
#averageOption:hover {
background-color: rgba(255, 255, 255, 0.6);
}
#expensiveOption {
font-family: 'Pavanam', sans-serif;
width: 100%;
background-color: red;
border: none;
color: white;
}
#expensiveOption a {
text-decoration: none;
color: white;
}
#expensiveOption p {
font-family: 'Pavanam', sans-serif;
font-size: 1em;
}
#expensiveOption ul {
text-align: left;
font-size: 1em;
}
To simplify this for you here are a few things to remember,
Bootstrap is built for mobile first.
Each row consist of 12 pieces, so when you tell it col-md-4 you are saying that when the browser is the width of col-md you want that space to take up 1/3 of the width of the row.
You can target each browser size by default css built into bootstrap using col-xs col-sm -col-md etc... To see the default size of each col-size check the documentation or inspect element and check the class in the DOM.
Bootstrap Grid System
If you want the col-size to stack at certain screen widths this is what you can do.
If when the screen is sm you want them to stack you could do,
<div class="row">
<div class="col-sm-12">
<p>My text here will be on this row alone.</p>
</div>
<div class="col-sm-12">
<p>My text here will be on this row alone.</p>
</div>
<div class="col-sm-12">
<p>My text here will be on this row alone.</p>
</div>
</div> <!-- end of row -->
This will stack on sm size because when the screen is the width of the sm size it will take up 12 which is the whole space. So that media query will fire off and the col will now take up the whole row.
Remeber you can stack each class as well. So if you want to make sure each col stack starting with md you could do this,
<div class="col-xs-12 col-sm-12 col-md-12 ">
Now when the browser is at each of those class target widths whatever html is in that div will take up the whole row.