CODEWITHSUNDEEP
htmlcsstwitter-bootstrapresponsive
Hammad Hassan
Hammad Hassan

Reputation: 622

how to set the html bootstrap buttons responsive in mobile

I am new here so apologies if anything wrong I mention.

I want to make my bootstrap buttons mobile responsive. but, I am new to CSS. i want to display my buttons and text in middle of screen for small devices after video.so please tell me how to do it.

Here is my HTML code: 

<div class="row" style="margin-top: 5%">
  <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 ">
    <p style="float: right; color: black;">I'm Ready to get my risk free <br /> membership today! <br /> (Limited Time and Quantities) </p>
  </div>
</div>
<div class="row">
  <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 ">
    <a href="#">
      <button class="btn btn-theme btn-sm" style="background: white;color: #404040">
        My Email Address
      </button> </a>
    <a href="#">
      <button class="btn btn-theme btn-sm" style="background: #404040; border-radius: 10px; color: white">
        Keep me on your email list
      </button> </a>
    <a href="#">
      <button class="btn btn-theme btn-sm" style="background: yellow; border-radius: 10px;  float: right; color: black">
      Get My Risk <br /> Free Membership today
      </button> </a>
  </div>
</div>

responsive layout

Upvotes: 0

Views: 2350

Answers (2)

Pushprajsinh Chudasama
Pushprajsinh Chudasama

Reputation: 7969

You can use media query for it or bootstrap 4 classes.

here is link for bootstrap class: https://getbootstrap.com/docs/4.0/utilities/display/

@media (max-width: 575px){
        p{
            text-align: center;
            float: unset !important;
        }
        a {
            display: flex;
            justify-content: center;
            margin-bottom: 15px;
        }
    }



<div class="row" style="margin-top: 5%">
        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 ">
          <p style="float: right; color: black;">I'm Ready to get my risk free  <br /> membership today! <br />
          (Limited Time and Quantities) </p>
        </div>
      </div>
      <div class="row">
        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
          <a href="#"><button class="btn btn-theme btn-sm" style="background: white;color: #404040">
            My Email Address
          </button> </a>
          <a href="#"><button class="btn btn-theme btn-sm" style="background: #404040; border-radius: 10px; color: white">
            Keep me on your email list
          </button> </a>
          <a href="#"><button class="btn btn-theme btn-sm" style="background: yellow; border-radius: 10px;  float: right; color: black">
            Get My Risk <br /> Free Membership today
          </button> </a>
        </div>
      </div>

Upvotes: 1

Revti Shah
Revti Shah

Reputation: 642

Here is the code. Hope it will Help you. I have added some of classes into p and a tag. Even i put css for mobile view. If any changes please let me know.

@media screen and (max-width: 767px) {
  .email-wrap {
    display: block;
    margin-bottom: 20px;
    text-align: center;
  }

  .text-wrap {
    text-align: center;
  }

}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="main-wrapper">
  <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12">
    <p class="text-wrap">I'm Ready to get my risk free <br /> membership today! <br />
      (Limited Time and Quantities) </p>
  </div>
</div>

  <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12">
    <a href="#" class="email-wrap"><button class="btn btn-theme btn-sm" style="background: white;color: #404040">
        My Email Address
      </button> </a>
    <a href="#" class="email-wrap"><button class="btn btn-theme btn-sm" style="background: #404040; border-radius: 10px; color: white">
        Keep me on your email list
      </button> </a>
    <a href="#" class="email-wrap"><button class="btn btn-theme btn-sm" style="background: yellow; border-radius: 10px;color: black">
        Get My Risk <br /> Free Membership today
      </button> </a>

</div>

Upvotes: 1

Related Questions