Why is bootstrap button so wide? - css

Question

I've got a jumbotron class which has to contain a button, but it's strangely extended and that button looks ugly. Why is that so?
HTML
<div class="container">
<div class="jumbotron">
<div class="row">
<div class="col-md-8">
<button class="btn btn-primary btn-sm">
<span class="glyphicon glyphicon-ok">
Why is this button so wide?
</span>
</button>
</div>
</div>
</div>
</div>
CSS
.jumbotron {
margin: 10px;
}
.row {
margin: 8px 0;
}
If I try to reduce the size of the column, for example, col-md-4, nothing changes.

Answer 1

Your mistake is you wrote the text inside icon span. Here is the fixed code
.jumbotron {
margin: 10px;
}
.row {
margin: 8px 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="jumbotron">
<div class="row">
<div class="col-md-8">
<button class="btn btn-primary btn-sm">
<span class="glyphicon glyphicon-ok"></span>
Why is this button so wide?
</button>
</div>
</div>
</div>
</div>

Answer 2

in main page use this...
<header>
<div class="container">
<div class="intro-text">
<div class="intro-lead-in">Welcome!!!</div>
<div class="intro-heading">Let's Get Started</div>
Tell Me More
</div>
</div>
</header>
in css
use this
.btn-xl {
padding: 20px 40px;
border-color: #fed136;
border-radius: 3px;
text-transform: uppercase;
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 18px;
font-weight: 700;
color: #fff;
background-color: #fed136;
}
this will solve your problem