We Keep Coding

Increasing the size of a bootstrap checkbox

I am creating a simple check box with the code from the official bootstrap documentation:
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck" name="example1">
<label class="custom-control-label" for="customCheck">Check this custom checkbox</label>
</div>
I am wondering how to make the checkbox larger than it currently is? I have tried editing the css of customCheck and changing the height and width properties, but that does not increase the size of the box.

I added classes like *-sm, *-md, *-lg, *-xl for the bootstrap switch.
Here I made all resolutions switch with one #mixin ( #mixin is very similar to JS functions but it does not return anything ).
For Bootstrap 4
custom-switch-sm, custom-switch-md, custom-switch-lg, custom-switch-xl
SCSS: https://codepen.io/nisharg/pen/VwLbYvv
CSS: https://codepen.io/nisharg/pen/mdJmywW
LIVE SNIPPET (CSS)
/* for sm */
.custom-switch.custom-switch-sm .custom-control-label {
padding-left: 1rem;
padding-bottom: 1rem;
}
.custom-switch.custom-switch-sm .custom-control-label::before {
height: 1rem;
width: calc(1rem + 0.75rem);
border-radius: 2rem;
}
.custom-switch.custom-switch-sm .custom-control-label::after {
width: calc(1rem - 4px);
height: calc(1rem - 4px);
border-radius: calc(1rem - (1rem / 2));
}
.custom-switch.custom-switch-sm .custom-control-input:checked ~ .custom-control-label::after {
transform: translateX(calc(1rem - 0.25rem));
}
/* for md */
.custom-switch.custom-switch-md .custom-control-label {
padding-left: 2rem;
padding-bottom: 1.5rem;
}
.custom-switch.custom-switch-md .custom-control-label::before {
height: 1.5rem;
width: calc(2rem + 0.75rem);
border-radius: 3rem;
}
.custom-switch.custom-switch-md .custom-control-label::after {
width: calc(1.5rem - 4px);
height: calc(1.5rem - 4px);
border-radius: calc(2rem - (1.5rem / 2));
}
.custom-switch.custom-switch-md .custom-control-input:checked ~ .custom-control-label::after {
transform: translateX(calc(1.5rem - 0.25rem));
}
/* for lg */
.custom-switch.custom-switch-lg .custom-control-label {
padding-left: 3rem;
padding-bottom: 2rem;
}
.custom-switch.custom-switch-lg .custom-control-label::before {
height: 2rem;
width: calc(3rem + 0.75rem);
border-radius: 4rem;
}
.custom-switch.custom-switch-lg .custom-control-label::after {
width: calc(2rem - 4px);
height: calc(2rem - 4px);
border-radius: calc(3rem - (2rem / 2));
}
.custom-switch.custom-switch-lg .custom-control-input:checked ~ .custom-control-label::after {
transform: translateX(calc(2rem - 0.25rem));
}
/* for xl */
.custom-switch.custom-switch-xl .custom-control-label {
padding-left: 4rem;
padding-bottom: 2.5rem;
}
.custom-switch.custom-switch-xl .custom-control-label::before {
height: 2.5rem;
width: calc(4rem + 0.75rem);
border-radius: 5rem;
}
.custom-switch.custom-switch-xl .custom-control-label::after {
width: calc(2.5rem - 4px);
height: calc(2.5rem - 4px);
border-radius: calc(4rem - (2.5rem / 2));
}
.custom-switch.custom-switch-xl .custom-control-input:checked ~ .custom-control-label::after {
transform: translateX(calc(2.5rem - 0.25rem));
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="custom-control custom-switch custom-switch-sm">
<input type="checkbox" class="custom-control-input" id="customSwitch1">
<label class="custom-control-label" for="customSwitch1">Default Unchcked Switch</label>
</div>
<div class="custom-control custom-switch custom-switch-sm">
<input type="checkbox" class="custom-control-input" id="customSwitch2" checked>
<label class="custom-control-label" for="customSwitch2">Default Checked Switch</label>
</div>
<div class="custom-control custom-switch custom-switch-md">
<input type="checkbox" class="custom-control-input" id="customSwitch3">
<label class="custom-control-label" for="customSwitch3">Default Unchcked Switch</label>
</div>
<div class="custom-control custom-switch custom-switch-md">
<input type="checkbox" class="custom-control-input" id="customSwitch4" checked>
<label class="custom-control-label" for="customSwitch4">Default Checked Switch</label>
</div>
<div class="custom-control custom-switch custom-switch-lg">
<input type="checkbox" class="custom-control-input" id="customSwitch5">
<label class="custom-control-label" for="customSwitch5">Default Unchcked Switch</label>
</div>
<div class="custom-control custom-switch custom-switch-lg">
<input type="checkbox" class="custom-control-input" id="customSwitch6" checked>
<label class="custom-control-label" for="customSwitch6">Default Checked Switch</label>
</div>
<div class="custom-control custom-switch custom-switch-xl">
<input type="checkbox" class="custom-control-input" id="customSwitch7">
<label class="custom-control-label" for="customSwitch7">Default Unchcked Switch</label>
</div>
<div class="custom-control custom-switch custom-switch-xl">
<input type="checkbox" class="custom-control-input" id="customSwitch8" checked>
<label class="custom-control-label" for="customSwitch8">Default Checked Switch</label>
</div>
For Bootstrap 5
form-switch-sm, form-switch-md, form-switch-lg, form-switch-xl
SCSS: https://codepen.io/nisharg/pen/gOPLOYY
CSS: https://codepen.io/nisharg/pen/ExPNxYE
LIVE SNIPPET (CSS)
.form-check-input {
clear: left;
}
.form-switch.form-switch-sm {
margin-bottom: 0.5rem; /* JUST FOR STYLING PURPOSE */
}
.form-switch.form-switch-sm .form-check-input {
height: 1rem;
width: calc(1rem + 0.75rem);
border-radius: 2rem;
}
.form-switch.form-switch-md {
margin-bottom: 1rem; /* JUST FOR STYLING PURPOSE */
}
.form-switch.form-switch-md .form-check-input {
height: 1.5rem;
width: calc(2rem + 0.75rem);
border-radius: 3rem;
}
.form-switch.form-switch-lg {
margin-bottom: 1.5rem; /* JUST FOR STYLING PURPOSE */
}
.form-switch.form-switch-lg .form-check-input {
height: 2rem;
width: calc(3rem + 0.75rem);
border-radius: 4rem;
}
.form-switch.form-switch-xl {
margin-bottom: 2rem; /* JUST FOR STYLING PURPOSE */
}
.form-switch.form-switch-xl .form-check-input {
height: 2.5rem;
width: calc(4rem + 0.75rem);
border-radius: 5rem;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-alpha1/css/bootstrap.min.css">
<div class="form-check form-switch form-switch-sm">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>
<div class="form-check form-switch form-switch-sm">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked>
<label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
</div>
<div class="form-check form-switch form-switch-md">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>
<div class="form-check form-switch form-switch-md">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked>
<label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
</div>
<div class="form-check form-switch form-switch-lg">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>
<div class="form-check form-switch form-switch-lg">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked>
<label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
</div>
<div class="form-check form-switch form-switch-xl">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>
<div class="form-check form-switch form-switch-xl">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked>
<label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
</div>

FOR ALL BOOTSTRAP VERSIONS
No extra CSS/SCSS
Actually, the solution is quite simple, either you apply custom css/scss whatever to make the button bigger OR
You can use the transform: scale(); property of css on the switch to increase the size of the button, and trust me this is the easiest way to solve the problem and it works.
<div class="form-check form-switch py-5">
<!-- Size of the default switch will increase 1.8 times -->
<input class="form-check-input mx-2"
type="checkbox"
role="switch"
id="flexSwitchCheckDefault"
style="transform: scale(1.8);">
<label class="form-check-label"
for="flexSwitchCheckDefault"
id="AucTu">Autocomplete Turned Off</label>
</div>
PS. You dont need to add custom css/scss just dont forget to add some margin from the switch, or padding from the div (or somepart of it will get hidden) :)

In bootstrap 4, if you want to change or increase custom switch (a beautiful switch from iOS), you should dive into bootstrap's css file and change its dimensions of a class of custom-switch.
html code as following:
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="switchA" name="switch">
<label class="custom-control-label" for="switchA">Custom checkbox</label>
</div>
In boostrap.css (version 4.3.1 and not minified) file, you should find
the custom-switch class and change the following parameters in
the below. You must delete all the comments I added on.
.custom-switch {
padding-left: 2.25rem;
padding-bottom: 1rem; // added for positioning
}
.custom-control-label { // added for alignment with the switch
padding-top: 0.5rem;
padding-left: 2rem;
padding-bottom: 0.1rem;
}
.custom-switch .custom-control-label::before {
left: -2.25rem;
height: 2rem;
width: 3.5rem; // it was 1.75rem before. Sliding way is longer than before.
pointer-events: all;
border-radius: 1rem;
}
.custom-switch .custom-control-label::after {
top: calc(0.25rem + 2px);
left: calc(-2.25rem + 2px);
width: calc(2rem - 4px); // it was calc(1rem - 4px) before. Oval is bigger than before.
height: calc(2rem - 4px); // it was calc(1rem - 4px) before. Oval is bigger than before.
background-color: #adb5bd;
border-radius: 2rem; // it was 0.5rem before. Oval is bigger than before.
transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out;
transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out;
}
#media (prefers-reduced-motion: reduce) {
.custom-switch .custom-control-label::after {
transition: none;
}
}
.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
background-color: #fff;
-webkit-transform: translateX(1.5rem); //translateX(0.75rem);
transform: translateX(1.5rem); //translateX(0.75rem);
}
After copied these code to Bootstrap file, you must delete all
comments I put in. Otherwise, It won't increase the size. I hope you enjoy
your a bigger pretty switch now.

