Рубрики

Как выровнять кнопку с правой стороны текстового поля в Bootstrap?

Bootstrap позволяет нам выравнивать элементы с помощью служебного класса float . Поскольку мы хотим выровнять кнопку с правой стороны текстового поля, мы должны использовать класс float-right .

Синтаксис:

<button class="btn btn-success btn-lg float-right" type="submit">Submit</button>

Пример:

<!DOCTYPE html>

<html>

  

<head>

    <title>Bootstrap Button Alingment</title>

    <meta charset="utf-8">

    <meta name="viewport" 

          content="width=device-width, initial-scale=1">

    <link rel="stylesheet" 

          href=

"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

    <script src=

"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">

  </script>

    <script src=

"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">

    </script>

    <script src=

"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">

    </script>

</head>

  

<body>

    <div class="container">

        <h1 style="text-align:center;color:green;">

          GeeksforGeeks

      </h1>

        <form>

            <div class="form-group">

                <label for="">Enter Your Name:</label>

                <input class="form-control" 

                       type="text" 

                       placeholder="Input Your Name Here">

            </div>

            <div class="form-group">

                <button class="btn btn-success btn-lg float-right" 

                        type="submit">

                     Submit 

                </button>

            </div>

        </form>

    </div>

</body>

  

</html>

Выход:

Примечание. Хотя по умолчанию такие элементы, как кнопки, выровнены по левому краю, мы можем использовать класс float-left, чтобы упомянуть об этом конкретно. Мы также можем использовать класс float-none, чтобы удалить любое иерархическое плавание.
Важно отметить, что мы используем Bootstrap 4 здесь, в Bootstrap 3 или Bootstrap 2 мы можем использовать вспомогательные классы, такие как pull-left , pull-right, чтобы выровнять элементы влево или вправо соответственно.

Рекомендуемые посты:

Как выровнять кнопку с правой стороны текстового поля в Bootstrap?

0.00 (0%) 0 votes