Open In App

How to place button in top Right corner using bootstrap?

Last Updated : 25 Jul, 2019
Improve
Improve
Like Article
Like
Save
Share
Report

To place a button in the top right, there are several ways to do this.

  1. 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=
        
        <script src=
      </script>
        
        <script src=
      </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:

  2. 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=
      
        <script src=
        </script>
      
        <script src=
        </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>

    
    



Similar Reads

How to load notification alert on top right corner without click of button in bootstrap ?
Bootstrap Toast component provides an easy way to mimic the functionality of push notifications. Bootstrap Toast is like an alert box that can be displayed to the user whenever an event occurs. This component has been built with CSS flexbox which makes it easy to position and align. It is not necessary to show the toast on a button click. It can be
2 min read
How to Position a Fixed Element in the Top Right Corner using CSS ?
In CSS, Positioning the fixed element in the top fight corner consists of maintaining the fixed position of the element by using Absolute Positioning or by using Flexbox Layout. These are the following methods: Table of Content Using Absolute PositioningUsing FlexboxUsing Absolute PositioningIn this approach, we are using absolute positioning to fi
2 min read
How to create a radio button similar to toggle button using Bootstrap ?
Toggle Buttons: The buttons that can change from one state to another, i.e. which can be toggled from on state to off state or vice-versa are called toggle buttons. For example: A particular switch in our house can either be on or off. This is a very good example of a real life toggle switch. The WiFi or Bluetooth option in our phone is another exa
3 min read
How to make rounded corner for navbar using react-bootstrap?
In single-page applications, Navigation Bars are the most important components of web applications to provide national access to different sections and features of the applications. We can customize the navigation bar by adjusting the colors, width, and we can also make the rounded corners for the navbar using react-bootstrap. So this article will
3 min read
How to align button to right side of text box in Bootstrap?
Aligning a button to the right of a text box in Bootstrap involves enclosing both within an "input-group" container. By adding the "input-group-append" class to the container, Bootstrap automatically positions the button to the right of the text box. There are some Common approaches : Table of Content Approach 1: Using float-rightApproach 2 : Using
2 min read
How to set the shape of top-left corner of div using CSS ?
In this article, we will learn How to set the shape of the top-left corner of a div using CSS. The border-top-left-radius property is used to form the shape of the top-left corner. We can use percentages to shape the top-left corner, for that, you can check this article How to set the shape of the top-left corner in percentage? Approach: The border
1 min read
How to place table text into center using Bootstrap?
Tables allow us to aggregate a huge amount of data and present it in a clear and orderly way. A basic Bootstrap table has a light padding and only horizontal dividers. The base class is .table to any table,and after adding it we can extend with custom styles or our various included modifier classes to our table for the design purpose. Placing the t
2 min read
How to force tab-navigation to stay in place using Bootstrap ?
Tab-navigation: Tabs are made with &lt;ul class="nav nav-tabs"&gt; and we use the &lt;li class="active"&gt; element to mark the current page. To fix the position of navigation tab style, position: fixed; property is used. Syntax: &lt;ul class="nav nav-tabs" id="myTab" role="tablist"&gt; &lt;li class="nav-item"&gt; &lt;a class="nav-link active" href
3 min read
How to place SVG icons on a round circle side by side to another div using Bootstrap?
Bootstrap Icons are SVGs, so they scale quickly and easily and can be styled with CSS. Approach: We can place the SVG icons and give them the shape of a circle. This will make the SVG icons appear to be in a circular shape. This can be achieved using a Bootstrap class called "rounded-circle" Syntax: &lt;img class = "rounded-circle" src = "..." alt
2 min read
How to place two input box next to each other using Bootstrap 4 ?
In this article, we will learn how to take two inputs in a single line in HTML. HTML supports various type of inputs like text, password, Date-Time, date, time, week, number, email, and a lot more. There are various conditions where we have to take multiple inputs in a single line or next to each other and this can be achieved by .input-group and i
2 min read