It's probably best to have your own file and change the css variables for the dimensions of the switch:
#import "bootstrap/scss/_functions.scss";
#import "bootstrap/scss/_variables.scss";
$custom-control-indicator-size: 1.5rem;
$custom-switch-width: $custom-control-indicator-size * 1.75;
$custom-switch-indicator-border-radius: $custom-control-indicator-size / 2;
$custom-switch-indicator-size: subtract(
$custom-control-indicator-size,
$custom-control-indicator-border-width * 4
);
#import "bootstrap/scss/bootstrap";

It is not a good idea to change bootstrap components dimensions, you should change variables in bootstrap but it means to recompile library.
Anyway what you want can be done i this way:
.custom-control-label::before ,.custom-control-label::after{width:20px; height:20px}

This class .custom-switch-adaptive will make the switch adapt to text size and include the label text inside.
Demo
P.S. A similar feature will be added in Bootstrap v5
SCSS
.custom-switch.custom-switch-adaptive {
padding-left: 0;
.custom-control-label {
padding: 0 1.5em;
position: relative;
border-radius: 1em;
line-height: 1.4em;
color: $text-muted;
border: 1px solid $text-muted;
background-color: $light;
transition: background-color 200ms;
&::before {
content: none;
}
&::after {
position: absolute;
height: 1em;
top: 0.2em;
left: 0.2em;
width: 1em;
border-radius: 1em;
transition: left 200ms;
}
}
.custom-control-input:checked ~ .custom-control-label {
color: $white;
background-color: $success;
border-color: $success;
&::after {
background-color: $white;
left: calc(100% - 1.2em);
transform: none;
-webkit-transform: none;
}
}
}
HTML
<div class="form-group h1">
<div class="custom-control custom-switch custom-switch-adaptive">
<input id="test4" type="checkbox" class="custom-control-input">
<label for="test4" class="custom-control-label">h1 text size</label>
</div>
</div>

