asked on

Form elements alignment

Not familiar with bootstrap.

See the attached image. How can I make such alignment accordingly?

1. Make the text field closer to point #1
2. Make the submit button closer to point #2

<div class="form-group">
                                    <label class="col-sm-4 control-label">Primary Contact Number:</label>

                                    <div class="col-sm-5">
                                        <label class="control-label"><input type="text" class="form-control" id="print_send_mobile" autocomplete="off"  name="print_send_mobile" required>
                                    </div>

                                    <div class="col-sm-3">
                                        <label class="control-label"><input type="submit" class="btn btn-default yellowBg" value="Send Me Passcode">
                                    </div>
                                </div>

Open in new window

Thank you.

SOLUTION

Scott Fell

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

trowa

ASKER

Sorry that due to that page's complexity, it takes me a lot of time to create a similar sample and upload to somewhere online.

Can we enhance based on your sample posted at http://jsbin.com/savuxipedu/edit?html,output ?

Thank you.

Scott Fell

> Can we enhance based on your sample

Yes, you can post your example code there. Just update to simulate what you have on your end.

If it is too much trouble, then just post a link to the page. If the page contains data you don't want others to see and is dynamically generated from a cms or database, then render the html (run the page) and view source. Then copy the rendered html and paste it to a static html page where you can easily obfuscate or delete elements. Just make sure the code snippet is valid.

Otherwise, your image does help illustrate your issue, but we need to see the html, css and possibly js running to identify the issue and fix.

SOLUTION

Chris Stanyon

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

lenamtl

Hi,

you are using Bootstrap so you can use the form-inline class which is for that case.

<form class="form-inline">

Open in new window

for more information https://getbootstrap.com/docs/3.3/css/#forms-inline

ASKER CERTIFIED SOLUTION

Myles Cardiff

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

trowa

ASKER

@lenamtl

I just found that I got form-horizontal class in my form tag. It seems that the layout is off after I applied the form-inline class.

<form class="form-horizontal" id="submit_doc_form" method="post" action="somepage..">

Open in new window

So, it seems that I got to find alternatives for the solution.

trowa

ASKER

@mylescardiff

It seems that below generated what I wanted. By adding a "row" class seems doesn't affect the layout. Why do we need a "row" class here?

<div class="form-group">
                                    <label class="col-sm-3 control-label">Primary Contact Number:</label>

                                    <div class="col-sm-3">
                                        <input type="text" class="form-control" id="print_send_mobile" autocomplete="off" name="print_send_mobile" required maxlength="8">
                                    </div>

                                    <div class="col-sm-6">
                                        <input type="button" class="btn btn-default yellowBg" id="print_send_btn" value="Send Me Passcode">
                                    </div>
                                </div>

Open in new window

SOLUTION

lenamtl

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

Myles Cardiff

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

trowa

ASKER

Thank you for your participation!