Incorporate a button into an input element

I have a created a custom login form and I'm trying to add a "FORGOT?" text/button next to the password field.

If you want to see an example, visit this website and click on the login button: 

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<form>
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<button class="form-control btn btn-info " style="background:#4568B2;height:40px">
<i class="fa fa-facebook"></i>&nbsp;Continue with Facebook
</button>
</div>
<br><br><br>
<div class="col-md-12 col-sm-12 col-xs-12">
<button class="form-control btn btn-default" style="height:40px;border:2px solid black">
<i class="fa fa-google"></i>&nbsp;Continue with Google
</button>
</div>
<br><br><br>
<div class="col-md-5 col-sm-5 col-xs-5" ></div>
<div class="col-md-2 col-sm-2 col-xs-2" align="center"><b>OR</b></div>
<div class="col-md-5 col-sm-5 col-xs-5"></div><br><br><br>

<div class="col-md-12 col-sm-12 col-xs-12">
<input type="text" name="name" class="form-control" style="height:40px;" placeholder="Email">
</div>
<br><br><br>
<div class="col-md-12 col-sm-12 col-xs-12 form-group has-feedback">
<input type="text" name="pass" class="form-control" style="height:40px;" placeholder="Password">
<p class="form-control-feedback">Forgot?</p>
</div>

<br><br><br>
<div class="col-md-12 col-sm-12 col-xs-12">
<button name="login" class="btn btn-warning form-control" style="height:40px;font-size:20px">Login</button>
</div>
<br><br><br>
<div class="col-md-12 col-sm-12 col-xs-12">
<p align="center" style="font-size:16px">Don't Have an Account?
<span ><a href="#" style="color: orange">SIgn Up</a></span>
</p>
</div>
</div>
</form>

Any suggestions or help would be greatly appreciated!

cssbootstrap-4

Answer №1

If I have grasped the question correctly, could this be the solution? Simply adjust the display properties in your CSS.

           <div class="container">
           <div class="col-md-12 col-sm-12 col-xs-12">
                <button class="form-control btn btn-default" style="height:40px;border:2px solid black">
                <i class="fa fa-google"></i>&nbsp;Continue with Google
                </button>
            </div>
            <br><br><br>
            <div class="col-md-5 col-sm-5 col-xs-5" ></div>
            <div class="col-md-2 col-sm-2 col-xs-2"><b>OR</b></div>
            <div class="col-md-5 col-sm-5 col-xs-5"></div><br><br><br>

            <div class="col-md-12 col-sm-12 col-xs-12">
                <input type="text" name="name" class="form-control" style="height:40px;" placeholder="Email">                   
            </div>
            <br><br><br>
            <div class="col-md-12 col-sm-12 col-xs-12 form-group has-feedback">
                <input type="text" name="pass" class="form-control" style="height:40px; width: 90%; display: inline-block" placeholder="Password">
                <a class="form-control-feedback" style="display:inline-block; width:5%" href="#">Forgot?</a>                    
            </div>

            <br><br><br>
            <div class="col-md-12 col-sm-12 col-xs-12">
                <button name="login" class="btn btn-warning form-control" style="height:40px;font-size:20px">Login</button>
            </div>

            <br><br><br>
            <div class="col-md-12 col-sm-12 col-xs-12">
                <p style="font-size:16px">Don't Have an Account?
                    <span ><a href="#" style="color: orange">Sign Up</a></span>
                </p>
            </div>
        </div>

Answer №2

To enhance the password field, apply padding with a right value of 80px: padding-right: 80px

Answer №3

Adjust the password field container by setting it to position: relative. Then, position the "FORGOT?" hint using position: absolute and right: 1em, ensuring it stays fixed to the right side. Customize its design using CSS or Bootstrap classes, remembering to include some pure CSS for elements like padding and height similar to the input in the example.

To prevent any overlapping text, apply a white background to the "FORGOT?" hint. This can be achieved by adding the bg-white class. Additionally, consider setting a padding-right on your input element that matches the width of the "FORGOT?" hint.

.form-group.has-feedback {
  position: relative;
}

.form-control-feedback {
    position: absolute;
    display: inline-block;
    top: 1px;
    right: 1em;
    background: #fff;
    bottom: 0;
    margin: 0;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    border-radius: 3px;
}
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<form>
<div class="row">

<div class="col-md-12 col-sm-12 col-xs-12 mb-4">
<button class="form-control btn btn-info " style="background:#4568B2;height:40px">
<i class="fa fa-facebook"></i>&nbsp;Continue with Facebook
</button>
</div>