Bootstrap 5
I reworked the css from Nisharg Shah such that the Text is now nicely aligned with the switch for the Bootstrap V5 example.
Therefore, I took a look into the Bootstrap 5 css sources and increased all attributes that seem involved into sizing: padding-left, hight, margin-left, width and padding-top.
I think the result looks better and aligned with the default switch appearance style.
CSS and HTML:
.form-switch.form-switch-md {
padding-left: 4.5em;
height: 2.5em;
}
.form-switch.form-switch-md .form-check-input {
margin-left: -4.5em;
height: 2em;
width: 4em;
}
.form-switch.form-switch-md .form-check-label {
padding-top: 0.5em;
}
.form-switch.form-switch-lg {
padding-left: 8.5em;
height: 4.5em;
}
.form-switch.form-switch-lg .form-check-input {
margin-left: -8.5em;
height: 4em;
width: 8em;
}
.form-switch.form-switch-lg .form-check-label {
padding-top: 1.5em;
}
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault">Original switch unchecked</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked>
<label class="form-check-label" for="flexSwitchCheckChecked">Original switch checked</label>
</div>
<div class="form-check form-switch form-switch-md">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault">Medium switch unchecked</label>
</div>
<div class="form-check form-switch form-switch-md">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked>
<label class="form-check-label" for="flexSwitchCheckChecked">Medium switch checked</label>
</div>
<div class="form-check form-switch form-switch-lg">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault">Large switch unchecked</label>
</div>
<div class="form-check form-switch form-switch-lg">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked>
<label class="form-check-label" for="flexSwitchCheckChecked">Large switch checked</label>
</div>

Since you are trying to get it done in bootstrap, its easy.
Add a div container first with btn-group-toggle to use buttons in group (that is if you want.).
Add p-3 or p-5 class in label to expand it to your liking
<div class="btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary p-3">
<input type="checkbox" id="customCheck" name="example1"> Check this custom checkbox
</label>
</div>

