Panel Title with responsive pull-right button

Navigation
1

Friends, I need a panel whose title has a close button inside it, right and responsive. The code below was the closest I could get to using buttons. Very grateful for the help. 

<divclass="container">
    <div class="row-fluid">
        <div class="col-md-4 col-md-offset-4">
            <div class="panel panel-default">
              <div class="btn-group">
                 <label class="btn btn-lg btn-success">como deixar com o X a direita</label>
                 <label class="btn btn-lg btn-danger">
                    <span class="glyphicon glyphicon-remove"></span>                    
                 </label>              
              </div>
                  <div class="panel-body">
                    <form role="form">
                        <fieldset>
                            <div class="form-group">
                                <input class="form-control" placeholder="E-mail" name="email" type="email" autofocus>
                            </div>
                            <div class="form-group">
                                <input class="form-control" placeholder="Password" name="password" type="password" value="">
                            </div>
                            <div class="checkbox">
                                <label>
                                    <input name="remember" type="checkbox" value="Remember Me">Remember Me
                                </label>
                            </div>                              
                        </fieldset>
                   </form>
                </div>
              <a href="index.html" class="btn btn-lg btn-success btn-block">texto</a>
           </div>
        </div>
    </div>
</div>
    
asked by anonymous 26.04.2015 / 14:35

1 answer

1

You can use the pull-right class, or the close class. I made an example using each of these options.

Now I do not understand why you're using buttons in the title of panel . 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row-fluid">
    <div class="col-md-4 col-md-offset-4">
      <div class="panel panel-default">
        <div class="panel-heading">
          <b>Título</b>
          <button class="btn btn-sm btn-danger pull-right"><span class="glyphicon glyphicon-remove"></span>
          </button>
        </div>
        <div class="panel-body">
          <form role="form">
            <fieldset>
              <div class="form-group">
                <input class="form-control" placeholder="E-mail" name="email" type="email" autofocus>
              </div>
              <div class="form-group">
                <input class="form-control" placeholder="Password" name="password" type="password" value="">
              </div>
              <div class="checkbox">
                <label>
                  <input name="remember" type="checkbox" value="Remember Me">Remember Me
                </label>
              </div>
            </fieldset>
          </form>
          <a href="index.html" class="btn btn-lg btn-success btn-block">texto</a>
        </div>
      </div>
    </div>
    
    <div class="col-md-4 col-md-offset-4">
      <div class="panel panel-default">
        <div class="panel-heading">
          <b>Título</b>
          <a href="#" class="close"><span class="glyphicon glyphicon-remove"></a>
          </button>
        </div>
        <div class="panel-body">
          <form role="form">
            <fieldset>
              <div class="form-group">
                <input class="form-control" placeholder="E-mail" name="email" type="email" autofocus>
              </div>
              <div class="form-group">
                <input class="form-control" placeholder="Password" name="password" type="password" value="">
              </div>
              <div class="checkbox">
                <label>
                  <input name="remember" type="checkbox" value="Remember Me">Remember Me
                </label>
              </div>
            </fieldset>
          </form>
          <a href="index.html" class="btn btn-lg btn-success btn-block">texto</a>
        </div>
      </div>
    </div>
  </div>
</div>
    
26.04.2015 / 16:46
Delete item from a variable that contains a list Serialization Namespace with link