<div class="col-md-12 col-sm-12 col-xs-12 mb-4">
<button class="form-control btn btn-default" style="height:40px;border:2px solid black">
<i class="fa fa-google"></i>&nbsp;Continue with Google
</button>
</div>

<div class="col-md-5 col-sm-5 col-xs-5 mb-4" ></div>
<div class="col-md-2 col-sm-2 col-xs-2 mb-4" align="center"><b>OR</b></div>
<div class="col-md-5 col-sm-5 col-xs-5 mb-4"></div>

<div class="col-md-12 col-sm-12 col-xs-12 mb-4">
<input type="text" name="name" class="form-control" style="height:40px;" placeholder="Email">
</div>

<div class="col-md-12 col-sm-12 col-xs-12 form-group has-feedback mb-4">
<input type="text" name="pass" class="form-control" style="height:40px;" placeholder="Password">
<p class="form-control-feedback">FORGOT?</p>
</div>

<div class="col-md-12 col-sm-12 col-xs-12 mb-4">
<button name="login" class="btn btn-warning form-control" style="height:40px;font-size:20px">Login</button>
</div>

<div class="col-md-12 col-sm-12 col-xs-12 mb-4">
<p align="center" style="font-size:16px">Don't Have an Account?
<span ><a href="#" style="color: orange">SIgn Up</a></span>
</p>
</div>
</div>
</form>

I recommend avoiding the use of <br> elements for spacing between items. Instead, utilize Bootstrap classes like .mb-4 for cleaner layout formatting.

Answer №4

I successfully implemented the relative and absolute positioning method to relocate the button within the input box.

To create spacing in Bootstrap 4, I removed `br` tags and utilized the `mt-` and `mb-` values.