You can try the following way:
.custom-control-label::before,
.custom-control-label::after {
width: 2.25rem !important;
height: 2.25rem !important;
margin: 1rem;
}
.custom-control-label{
margin: 1.5rem 2rem;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck" name="example1">
<label class="custom-control-label" for="customCheck">Check this custom checkbox</label>
</div>

Here is a working example using custom css
.custom-checkbox-lg .custom-control-label::before,
.custom-checkbox-lg .custom-control-label::after {
width: 2rem;
height: 2rem;
}
.custom-checkbox-lg .custom-control-label {
margin: .5rem 1rem;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck1" name="example1">
<label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>
<div class="custom-control custom-checkbox custom-checkbox-lg">
<input type="checkbox" class="custom-control-input" id="customCheck2" name="example1">
<label class="custom-control-label" for="customCheck2">Check this custom checkbox</label>
</div>

Found this while looking for a solution to the same issue but none of the previous answers worked well for me, especially when there was a label with the checkbox/switch.
Started playing around with margins and line heights but it seems that the solution might be much simpler than that - At least with Bootstrap V5, all sizes and margins are set relatively with "em", so changing the font size on the base form-check element resizes and aligns everything nicely, with or without the label.
EDIT: Just noticed the bottom margin is a bit off when there is no label, but it's easily fixable by adding an empty label or adjusting the margins/padding manually as needed.
.form-check-lg {
font-size: 150%;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<h3>default font size:</h3>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="checkbox_1">
<label class="form-check-label" for="checkbox_1">default</label>
</div>
<div class="form-check"><input class="form-check-input" type="checkbox" id="checkbox_2">
<label class="form-check-label" for="checkbox_2">default</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox">
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox">
</div>
<h3>larger font size:</h3>
<div class="form-check form-switch form-check-lg">
<input class="form-check-input" type="checkbox" id="checkbox_3">
<label class="form-check-label" for="checkbox_3">large</label>
</div>
<div class="form-check form-check-lg">
<input class="form-check-input" type="checkbox" id="checkbox_4">
<label class="form-check-label" for="checkbox_4">large</label>
</div>
<div class="form-check form-switch form-check-lg">
<input class="form-check-input" type="checkbox">
</div>
<div class="form-check form-check-lg">
<input class="form-check-input" type="checkbox">
</div>

This is my solution... Just used Bootstrap & FontAvesome....
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/js/all.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ps-3">
<div class="h3">bootstrap#5.1.3 & font-awesome/6.2.0</div>
<div class="col-12">
<label>Label Top</label>
<span class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch">
<label class="form-check-label">Label Side</label>
</span>
</div>
<div class="col-12">
<label>Label Top</label>
<span class="form-check form-switch fa-2x">
<input class="form-check-input" type="checkbox" role="switch">
<label class="form-check-label">Label Side</label>
</span>
</div>
<div class="col-12">
<label>Label Top</label>
<span class="form-check form-switch fa-2x">
<input class="form-check-input" type="checkbox" role="switch">
<label class="form-check-label">Label Side</label>
</span>
</div>
<div class="col-12">
<label>Label Top</label>
<span class="form-check form-switch fa-3x">
<input class="form-check-input" type="checkbox" role="switch">
<label class="form-check-label">Label Side</label>
</span>
</div>
<div class="col-12">
<label>Label Top</label>
<span class="form-check form-switch fa-4x">
<input class="form-check-input" type="checkbox" role="switch">
<label class="form-check-label">Label Side</label>
</span>
</div>
</div>

how to remove # in url when modal popup and submitted

Got a problem here.
I have a modal and when i open it using my code, my url extension extends like having this #mymodalid .
$(document).on("click", "input[name='txt1']", function() {
$('#modal1').show();
});
$(document).on("click", "input[name='txt2']", function() {
$('#modal2').show();
});
$(document).on("click", ".btn1", function() {
if ($('#modal1 :checkbox:checked').length > 1) {
$('input[name=txt1]').val('multiple');
} else {
$('input[name=txt1]').val($('#modal1 :checkbox:checked').prev('label').text());
}
$('#modal1').hide();
});
$(document).on("click", ".btn2", function() {
$('#modal2').hide();
});
$(".radio").change(function() {
$(".radio").prop('checked', false);
$(this).prop('checked', true);
});
/* modal layout */
.modalwrapper {
top: 0;
left: 0;
opacity: 0;
position: absolute;
visibility: hidden;
box-shadow: 0 3px 7px rgba(0,0,0,.25);
box-sizing: border-box;
transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
}
.modalwrapper:target {
opacity: 1;
visibility: visible
}
.overlay {
background-color: #000;
background: rgba(0,0,0,.8);
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
.modalcontainer {
display: table;
background-color: #777;
position: relative;
z-index: 100;
color: #fff;
padding: 5px;
}
.modalcol1 { display: table-cell; }
.clear { clear: both; }
.modalwrapper input[type=checkbox] {
float: right;
margin-right: 20px;
}
.savebutton input[type=submit] {
float: right;
background-color: maroon;
color: #fff;
border: none;
padding: 5px 10px;
margin-top: 5px;
margin-right: 20px;
}
/* modal layout ends here */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" name="testform" action="">
<a href="#modal1">
<!-- when the input textbox was clicked, modal will pop up -->
Label 1
<input readonly type="text" name="txt1" placeholder="inputTest">
</a>
<br>
<br>
<a href="#modal2">
<!-- when the input textbox was clicked, modal will pop up -->
Label 2
<input readonly type="text" name="txt2" placeholder="inputTest">
</a>
<!-- modal starts here -->
<div class="modalwrapper" id="modal1">
<!-- modal -->
<div class="modalcontainer">
<div class="modalcol1">
<label>Test 1</label>
<input type="checkbox" name="test_modal[]" value="1">
<div class="clear"></div>
<label>Test 2</label>
<input type="checkbox" name="test_modal[]" value="2">
<div class="clear"></div>
<label>Test 3</label>
<input type="checkbox" name="test_modal[]" value="3">
<div class="clear"></div>
<label>Test 4</label>
<input type="checkbox" name="test_modal[]" value="4">
<div class="clear"></div>
<label>Test 5</label>
<input type="checkbox" name="test_modal[]" value="5">
<div class="clear"></div>
<div class="savebutton">
<button class="btn1" type="button" value="Submit">Submit</button>
</div>
</div>
<!-- close modalcol1 -->
</div>
<!-- close modalcontainer -->
<div class="overlay"></div>
</div>
<!-- close modalwrapper -->
<div class="modalwrapper" id="modal2">
<!-- modal -->
<div class="modalcontainer">
<div class="modalcol1">
<label>Mango</label>
<input class="radio" type="checkbox" name="fruit1" value="1">
<div class="clear"></div>
<label>Banna</label>
<input class="radio" type="checkbox" name="fruit2" value="2">
<div class="clear"></div>
<label>Grapes</label>
<input class="radio" type="checkbox" name="fruit3" value="3">
<div class="clear"></div>
<div class="savebutton">
<button class="btn2" type="button" value="Submit">Submit</button>
</div>
</div>
<!-- close modalcol1 -->
</div>
<!-- close modalcontainer -->
<div class="overlay"></div>
</div>
<!-- close modalwrapper -->
</form>
What I need to do is that:
Show the modal as it needs on my program.
Checked some checkbox
Close the modal but on the url, #mymodalid should be remove once close.
Even if i closed the modal, what i was checked should be retain
I need to remove #mymodalid because when i redirected to the page itself upon submission, the modal will popup because of that #
Anyone, please help me.

Add a callback to your hide() functions:
$('#modal1').hide(400, removeHashFromUrl());
function removeHashFromUrl()
{
window.location.hash = '';
}
Or you could just just inline the callback, but it's obviously reusable in a function:
$('#modal1').hide(400, function(){window.location.hash = '';});
PS: 400 is the default speed for jQuery's hide().

section is not responding to CSS

I've started coding this landing page and after I was done with the fullvp menu the section class="hero" is now not responding, when trying to edit it on chrome it actually worked. so, I went back to my source to see if there are any typos or missing symbols - didn't find none -_-, so... Need some help from the community, thank
P.S
It's probably something stupid I've done so my apologies =)
img { width: 100%; }
header {
background-color: #000;
padding: 1px;
text-align: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100px;
}
#logo {
border: 5px solid #fff;
display: inline-block;
color: #fff;
padding: 5px;
}
#menu-icon {
position: fixed;
top: 0;
left: 0;
z-index: 1;
padding: 5px;
width: 50px;
background: royalblue;
color: white;
transition: .3s ease;
display: inline-block;
}
#menu-icon:hover, #menu-icon:focus {
/*background: black;*/
transition: .5s ease;
width: 100%;
}
.overlay {
height: 0%;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-y: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 46px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color:royalblue;
}
.closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px !important;
}
#media screen and (max-height: 450px) {
.overlay {overflow-y: auto;}
.overlay a {font-size: 20px}
.closebtn {
font-size: 40px !important;
top: 15px;
right: 35px;
}
.hero {
background: green;
display: inline-block;
margin-top: 150px;
padding: 1px;
}
<!DOCTYPE html>
<html>
<head>
<title>Student Loan Landing Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="norm.css">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="wrap">
<section class="header">
<header>
<h1 id="logo">SAVVY STUDENT</h1>
<div id="myNav" class="overlay">
<i class="fa fa-times" aria-hidden="true"></i>
<div class="overlay-content">
Home
About
Contact
</div>
</div>
<span id="menu-icon" style="font-size:30px;cursor:pointer" onclick="openNav()"><i class="fa fa-bars" aria-hidden="true"></i></span>
</header>
</section>
<section class="hero">
<div class="hero-content">
<h2 id="hero-content-headline">GRADUATE FROM STUDENT LOANS</h2>
<p id="hero-content-content">STUDENT LOAN DEBT, RECORD BREAKING $1.5 TRILIAN. POST STUDENTS ARE TAKING ADVANTAGE OF DEBT RELIEFE. WE BELIVE THAT EVERYONE DESERVES A SECOND CHANGE. DON’T FALL BEGIND TAKE ADVANTAGE OF STUDENT LOAN FORGIVENESS. APPLY NOW AND FIND OUT HOW MUCH YOU CAN GET FORGIVEN</p>
</div>
<div class="form-wrap">
<form method="post" action="send.php">
<legend>Find out how much you can get forgiven <span class="form-tagline">Enter your details and we will get in touch</span></legend>
<fieldset class="form-fields">
<label for="user-first">First Name</label>
<input type="text" name="user_first_name" class="user-first">
<label for="user-last">Last Name</label>
<input type="text" name="user_last_name" class="user-last"><br>
<label for="user-email">Email</label>
<input type="email" name="user_email_address" class="user-email">
<label for="user-phone">Phone</label>
<input type="tel" name="user_phone_number" class="user-phone"><br>
<label for="user-address">Address</label>
<input type="text" name="user_address_street" class="user-address">
<label for="user-city">City</label>
<input type="text" name="user_address_city" class="user-acity"><br>
<label for="user-state">State</label>
<input type="text" name="user_address_state" class="user-state">
<label for="user-zip">Zip</label>
<input type="number" name="user_address_zip" class="user-zip"><br>
<button type="submit">find out now!</button>
</fieldset>
</form>
</div>
</section>
<section class="why-program">
<div class="why-program-wrap">
<h1>Why Apply to Student Loan Forgiveness Program?</h1>
<ul>
<li><span><i class="fa fa-check-circle-o" aria-hidden="true"></i></span>Reduce payment</li>
<li><span><i class="fa fa-check-circle-o" aria-hidden="true"></i></span>Consolidate loans</li>
<li><span><i class="fa fa-check-circle-o" aria-hidden="true"></i></span>Increase credit Score</li>
<li><span><i class="fa fa-check-circle-o" aria-hidden="true"></i></span>Deal with one lender</li>
</ul>
</div>
</section>
<section class="features">
<div class="feature-apply feeature">
<span><i class="fa fa-pencil" aria-hidden="true"></i></span>
<h3>Apply today</h3>
<p>Fill out the form or give us a call.</p>
</div>
<div class="feature-apply feeature">
<span><i class="fa fa-thumbs-up" aria-hidden="true"></i></span>
<h3>Approved</h3>
<p>Submit your request with 1 of our consultants and get approved in minutes.</p>
</div>
<div class="feature-apply feeature">
<span><i class="fa fa-graduation-cap" aria-hidden="true"></i></span>
<h3>Enroll</h3>
<p>To one of the programs and change your life today</p>
</div>
<div class="features-video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/BeBx8UdVOCc" frameborder="0" allowfullscreen></iframe>
</div>
</section>
<section class="reviews">
<h3>What Are Clients Say...</h3>
<div class="review">
<img src="" alt="Reviewer-name" class="reviewer-photo">
<h3 class="review-name">Bob Smith</h3>
<p class="review-content">Best Company Ever</p>
</div>
</section>
<section class="how-works">
<div class="how how-1">
<h3>one stop shop</h3>
<p>We do it all for you from preparing your documentation, talking to your lender, enrolling you to the program, you don’t need to lift a finger.</p>
</div>
<div class="line"></div>
<div class="how how-2">
<h3>You are safe</h3>
<p>We are a trusted company with your information encrypted to our system where only the Department of Education has access too.</p>
</div>
<div class="line"></div>
<div class="how how-3">
<h3>Approved in 1 call</h3>
<p>In just 1 phone call our team of experts will let you know if you get approved.</p>
</div>
</section>
<section class="why-us">
<h3>Why Us</h3>
<p>[company] main priority is to help post students get the financial aid they deserve. Company has been in business for years. Professionally providing great customer service with 1 point of contact and quick response. While keeping your personal information safe and secured. Our team of consultants and underwriters strive on providing on point information on enrolling you to the program that will best benefit you. We stick by you on the full length of your program, providing you with answers to all your questions and concerns.</p>
</section>
<div class="divider"><hr></div>
<section class="articles">
<div class="article">
<img class="article-img" alt="" src="RES/HERO-2.jpg">
<h3 class="article-head">Lorem Ipsum has been</h3>
<p class="article-content">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</p>
read more
</div>
<div class="article">
<img class="article-img" alt="" src="RES/HERO-2.jpg">
<h3 class="article-head">Lorem Ipsum has been</h3>
<p class="article-content">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</p>
read more
</div>
<div class="article">
<img class="article-img" alt="" src="RES/HERO-2.jpg">
<h3 class="article-head">Lorem Ipsum has been</h3>
<p class="article-content">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</p>
read more
</div>
</section>
<footer>
<section class="contact-us">
<div class="colm-1">
<h3>Contact Us</h3>
<ul>
<li>Office: (866) 210-1337</li>
<li>Address: 2351 W 3rd St<br>Los Angeles, CA</li>
<li>Email: info#fslforgive.com</li>
</ul>
</div>
<div class="colm-2">
<form method="post" action="send.php">
<legend>Find out how much you can get forgiven <span class="form-tagline">Enter your details and we will get in touch</span></legend>
<fieldset class="form-fields">
<label for="user-first">First Name</label>
<input type="text" name="user_first_name" class="user-first">
<label for="user-last">Last Name</label>
<input type="text" name="user_last_name" class="user-last"><br>
<label for="user-email">Email</label>
<input type="email" name="user_email_address" class="user-email">
<label for="user-phone">Phone</label>
<input type="tel" name="user_phone_number" class="user-phone"><br>
<label for="user-address">Address</label>
<input type="text" name="user_address_street" class="user-address">
<label for="user-city">City</label>
<input type="text" name="user_address_city" class="user-acity"><br>
<label for="user-state">State</label>
<input type="text" name="user_address_state" class="user-state">
<label for="user-zip">Zip</label>
<input type="number" name="user_address_zip" class="user-zip"><br>
<button type="submit">find out now!</button>
</fieldset>
</form>
</div>
<div class="social">
<span><i class="fa fa-facebook-official" aria-hidden="true"></i></span>
<span><i class="fa fa-youtube-play" aria-hidden="true"></i></span>
<span><i class="fa fa-instagram" aria-hidden="true"></i></span>
<span><i class="fa fa-envelope" aria-hidden="true"></i></span>
</div>
</section>
</footer>
</div>
<script src="https://use.fontawesome.com/e4028997c7.js"></script>
<script>
function openNav() {
document.getElementById("myNav").style.height = "100%";
}
function closeNav() {
document.getElementById("myNav").style.height = "0%";
}
</script>
</body>
</html>

