CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbuttonresponsive
user6473989
user6473989

Reputation:

How to make a responsive text inside a bootstrap button

I am adding the following link button using w3.css and bootstrap libraries. If you resize the screen you notice that the text inside the button is not responsive. How to make the text fit in the button according to the screen resolution?

 

     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/
bootstrap.min.css">
    <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">


<a class="w3-right btn btn-primary w3-animate-right w3-hover-shadow w3-teal 
w3-hover-indigo btn-block w3-text-white" style="font-weight: bold;width:40%;"
      href="#">Proceed to checkout page</a>

Upvotes: 2

Views: 2362

Answers (2)

kukkuz
kukkuz

Reputation: 42352

I would use whitespace: normal to solve your problem if its ok to have multi-line text in your button and you need a fixed width (you have set 40%).

  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">


<a class="w3-right btn btn-primary  w3-animate-right	 w3-hover-shadow w3-teal w3-hover-indigo btn-block w3-text-white" style=" font-weight: bold;width:40%;white-space:normal "
  href="#">Proceed to checkout page
</a>

If its okay that you can afford changing the width you can put display:table as pointed out by @csandreas1

  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">


<a class="w3-right btn btn-primary  w3-animate-right	 w3-hover-shadow w3-teal w3-hover-indigo btn-block w3-text-white" style=" font-weight: bold;width:40%;display:table"
  href="#">Proceed to checkout page
</a>

Upvotes: 3

Vcasso
Vcasso

Reputation: 1348

You can do it by setting the display to table. 

element.style {
    font-weight: bold;
    width: 43%;
    display: table;
}

Upvotes: 0

Related Questions