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

How do I overwrite this calculation using JQuery?

Establish the dimensions of the element to match the dimensions of a responsive image

What is the most reliable method for displaying an SVG shape in any color across various web browsers?

Tips for personalizing the FileField in wtforms to function as an image button

Enhancing NG Style in Angular 6 using a custom function

Developing an identical design and layout but utilizing a distinct domain name for the company

Troubleshooting SCSS Issues in NextJS

Conceal the scroll bar while still allowing for scrolling functionality

The navigation area is too small for the social media buttons to fit

UTF-8 encoding experiencing issues on select Android mobile devices

Align text vertically next to an image

Vue.js component still not transitioning out despite using mode="out-in"

Prevent users from inputting multiple minus signs by setting the input type to number and disabling the

Error: Unable to access the property 'fontSize' as it is undefined

I'm having trouble getting Firefox to recognize the percentage height set on table rows. Any suggestions for a workaround?

What is the best way to display images one by one from a map using a random fade effect?

Could you advise on the best placement for my upcoming JQuery animation?

smoothly hide the dropdown menu when a link is clicked with a transition effect

Python and website submission button without an action attribute

Transfer data from href link to specific detail page