How to place button in top Right corner using bootstrap? - GeeksforGeeks

25 Jul, 2019
To place a button in the top right, there are several ways to do this.
The easiest way to do this, Set “pull-right” in button class.Example:<!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>Output:The button group is used for more than one button like in this example.The button group is optional if you’re only using a single button.Example:<!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>
The easiest way to do this, Set “pull-right” in button class.Example:<!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>Output:
<!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>
Output:
The button group is used for more than one button like in this example.The button group is optional if you’re only using a single button.Example:<!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>
<!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>
Bootstrap-Misc
Picked
Bootstrap
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Show Images on Click using HTML ?
How to set Bootstrap Timepicker using datetimepicker library ?
How to Use Bootstrap with React?
Difference between Bootstrap 4 and Bootstrap 5
How to change the background color of the active nav-item?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?