Je sais que cela doit être très simple, mais j'essaie de définir un bouton à droite de la fenêtre en utilisant uniquement des classes bootstrap 4. Il doit être dans la même ligne que le texte.

<html>
<head>
</head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
    <body>
        <div class="row">
            <h3 class="one">Text</h3>
            <button class="btn btn-secondary pull-right">Button</button>
        </div>
    </body>
</html>

Le code se trouve ici

47
jecabeda 27 janv. 2017 à 16:12

7 réponses

Meilleure réponse

Bootstrap 4 utilise .float-right par opposition à .pull-right dans Bootstrap 3. N'oubliez pas non plus d'imbriquer correctement vos lignes avec des colonnes.

<div class="row">
    <div class="col-lg-12">
        <h3 class="one">Text</h3>
        <button class="btn btn-secondary float-right">Button</button>
    </div>
</div>
89
Sebastian Brosch 14 nov. 2017 à 22:51

Essayez de mettre votre script et votre lien sur la tête comme ceci:

<html>
  <head>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"> 
     </script>
  </head>
  <body>
     <div class="row">
        <h3 class="one">Text</h3>
        <button class="btn btn-secondary pull-right">Button</button>
     </div>
  </body>
</html>
0
Tariq SADDEK 7 mai 2020 à 06:32
<div class="container-fluid">
  <div class="row">
    <h3 class="one">Text</h3>
    <button class="btn btn-secondary ml-auto">Button</button>
  </div>
</div>

.ml-auto est la manière non-flexbox de Bootstrap 4 d'aligner les choses.

12
Killerpixler 31 mars 2017 à 17:37

Vous pouvez peut-être utiliser float: right; :

.one {
  padding-left: 1em;
  text-color: white;
   display:inline; 
}
.two {
  background-color: #00ffff;
}
.pull-right{
  float:right;
}
<html>
<head>
 
  </head>
  <body>
      <div class="row">
       <h3 class="one">Text</h3>
       <button class="btn btn-secondary pull-right">Button</button>
    </div>
  </body>
</html>
-3
Alex 27 janv. 2017 à 13:18

Vous pouvez également utiliser le code ci-dessous.

<button style="position: absolute; right: 0;">Button</button>
4
Ankr 6 juin 2018 à 07:21

Le fichier bootstrap 4.0.0 que vous obtenez de cdn n'a pas de classe pull-right (ou pull-left). La v4 est en alpha, donc il y a beaucoup de problèmes comme ça.

Il y a 2 options:

1) Inverser le bootstrap 3.3.7

2) Écrivez votre propre CSS.

-4
Roylyan Nikita 27 janv. 2017 à 13:20

Si vous ne souhaitez pas utiliser float, le moyen le plus simple et le plus propre de le faire est d'utiliser une colonne à largeur automatique:

<div class="row">
  <div class="col">
    <h3 class="one">Text</h3>
  </div>
  <div class="col-auto">
    <button class="btn btn-secondary pull-right">Button</button>
  </div>
</div>
1
josemmo 31 oct. 2017 à 17:24