CODEWITHSUNDEEP
twitter-bootstrapcss
asdfasdfsdfga
asdfasdfsdfga

Reputation: 117

Bootstrap button sizing and alignment

This is what I have so far http://www.bootply.com/SDIQQr0dZJ or https://jsfiddle.net/sjgz57b8/

<div class="panel panel-default">
 <div class="panel-heading">
           <strong>myusername</strong>
    <div class="btn-group btn-group-sm pull-right">
       <button type="button" class="btn btn-danger">Dislike</button>
       <button type="button" class="btn btn-success">Like</button>
    </div>
 </div>
     <div class="panel-body">
              Panel content
     </div>
 </div>

I'm trying to make the buttons fit within that space and centered vertically, but I already added the btn-group-sm class so I'm not sure what else I can do. I'm also trying to make the dislike button the same width as the like button. Thanks for any help

Upvotes: 1

Views: 1231

Answers (3)

neophyte
neophyte

Reputation: 6626

Just add your custom css. By adding additional padding you can make the buttons of same width. if you add a negative margin-top the buttons will align vertically.

Working snippet

#like {
  padding-left:16px;
  padding-right:16px;
}
#btn-vc
{
  margin-top: -5px;
}
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="panel panel-default">
      <div class="panel-heading">
          <strong>myusername</strong>
        <div id="btn-vc" class="btn-group btn-group-sm pull-right">
                 <button type="button" class="btn btn-danger">Dislike</button>
                 <button id="like" type="button" class="btn btn-success">Like</button>
          </div>
      </div>
      <div class="panel-body">
         Panel content
      </div>
</div>

Hope this helps!

Upvotes: 0

repzero
repzero

Reputation: 8412

For proper alignment of button'

Add to .panel-heading 

 .panel-heading{
   display:table;
   width:100%;
 }

Making both buttons the same width

The buttons are styled to display inline-block which means the word "dislike" has greater length than the word "like". You can set both width of the button. I suggest adding a class named "button" to each button and set the width to avoid other elements being affected

 .button{
   width:50px;
 }


#logo .short {
  position: relative;
  margin-top: 0;
  padding: 0 10px;
  font-size: 36px;
  display: inline-block;
  text-transform: uppercase;
  transition: all .3s ease-out;
  border: solid black;
}

.short:after {
  position: relative;
  margin-left: -20px;
  content: "est1";
  opacity: 0;
  -webkit-transition: all .3s ease-out;
}

.short:hover:after {
  opacity: 1;
  display: inline-block;
  margin-left: -10px;
}

#logo span {
  position: relative;
  transition: margin .3s ease-out;
}

span:hover {
  margin-left: 20px;
}

span:after {
  position: relative;
  margin-left: -20px;
  content: "est2";
  opacity: 0;
  -webkit-transition: all .3s ease-out;
}

span:hover:after {
  opacity: 1;
  margin-left: 0px;
}

.panel-heading {
  display: table;
  width: 100%;
}

.button {
  width: 50px;
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="panel panel-default">
  <div class="panel-heading">
    <strong>myusername</strong>
    <div class="btn-group btn-group-sm pull-right">
      <button type="button" class="btn btn-danger button">Dislike</button>
      <button type="button" class="btn btn-success button">Like</button>
    </div>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

Upvotes: 1

ridoansaleh
ridoansaleh

Reputation: 624

You missed to include the <div class="row"> and <div class="col-lg-*">. Here you go. I have provided the demo.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="panel panel-default">
  <div class="panel-heading">
    <div class="row">
      <div class="col-lg-12">
        <strong>Myusername</strong>
        <div class="btn-group btn-group-sm pull-right">
          <button type="button" class="btn btn-danger">Dislike</button>
          <button type="button" class="btn btn-success">Like</button>
        </div>
      </div>
    </div>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Upvotes: 1

Related Questions