jqueryhtmlcsstwitter-bootstrap

Not able to change the button size

I am not able to change the button size even though I am using a CSS class to change the width. The form which has the button and the content are placed in a <div>row class. so that they appear side by side.

This is the part of my code:

.row.someDiv{
  margin-left: 0px;
  margin-right: 0px;
  max-width: initial;
}
input[type="text"]{
  border: none;
  border-bottom: 1px solid;
  width: 250px;
  margin-bottom: 10px;
  background: transparent;
}
.button-size{
  width: 100px;
  padding-bottom: 20px;
  
}
<div class="row someDiv">
  <div class="col-xs-8">
   <br/>  
   <label>
     <input type="text" class="text-line" placeholder="Name" required></label><br/>
   <label><input type="text" class="text-line"  placeholder="Email Address" required></label><br/>
   <label><input type="text" class="text-line"  placeholder="phone number"></label><br/>
     <label><input id="message-size"  type="text" placeholder="Message"></label><br/>
    <button type="submit" class="button-size space btn btn-block btn-primary"><i class="fa fa-paper-plane">Submit</i></button>
 </div>
 <div class="col-xs-4">
   <p class="content-style"> Want to get in touch? please fill up the form and I'll revert back soon.
  </div>
</div>

Button

Solution

  • It looks like you’re using bootstrap, in which case your btn-block class on the button makes the button a “block-level element” (equivalent to giving it the css {display: block;}) Block-level elements fill 100% of horizontal space and push any other elements down the page to make room.