.form-group.has-feedback {
    position: relative;
}
.form-control-feedback {
    position: absolute;
    top: 0;
    right: 15px;
    padding: 6px 8px 9px 8px;
    display: inline-block;
}
.form-group.has-feedback .form-control {
    padding: 0 70px 0 0;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


<form>
    <div class="row">
        <div class="col-md-12 col-sm-12 col-xs-12 mb-3">
            <button class="form-control btn btn-info " style="background:#4568B2;height:40px">
                <i class="fa fa-facebook"></i>&nbsp;Continue with Facebook
            </button>
        </div>

        <div class="col-md-12 col-sm-12 col-xs-12 mb-3">
            <button class="form-control btn btn-default" style="height:40px;border:2px solid black">
                <i class="fa fa-google"></i>&nbsp;Continue with Google
            </button>
        </div>

        <div class="col-md-5 col-sm-5 col-xs-5"></div>
        <div class="col-md-2 col-sm-2 col-xs-2" align="center"><b>OR</b></div>
        <div class="col-md-5 col-sm-5 col-xs-5"></div>

        <div class="col-md-12 col-sm-12 col-xs-12 my-3">
            <input type="text" name="name" class="form-control" style="height:40px;" placeholder="Email">
        </div>

        <div class="col-md-12 col-sm-12 col-xs-12 form-group has-feedback">
            <input type="text" name="pass" class="form-control" style="height:40px;" placeholder="Password">
            <p class="form-control-feedback">Forgot?</p>
        </div>

        <div class="col-md-12 col-sm-12 col-xs-12  mb-3">
            <button name="login" class="btn btn-warning form-control" style="height:40px;font-size:20px">Login</button>
        </div>

        <div class="col-md-12 col-sm-12 col-xs-12">
            <p align="center" style="font-size:16px">Don't Have an Account?
                <span><a href="#" style="color: orange">SIgn Up</a></span>
            </p>
        </div>
    </div>
</form>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

NodeJS for CSS Parsing and Selecting

Can anyone recommend a NodeJS library similar to https://github.com/alexdunae/css_parser? I have tried using https://github.com/visionmedia/css, but it doesn't fulfill all my requirements. For example, when I parse the following CSS: .behavior1 {co ...

cssnode.js

Conceal the overflow from absolutely positioned elements

I've gone through all the similar examples but still struggling to find the correct solution. My issue involves a basic Side Menu that toggles upon button click. Within the menu, there is a list of checkboxes positioned absolutely with the parent con ...

javascripthtmlcssreactjs

JavaScript and jQuery experiencing difficulty rendering proper style and image in output display

I am currently working on code that extracts information from a JSON variable and displays it on a map. The code looks like this: marker.info_window_content = place.image + '<br/>' +"<h4>" + place.name + "</h4> ...

javascriptjquerycss

Is there a way to create a text section, or a similar feature, that comprises multiple lines of text as separate elements?

It's similar to what you see in the image - where each line represents an item. ...

htmlbootstrap-4frontend

Is there a way to alter multiple classes using hover effect on a single class without the use of JavaScript, only employing

Hello there! I have a question about applying styles to specific classes when hovering over certain elements. Unfortunately, I am unable to make changes to the HTML files and can only work with the CSS file. Take a look at the image below for reference: ht ...

htmlcsshover

Ways to Ensure the Footer Stays Beneath Your Image Gallery

After successfully keeping the footer at the bottom of other pages on my website, I'm facing a challenge with my photo gallery page. The footer stubbornly sits in the middle of the page. :( This is the HTML code for that particular page: html { ...

htmlcsssticky-footer

Is there a way for me to display a gif similar to 9GAG on my

I'm looking to implement a feature on my website that allows me to pause and play a gif, similar to the functionality on 9gag. Can anyone provide guidance on how I can achieve this? I understand that I need to use both .jpg and .gif files, but my at ...

javascriptjqueryhtmlcss

Having trouble resizing divisions using three.js?

Three.js is an incredible library that offers thorough documentation and functions perfectly. I am currently attempting to display a plane with trackball control inside a div that resizes according to the window or browser size. However, I am encountering ...

cssthree.js

Perform a function in jQuery only after the previous one has finished running in a cascading manner

Looking for guidance from an expert on how to accomplish this task. I have HTML code for a multiple choice question with options A to E: <div id="correct-answer-XXXXX" style="display:none;"></div> <div id="wrong-answer-XXXXX" style="display ...

javascriptjqueryhtmlcssajax

An issue has been identified where a single image is not displaying properly on Android devices, as well as IE7 and

Hey there! I recently created a Wordpress site and it seems that the Art Below logo isn't appearing in IE7, IE8, and Android for some reason. Would anyone be willing to help troubleshoot this issue? If you have fresh eyes, please take a look at the f ...

htmlcsswordpress

Tips for adjusting the div style when resizing the browser

As I work on a script, I encounter an issue where the style of a div should change when it becomes larger due to resizing. Even though I have come up with a solution for this problem, there are still some inconsistencies. Sometimes the width is reported a ...

javascripthtmlcss

Table cell smaller than div

I want to maintain the size of a table cell while having a larger div float over it. Is there a way to manipulate CSS and elements to achieve this without resizing the table cell? ...

javascriptcsshtml-tablecss-tables

Exploring the functionality of CodePen's code editor in relation to developing a 2D shooting game

Recently, I created a straightforward 2D shooter game with all the code neatly organized in a single HTML file: (file_gist). When I tested the game in my chrome browser, everything worked flawlessly according to my intentions. However, upon transferring th ...

javascripthtmlcsscodepen

Disconnect the parent when the child is clicked in CSS

I am struggling to find a solution for this issue. Currently, I have a hover effect where when I click on a submenu li item, the parent li also gets highlighted. You can see the behavior in the image below: https://i.sstatic.net/Ie6Lb.png Is there any w ...

jquerycss

What are some effective strategies for arranging multiple collapsible Bootstrap panels in an organized and visually appealing

I'm looking to use "collapsible bootstrap panels" to display a list, but I've run into an issue where certain panels don't align correctly when opened. For example, when I open the first panel in my code, all other panels shift down and sta ...

csstwitter-bootstrapgrid

Personalize the appearance of dynamically generated DIV elements

This script generates a random number of squares (ranging from 20 to 40) and adds text to each square. The script then calculates the width of each square so that they all fit in a single row. Here is the code snippet: var quantity = Math.floor(Math.ran ...

javascriptcss

Toggle the visibility of multiple divs depending on a specific attribute value

I previously inquired about this issue, but I believe my wording was unclear and the responses focused on how to display or hide a group of divs when clicking a button. While I understand that concept, my specific challenge is slightly different. Let me pr ...

javascriptjqueryhtmlcssangularjs

Issues with the alignment of ion-grid in Ionic/Angular application

I am facing an issue in my ionic/angular project where I am attempting to create two columns within a row using ion-grid, ion-row, and ion-col. However, the content of the second column is unexpectedly appearing below the first column instead of beside it. ...

cssangularionic-framework

Creating a CSS circle spinner with a half moon shape is an innovative way to add a unique touch

Image: Circular spinner rotating along the border rim of other solid circle For more details, please visit: https://codepen.io/sadashivjp/pen/oqqzwg I have created a UI codepen here and welcome any modifications or solutions. The code snippet is provided ...

javascriptjquerycsshtml

Provide spacing on the sides for a background position

Is there a way to evenly space my background image with 10px margins on all sides instead of just the left side? Currently, it's only working on the left side. .login-page { display: flex; flex-direction: column; background: url("../src/As ...

htmlcss