asked on

Html5 with Bootstrap

I am designing a web page with HTML5 using bootstrap and have a checkbox and dropdown and these are aligned right (see attached screenshot) to the page layout.

I need sample working code to achieve this using html5 and bootstrap.

Thanks in Advance
Form.jpg

Scott Fell

This does the trick but I would guess you have other code as well. If this is not what you need, then please update the jsbin with the code you do have now.
http://jsbin.com/vusix/1/edit?html,output

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>

<div class="container">
  <div class="row">
 
      <div class="col-xs-2  pull-right">
     <select>
       <option>stuff</option>
       <option>stuff</option>
       <option>stuff</option>
     </select>
  </div>
    <div class="col-xs-4 col-sm-2 pull-right"><input type="checkbox"> Checkbox</div>
 
  
</div>
  </div>
</body>
</html>

Open in new window

ksd123

ASKER

Thank you.I have a minor change to the above form, just I need a lable (select country) for the dropdown after checkbox.

I have a question in the above code, in the form I have "checkbox" first and then "dropdown" but it seems we have first "div" for dropdown and then for "chekcbox" .
Is there any specific reason to do this way?

Scott Fell

> I need a lable (select country) for the dropdown after checkbox.
You would just add your <label> tag prior to the field

>in the form I have "checkbox" first and then "dropdown" but it seems we have first "div" for dropdown and then for "chekcbox"
I simply made the output look similar to your image. When you view the output, you can see that it matches. The reason why it is reversed in the code is because of the, "pull-right".

http://jsbin.com/vusix/2/

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  
<div class="container">
  <div class="row">
 
      <div class="col-xs-3  pull-right">
        <label>Select Stuff</label>
     <select>
       <option>stuff</option>
       <option>stuff</option>
       <option>stuff</option>
     </select>
  </div>
    <div class="col-xs-4 col-sm-2 pull-right"><input type="checkbox"> Checkbox</div>
 
  
</div>
  </div>
</body>
</html>

Open in new window

ksd123

ASKER

Actually there is lot of space between checkbox and dropdown and need space similar to screenshot and also label (Select Stuff) should not be in BOLD, I tried to resolve these issues but in vain . Please help.

ASKER CERTIFIED 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

ksd123

ASKER

Thank you