How to Get a Responsive Button in Bootstrap 3

How to get a responsive button in bootstrap 3

In Bootstrap, the .btn class has a white-space: nowrap; property, making it so that the button text won't wrap. So, after setting that to normal, and giving the button a width, the text should wrap to the next line if the text would exceed the set width.

#new-board-btn {
    white-space: normal;
}

http://jsfiddle.net/ADewB/

How can I make a Bootstrap 3 button group responsive?

As far as I can tell, there is nothing built into Bootstrap to do this. However, it can be done using some custom CSS on top of Bootstrap. We can explicitly stack the buttons on small screens.

For this, I have used the breakpoint that Bootstrap uses for anything smaller than desktops. This can be modified easily if you want to. If you want to read more about media queries, I can recommend this MDN article (link goes to part about width, but all of article is interesting).

@media (max-width: 991px) {

  .btn-group.my-btn-group-responsive > .btn {

    display: block;

    width: 100%;

  }

  

  /* making the border-radius correct */

  .btn-group.my-btn-group-responsive > .btn:first-child {

    border-radius: 6px 6px 0 0;

  }

  .btn-group.my-btn-group-responsive > .btn:first-child:not(:last-child):not(.dropdown-toggle) {

    border-top-right-radius: 6px;

  }

  .btn-group.my-btn-group-responsive > .btn:last-child:not(:first-child) {

    border-radius: 0 0 6px 6px;

  }

  

  /* fixing margin */

  .btn-group.my-btn-group-responsive .btn + .btn {

    margin-left: 0;

  }

  

}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container">

  <div class="btn-group btn-group-justified btn-group-lg my-btn-group-responsive">

    <a href="#" class="btn btn-primary"><font size="6">الدروس و التجارب</font></a>

    <a href="#" class="btn btn-primary"><font size="6">المنشورات و الكتب الشخصية</font></a>

    <a href="#" class="btn btn-primary"><font size="6">المدونة</font></a>

  </div>

</div>

Bootstrap responsive button size

use this way

<div class="card-footer d-flex justify-content-between">
   <a href="#" class="btn btn-block btn-primary">Btn1</a>
   <a href="#" class="btn btn-primary m-0 btn-block mx-4">Btn2</a>
   <a href="#" class="btn btn-block m-0 btn-primary">Btn3</a>
</div>

https://jsfiddle.net/lalji1051/3504rLso/3/

Responsive bootstrap 3 buttons side by side without line breaks, only show symbol when too small

Here is my solution

Make the button parent flex-container.

Then give flex:1 to each button, this will make them flexible and also u will be able to add more buttons.

Then using the @media(max-width:400px) rule, hide the text below 400px

Add this to your css

.b-container {
  display: flex;
}

.b-container .btn {
  flex: 1
}

@media(max-width:400px) {
  .b-container .text {
    display: none;
  }
}

.fixed-footer {

  width: 75%;

}

.b-container {

  display: flex;

}

.b-container .btn {

  flex: 1

}

@media(max-width:400px) {

  .b-container .text {

    display: none;

  }

}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="fixed-footer">

  <div class="btn-toolbar b-container">

    <button class="btn btn-default"><i class="fa fa-plus"></i> <span class="text"> Neues Projekt  </span>

    </button>

    <a class="btn btn-success" href=""><i class="fa fa-upload"></i> <span class="text">Projekte exportieren </span>

    </a>

    <button class="btn btn-default"><i class="fa fa-edit"></i><span class="text"> Bearbeiten</span>

    </button>

  </div>

</div>

how to set the html bootstrap buttons responsive in mobile

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>

How to Make Bootstrap 3 Button Text Responsive

While you could use CSS @media queries to achieve the result, you could also use vw Viewport-percentage lengths in order to specify the font-size based on the width of the viewport:

EXAMPLE HERE

<button type="button" class="btn btn-default btn-lg btn-block responsive-width">
    Make Me Responsive!
</button>

.responsive-width {
    font-size: 3vw;
}

5.1.2 Viewport-percentage lengths: the vw, vh, vmin, vmax units

The viewport-percentage lengths are relative to the size of the
initial containing block. When the height or width of the initial
containing block is changed, they are scaled accordingly. However,
when the value of overflow on the root element is auto, any scroll
bars are assumed not to exist. Note that the initial containing
block’s size is affected by the presence of scrollbars on the
viewport.

vw unit
Equal to 1% of the width of the initial containing block.

It's worth noting that vw unit is supported in the modern web browsers (including IE9+).

---

Related Topics