Positioning a button at the center-right

Question

Positioning a button at the center-right

I'm currently in the process of creating a coming soon website, which you can find hosted here. However, I am having some trouble aligning the button correctly. My goal is to have it positioned to the right of the text field. How can I achieve this?

Below is my current code:

<div class="row">
 <div class="col-md-4 col-md-offset-4 col-sm6-6 col-sm-offset-3 ">
   <form action="//joghr.us12.list-manage.com/subscribe/post?u=0afaeb9185d575ddab99c7992&amp;id=2e27b33636" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
        <div id="mc_embed_signup_scroll">
                      <div class="form-group">
                            <label class="sr-only" for="exampleInputEmail2">Email address</label>
                            <input type="email" name = "EMAIL" class="form-control transparent" placeholder="Your email here...">
                            <div style="position: absolute; left: -10000000px;top: -43px;float: top;overflow: auto;" aria-hidden="true"><input type="text" name="b_0afaeb9185d575ddab99c7992_2e27b33636" tabindex="-1" value=""></div>
                      </div>
                      <button type="submit" class="btn btn-danger btn-fill">Notify Me</button>
     </form
   </div>
 </div>
</div>

Please note that I am utilizing Bootstrap for this project.

html css

Answer 1

Answer №1

Here is a suggestion for your style:

#mc_embed_signup_scroll > .form-group {
    display: inline-block;
}
#mc_embed_signup_scroll > button {
    float: right;
}

Alternatively, you can also try this code snippet:

<div id="mc_embed_signup_scroll">
    <div class="col-md-8">
        <div class="form-group" style="width: auto;">
            <label class="sr-only" for="exampleInputEmail2">Email address</label>
            <input type="email" name="EMAIL" class="form-control transparent" placeholder="Your email here...">
            <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_0afaeb9185d575ddab99c7992_2e27b33636" tabindex="-1" value=""></div>
        </div>
    </div>
    <div class="col-md-4">
        <button type="submit" class="btn btn-danger btn-fill">Notify Me</button>
    </div>
</div>

Answer 2

Here is a suggestion for your style:

#mc_embed_signup_scroll > .form-group {
    display: inline-block;
}
#mc_embed_signup_scroll > button {
    float: right;
}

Alternatively, you can also try this code snippet:

<div id="mc_embed_signup_scroll">
    <div class="col-md-8">
        <div class="form-group" style="width: auto;">
            <label class="sr-only" for="exampleInputEmail2">Email address</label>
            <input type="email" name="EMAIL" class="form-control transparent" placeholder="Your email here...">
            <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_0afaeb9185d575ddab99c7992_2e27b33636" tabindex="-1" value=""></div>
        </div>
    </div>
    <div class="col-md-4">
        <button type="submit" class="btn btn-danger btn-fill">Notify Me</button>
    </div>
</div>

Answer 3

Answer №2

Place the button element within the form-group division.

<div class="row">
 <div class="col-md-4 col-md-offset-4 col-sm6-6 col-sm-offset-3 ">
   <form action="//joghr.us12.list-manage.com/subscribe/post?u=0afaeb9185d575ddab99c7992&amp;id=2e27b33636" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
        <div id="mc_embed_signup_scroll">
                      <div class="form-group">
                            <label class="sr-only" for="exampleInputEmail2">Email address</label>
                            <input type="email" name = "EMAIL" class="form-control transparent" placeholder="Your email here...">
                            <div style="position: absolute; left: -10000000px;top: -43px;float: top;overflow: auto;" aria-hidden="true"><input type="text" name="b_0afaeb9185d575ddab99c7992_2e27b33636" tabindex="-1" value=""></div>
                            <button type="submit" class="btn btn-danger btn-fill">Notify Me</button>
                      </div>

     </form
   </div>
 </div>
</div>

Answer 4

Place the button element within the form-group division.

<div class="row">
 <div class="col-md-4 col-md-offset-4 col-sm6-6 col-sm-offset-3 ">
   <form action="//joghr.us12.list-manage.com/subscribe/post?u=0afaeb9185d575ddab99c7992&amp;id=2e27b33636" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
        <div id="mc_embed_signup_scroll">
                      <div class="form-group">
                            <label class="sr-only" for="exampleInputEmail2">Email address</label>
                            <input type="email" name = "EMAIL" class="form-control transparent" placeholder="Your email here...">
                            <div style="position: absolute; left: -10000000px;top: -43px;float: top;overflow: auto;" aria-hidden="true"><input type="text" name="b_0afaeb9185d575ddab99c7992_2e27b33636" tabindex="-1" value=""></div>
                            <button type="submit" class="btn btn-danger btn-fill">Notify Me</button>
                      </div>

     </form
   </div>
 </div>