#media screen is not closed properly
#media screen and (max-height: 450px) {
.overlay {overflow-y: auto;}
.overlay a {font-size: 20px}
.closebtn {
font-size: 40px !important;
top: 15px;
right: 35px;
}
}/**closing bracket is missing***/
.hero {
background: green;
display: inline-block;
margin-top: 150px;
padding: 1px;
}
http://codepen.io/nagasai/pen/xORWmd

Clear checkbox button not working

I have a CLEAR button. The aim of that CLEAR button is that when a user clicks the button, all selected checkbox values are removed. Thats it. Now somehow I managed to get a checkbox with the CLEAR button (seemed for me the only way), and also upon clicking then all checkbox values are selected and when clicking again all checkbox values are removed. Is it possible to get only the button and then just one click for just removal of selected checkboxes? My current code only works for the first filter-menu BRAND, but for the others it does not work, I cant figure out why.
Here my BOOTPLY - BOOTPLY
$("#clear").change(function () {
$("input:checkbox").prop('checked', $(this).prop("checked"));
});
/* CSS used here will be applied after bootstrap.css */
/* FILTER_datafeed */
.scrollable-menu {
height: auto;
max-height: 200px;
overflow-x: hidden;
}
/* Filter-menu APPLY and CLEAR */
.select_filter > .multi_select_container > .div_form > .btn_apply {
border-right: 1px solid #e6e6e6;
box-sizing: border-box;
display: inline-block;
float: left;
padding: 10px 16px 10px 17px;
text-align: center;
width: 50%;
}
.select_filter > .multi_select_container > .div_form > .btn_clear.disabled, .select_filter > .multi_select_container > .div_form > .btn_clear[disabled], .select_filter > .multi_select_container > .div_form > .btn_clear[disabled]:hover {
background-color: transparent;
color: #ccc;
}
.select_filter > .multi_select_container > .div_form > .btn_clear {
box-sizing: border-box;
display: inline-block;
float: right;
padding: 10px 17px;
text-align: center;
width: 50%;
}
.checkbox :hover {
background-color:red;
cursor:pointer;
width:100%;
}
.div_form :hover {
background-color:green;
cursor:pointer;
}
.btn_clear {
float: right;
display: inline-block;
box-sizing: border-box;
width: 50%;
padding: 10px 17px;
text-align: center;
}
.btn_apply {
float: left;
display: inline-block;
box-sizing: border-box;
width: 50%;
padding: 10px 17px;
text-align: center;
}
/* Type-ahead plugin */
.twitter-typeahead .tt-query,
.twitter-typeahead .tt-hint {
margin-bottom: 0;
}
.tt-dropdown-menu {
min-width: 160px;
margin-top: 2px;
padding: 5px 0;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.2);
*border-right-width: 2px;
*border-bottom-width: 2px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
-moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
box-shadow: 0 5px 10px rgba(0,0,0,.2);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}
.tt-suggestion {
display: block;
padding: 3px 20px;
}
.tt-suggestion.tt-is-under-cursor {
color: #fff;
background-color: #0081c2;
background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
background-image: -o-linear-gradient(top, #0088cc, #0077b3);
background-image: linear-gradient(to bottom, #0088cc, #0077b3);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0)
}
.tt-suggestion.tt-is-under-cursor a {
color: #fff;
}
.tt-suggestion p {
margin: 0;
}
/* Type-ahead plugin END */
<div class="btn-toolbar">
<!--Default buttons with dropdown menu-->
<div class="btn-group">
<button class="btn btn-default" type="button">Brand</button>
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span></button>
<div class="dropdown-menu scrollable-menu" style="margin-left: 2em">
<input class="typeahead" placeholder="Search values" type="text">
<div class="checkbox">
<label><input value="" type="checkbox"> Alpha</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Beta
</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Gamma</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Delta</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Omega</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Koppa
</label>
</div>
<div class="div_form">
<span class="btn_apply" id="apply">Apply</span>
<span class="btn_clear"><input id="clear" type="checkbox">Clear</span>
</div>
</div>
</div><!--Primary buttons with dropdown menu-->
<div class="btn-group">
<button class="btn btn-primary" type="button">Colour</button>
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span></button>
<div class="dropdown-menu scrollable-menu" style="margin-left: 2em">
<input class="typeahead" placeholder="Search values" type="text">
<div class="checkbox">
<label><input value="" type="checkbox"> Eins</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Zwei
</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Drei</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Vier</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Fünf</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Sechs
</label>
</div>
<div class="div_form">
<span class="btn_apply" id="apply">Apply</span>
<span class="btn_clear"><input id="clear" type="checkbox">Clear</span>
</div>
</div>
</div><!--Info buttons with dropdown menu-->
<div class="btn-group">
<button class="btn btn-info" type="button">Merchant</button>
<button class="btn btn-info dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span></button>
<div class="dropdown-menu scrollable-menu" style="margin-left: 2em">
<input class="typeahead" placeholder="Search values" type="text">
<div class="checkbox">
<label><input value="" type="checkbox"> First value</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Second option
</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Third choice</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Fourth alternative</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Fifth decision</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Sixt focus
</label>
</div>
<div class="div_form">
<span class="btn_apply" id="apply">Apply</span>
<span class="btn_clear"><input id="clear" type="checkbox">Clear</span>
</div>
</div>
</div><!--Success buttons with dropdown menu-->
<div class="btn-group">
<button class="btn btn-danger" type="button">Price</button>
<button class="btn btn-danger dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span></button>
<div class="dropdown-menu scrollable-menu" style="margin-left: 2em">
<input class="typeahead" placeholder="Search values" type="text">
<div class="checkbox">
<label><input value="" type="checkbox"> Value-1</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Value-2
</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Value-3</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Value-4</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Value-5</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Value-6
</label>
</div>
<div class="div_form">
<span class="btn_apply" id="apply">Apply</span>
<span class="btn_clear"><input id="clear" type="checkbox">Clear</span>
</div>
</div>
</div>
</div><!--Success buttons with dropdown menu-->

Man you are using the same ID four times. The ID selector always return a single element, in your case you are only attaching the event to the first input with the id #clear so it will be working ONLY on the first clear button. Use a class instead and somehow scope the changes to affect only the related checkboxes.
Change the IDs to classes and use the following:
$(".clear").change(function () {
$(this).closest('.dropdown-menu').find('input:checkbox').prop('checked', $(this).prop("checked"));
});
Working example
To make sure the clear button always clear the selection, you should always set the property checked to false like this:
$(".clear").change(function () {
$(this).closest('.dropdown-menu').find('input:checkbox').prop('checked', false);
});
Updated example

It's only working for the first menu because an id is suppose to be unique. You are actually only applying an event listener to the first #clear element. In addition, you are toggling the checked property of all the checkboxes, not just the checkboxes in that dropdown menu.
Change the id attribute to a class, in this case, .clear, and when the change event is fired, select the closest .dropdown-menu element and toggle all the descendant checkbox elements:
Updated Example
$(".clear").on('change', function () {
$(this).closest('.dropdown-menu').find('input[type="checkbox"]').prop('checked', this.checked);
});
You could also just remove the checkbox and attach a click event to the .btn_clear element. You will also need to stop the event propagation in order to prevent the dropdown element from closing:
Updated Example
$(".btn_clear").on('click', function (e) {
e.stopPropagation();
$(this).closest('.dropdown-menu').find('input[type="checkbox"]').prop('checked', false);
});

Twitter-Bootstrap drop down log in closes when text areas are clicked

Hi I'm designing a website with JQuery for the first time. I am using Twitter-Bootstrap for a dropdown login box and I can't get the JQuery script right to make the box stay open when you click on the text area. I've tried everything and I am familiar with java script. I placed the following:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"</script>
at the top of the header as well as before the closing body bracket, and the following in front of the closing body tag as well...
<script>$(function() {
// Setup drop down menu
$('.dropdown-toggle').dropdown();
// Fix input element click problem
$('.dropdown input, .dropdown label').click(function(e) {
e.stopPropagation();
});
});</script>
here is the HTML
<div id="top-bar">
<div class="container">
<div class="row">
<div class="col-sm-12">
<ul id="top-info">
<li>Phone: 703-518-4325</li>
<li>Email: info#urbanare.com</li>
</ul>
<ul class="nav pull-right" id="top-buttons">
<li id="dropdown"><a class="dropdown-toggle" href="#" data-toggle="dropdown"><i class="fa fa-sign-in"></i>Log in<strong class="caret"></strong></a></a>
<div class="dropdown-menu" style="padding: 15px; padding-bottom: 15px;">
<form action="[YOUR ACTION]" method="post" accept-charset="UTF-8">
email: <input id="user_username" style="margin-bottom: 15px;" type="text" name="email" size="30" />
password: <input id="user_password" style="margin-bottom: 15px;" type="password" name="password" size="30" />
<input id="user_remember_me" style="float: left; margin-right: 10px;" type="checkbox" name="user[remember_me]" value="1" />
<label class="string optional" for="user_remember_me"> Remember me</label>
<input class="btn btn-primary" style="clear: left; width: 100%; height: 32px; font-size: 13px;" type="submit" name="commit" value="Sign In" />
</form>
</div></li>
<li class="divider"></li>
<li><i class="fa fa-pencil-square-o"></i> Register</li>
</ul>
</div>
</div>
</div>
</div>
and the CSS
#top-bar {
width: 100%;
min-height: 35px;
max-height: 35px;
font-size: 13px;
line-height: 35px;
background-color: #f1f3f6;
position: relative;
z-index: 1020;
}
#top-buttons{
line-height:10px !important;
}
#top-bar a {
color: #74777c;
}
#top-bar a:hover,
#top-bar a:focus {
color: #f58220;
text-decoration: none;
}
#dashboard-top-bar {
width: 100%;
min-height: 45px;
font-size: 13px;
line-height: 35px;
background-color: #f1f3f6;
position: relative;
z-index: 1020;
}
#dashboard-top-bar a {
color: #74777c;
}
#dashboard-top-bar a:hover,
#dashboard-top-bar a:focus {
color: #f58220;
text-decoration: none;
}
#top-info,
#top-buttons {
display: inline-block;
list-style: none;
margin: 0;
padding: 0;
}
#top-info,
#top-buttons li {
display: inline-block;
margin-left: 25px;
}
#top-buttons {
float: right;
}
#top-buttons .divider {
position: relative;
border-left: 1px solid #74777c;
width: 1px;
height: 22px;
overflow: hidden;
margin-bottom: -6px;
}

