programmingHelp programmingHelp - 1 month ago 7
CSS Question

Bootstrap 3 not working as needed

I have 3 buttons in a container using Bootstrap 3. When the website is being viewed on a computer (Laptop or Desktop PC) they work fine. However, when the website viewed on mobile they don't function as needed.

I have added in the

.col-xs-12 .col-md-4
however the buttons are not spanning the full width of the screen and the text is not staying within the container.

Here is the code for the three buttons:



<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<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>Header 4</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-xs-12 col-md-4">
<button type="button" class="btn " aria-label="center Align">
<a href="pricing.html" target="_blank">
<h4>Header 4</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-xs-12 col-md-4">
<button type="button" class="btn " aria-label="center Align" disabled>
<h4>Header 4</h4>
<p><strong>£££</strong><span>/ £££ a month</span></p>
<p id="tempBottom"><strong>Coming Soon</strong></p>
</button>
</div>
</div>
</div>
</div>







#cheapestOption {
font-family: 'Pavanam', sans-serif;
width: 100%;
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;
}

@media (max-width: 767px){
.btn-block-xs {
display: block;
width: 100%;
margin-bottom: 10px;
}
}





Hopefully, the images will make more sense.

Mobile version of website
Desktop version of website

Answer

Add the .btn-block-xs to each .btn class

Try with following media-query:

you can change media query value according to your need

CSS:

@media (max-width: 767px){
  .btn-block-xs {
    display: block;
    width: 100%;
    margin-bottom: 10px;
  }
}