</div>

Answer 5

Answer №3

Here's a tip for enhancing your button:

position: absolute;
right: aaapx;

To make the button stay in place, customize the number in the 'right' property.

Answer 6

Here's a tip for enhancing your button:

position: absolute;
right: aaapx;

To make the button stay in place, customize the number in the 'right' property.

Answer 7

Answer №4

One possible solution is as follows:

<div class="row">
 <div class="col-md-4 col-md-offset-4 col-sm6-6 col-sm-offset-3 ">
   <form action="//joghr.us12.list-manage.com/subscribe/post?u=0afaeb9185d575ddab99c7992&amp;id=2e27b33636" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
        <div id="mc_embed_signup_scroll">
           <div class="form-group" style="width:auto; float:left;">
             <label class="sr-only" for="exampleInputEmail2">Email address</label>
               <input type="email" name = "EMAIL" class="form-control transparent" placeholder="Your email here...">
               <div style="position: absolute; left: -10000000px;top: -43px;float: top;overflow: auto;" aria-hidden="true"><input type="text" name="b_0afaeb9185d575ddab99c7992_2e27b33636" tabindex="-1" value=""></div>
           </div>
           <button type="submit" class="btn btn-danger btn-fill" style="float:left">Notify Me</button>
     </form
   </div>
 </div>
</div>

In order for this solution to work effectively, it may be beneficial to properly define the 'style' attributes in your css stylesheet.

Answer 8

One possible solution is as follows:

<div class="row">
 <div class="col-md-4 col-md-offset-4 col-sm6-6 col-sm-offset-3 ">
   <form action="//joghr.us12.list-manage.com/subscribe/post?u=0afaeb9185d575ddab99c7992&amp;id=2e27b33636" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
        <div id="mc_embed_signup_scroll">
           <div class="form-group" style="width:auto; float:left;">
             <label class="sr-only" for="exampleInputEmail2">Email address</label>
               <input type="email" name = "EMAIL" class="form-control transparent" placeholder="Your email here...">
               <div style="position: absolute; left: -10000000px;top: -43px;float: top;overflow: auto;" aria-hidden="true"><input type="text" name="b_0afaeb9185d575ddab99c7992_2e27b33636" tabindex="-1" value=""></div>
           </div>
           <button type="submit" class="btn btn-danger btn-fill" style="float:left">Notify Me</button>
     </form
   </div>
 </div>
</div>

In order for this solution to work effectively, it may be beneficial to properly define the 'style' attributes in your css stylesheet.

Answer 9

Answer №5

To center-align your button to the right, simply nest it inside another div with the form-group class and add an additional 'text-right' class to it. Check out the code snippet below for clarification:

        <div class="form-group  text-right">
                  <button type="submit"

class="btn btn-danger btn-fill">Notify Me

     </div>

Answer 10

To center-align your button to the right, simply nest it inside another div with the form-group class and add an additional 'text-right' class to it. Check out the code snippet below for clarification:

        <div class="form-group  text-right">
                  <button type="submit"

class="btn btn-danger btn-fill">Notify Me

     </div>

Positioning a button at the center-right

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Uploader and viewer tool for HTML5 documents

Discovering the specific element that was clicked from a collection of elements

Curvature Factor equals Overflow of Color

Height of the div dynamically increases upwards

Guide on showing the D3 Color legend in a horizontal orientation instead of a vertical one

Automatic button rotation

CSS causing navigation bar drop down content to be hidden when hovering

python Chromium process leak initiated by requests-html

Adjust padding of radio button labels in Qualtrics for a cleaner, more streamlined appearance

Steps for styling the header of an Antd Collapse Panel

Backgrounds filled by nested <li> elements inside another <li> element

Authenticating Users with HTML in Django

Unconventional border effect while hovering over image within navigation container of Bootstrap

Unable to add a border to the thumbnail containing text

Equal-height list items in a multi-column unordered list

Accessing pseudo elements when their sibling is hovered can be achieved by using CSS selectors and combinators

Position the final offspring adjacent to the one that came before it using Flexbox

Reposition HTML content using regular expressions

The CSS and JavaScript in pure form are not functioning properly upon deployment in Django

Should the event happen inside a div section