You don't need any jquery to do this. include bootstrap.js and bootstrap.css then
Try this code.
Ex:- JS FIDDLE
<div id="top-bar">
<div class="container">
<div class="row">
<div class="col-sm-12">
<ul id="top-info">
<li>Phone: 703-518-4325</li>
<li>Email: info#urbanare.com</li>
</ul>
<ul class="nav pull-right" id="top-buttons">
<li class="dropdown">
<i class="fa fa-sign-in"></i>Log in<strong class="caret"></strong></a>
<ul id="login-dp" class="dropdown-menu">
<form action="[YOUR ACTION]" method="post" accept-charset="UTF-8">
email: <input id="user_username" style="margin-bottom: 15px;" type="text" name="email" size="30" />
password: <input id="user_password" style="margin-bottom: 15px;" type="password" name="password" size="30" />
<input id="user_remember_me" style="float: left; margin-right: 10px;" type="checkbox" name="user[remember_me]" value="1" />
<label class="string optional" for="user_remember_me"> Remember me</label>
<input class="btn btn-primary" style="clear: left; width: 100%; height: 32px; font-size: 13px;" type="submit" name="commit" value="Sign In" />
</form>
</ul>
</li>
<li class="divider"></li>
<li><i class="fa fa-pencil-square-o"></i> Register</li>
</ul>
</div>
</div>
</div>
</div>