Panel title with responsive pull-right button

Question

Friends, I need a panel whose title has a close button inside it, to the right and responsive. The code below was the closest I could reach using buttons. Thank you very much for your help.

<div class="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>

Answer 1

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

Now I don’t understand why you’re wearing 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>
<script src="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>