¿Cómo colocar el botón en la esquina superior derecha usando bootstrap?

Para colocar un botón en la parte superior derecha, hay varias formas de hacerlo.

La forma más fácil de hacer esto, establezca «tirar hacia la derecha» en la clase de botón.
Ejemplo:

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>
      place button in top right corner
  </title>
  
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1">
    <link rel="stylesheet"
          href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
  </script>
    
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js">
  </script>
</head>
  
<body>
    <div class="container">
        <h1>
      <span style="color:green">GeeksforGeek</span>
      <button class='btn btn-success pull-right'>
        Button Text
          </button>
    </h1>
    </div>
</body>
  
</html>

Producción:

El grupo de botones se usa para más de un botón, como en este ejemplo.
El grupo de botones es opcional si solo usa un botón.
Ejemplo:

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>
        place button in top right corner
    </title>
  
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1">
    <link rel="stylesheet" 
          href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
    </script>
  
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js">
    </script>
</head>
  
<body>
  
    <div class="container">
        <section>
            <div class="page-header">
                <h3 style="color:green"
                    class="pull-left">
        GeeksforGeeks
      </h3>
                <div class="pull-right">
                    <div class="btn-group">
                        <button class="btn btn-success">
                            Languages
                        </button>
                        <button class="btn btn-success dropdown-toggle" 
                                data-toggle="dropdown">
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu pull-right">
                            <li>
                                <a href="#">DS</a>
                            </li>
                            <li>
                                <a href="#">Python</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="clearfix"></div>
            </div>
            Other Content
        </section>
    </div>
</body>
  
</html>

Publicación traducida automáticamente

Artículo escrito por rimshamaredia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta