I'm making a button component for Svelte, and it outputs either a <button> element or an <a>, depending on if you give it an href or not. Everything basically works perfect, the buttons and the links all look the same in the different styles.. except for my round button style:
That last row is all <a> tags. REPL: https://svelte.dev/repl/756e88bc3a8f4150872f6af66a4a7e4a?version=3.50.1.
How can I get the buttons and links to look the same? Why the they even behave so extremely different?
:root {
--primary-hsl: 135deg 62% 48%;
--primary: hsl(var(--primary-hsl));
--s2: 0.5rem;
--s4: 1rem;
}
.btn {
background: none;
padding: var(--s2) var(--s4);
border-radius: var(--s2);
color: var(--primary);
display: inline-block;
border: 0;
text-decoration: none;
box-sizing: border-box;
font-size: 16px;
font-family: sans-serif;
}
.btn:hover {
background: hsl(var(--primary-hsl) / 0.2);
text-decoration: none;
}
.round {
border-radius: 50%;
width: 40px;
height: 40px;
padding: 0;
background: hsl(var(--primary-hsl) / 0.1);
}
.outline {
border: 1px solid var(--primary);
}
.filled {
background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)) var(--primary);
color: white;
}
.filled:hover {
background: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)) var(--primary);
}
.disabled,
.disabled:hover {
color: #888;
cursor: not-allowed;
background: transparent;
}
.disabled.outline,
.disabled.outline:hover {
border-color: #888;
}
.disabled.filled,
.disabled.filled:hover {
background: #d7d7d7;
color: #888;
}
<p><button type="button" class="btn svelte-1l0536l">Default</button> <button type="button" class="btn outline svelte-1l0536l">Outlined</button> <button type="button" class="btn filled svelte-1l0536l">filled</button> <button type="button" class="btn round svelte-1l0536l">i</button></p> <p><button type="button" class="btn disabled svelte-1l0536l" disabled="">Default</button> <button type="button" class="btn outline disabled svelte-1l0536l" disabled="">Outlined</button> <button type="button" class="btn filled disabled svelte-1l0536l" disabled="">filled</button> <button type="button" class="btn round disabled svelte-1l0536l" disabled="">i</button></p> <p>Default Outlined filled i</p>
Adding some flex rules for alignment to the .round class could solve it:
display: inline-flex;
justify-content: center;
align-items: center;
:root {
--primary-hsl: 135deg 62% 48%;
--primary: hsl(var(--primary-hsl));
--s2: 0.5rem;
--s4: 1rem;
}
.btn {
background: none;
padding: var(--s2) var(--s4);
border-radius: var(--s2);
color: var(--primary);
display: inline-block;
border: 0;
text-decoration: none;
box-sizing: border-box;
font-size: 16px;
font-family: sans-serif;
}
.btn:hover {
background: hsl(var(--primary-hsl) / 0.2);
text-decoration: none;
}
.round {
border-radius: 50%;
width: 40px;
height: 40px;
padding: 0;
background: hsl(var(--primary-hsl) / 0.1);
/**********************************/
display: inline-flex;
justify-content: center;
align-items: center;
/**********************************/
}
.outline {
border: 1px solid var(--primary);
}
.filled {
background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)) var(--primary);
color: white;
}
.filled:hover {
background: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)) var(--primary);
}
.disabled,
.disabled:hover {
color: #888;
cursor: not-allowed;
background: transparent;
}
.disabled.outline,
.disabled.outline:hover {
border-color: #888;
}
.disabled.filled,
.disabled.filled:hover {
background: #d7d7d7;
color: #888;
}
<p>
<button type="button" class="btn svelte-1l0536l">Default</button>
<button type="button" class="btn outline svelte-1l0536l">Outlined</button>
<button type="button" class="btn filled svelte-1l0536l">filled</button>
<button type="button" class="btn round svelte-1l0536l">i</button>
</p>
<p>
<button type="button" class="btn disabled svelte-1l0536l" disabled="">Default</button>
<button type="button" class="btn outline disabled svelte-1l0536l" disabled="">Outlined</button>
<button type="button" class="btn filled disabled svelte-1l0536l" disabled="">filled</button>
<button type="button" class="btn round disabled svelte-1l0536l" disabled="">i</button>
</p>
<p>
Default
Outlined
filled
i
</p>
Related
I'm creating a number pad on screen. I would like to either center the number 0 or to make a larger button to cover the whole area of the div.
Here is the code that I'm using:
.numPad {
border: 1px solid #b7b7b7;
width: 100px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
padding: 0px;
background-color: #f1f1f1;
}
.numPad button {
padding: 5px;
background-color: #f1f1f1;
border: 1px solid #b7b7b7;
outline: none;
color: #000;
padding: 5px 5px;
text-align: center;
text-decoration: none;
font-size: 16px;
font-family: 'Cinzel Decorative', cursive;
margin: 0;
cursor: pointer;
z-index: 0;
transform: scale(1);
transition: all 0.05s;
}
.numPad button:active {
z-index: 1;
background-color: #dedede;
transform: scale(1.15);
}
.zero {
display: block !important;
width: 100%;
}
The .zero class is the one trying to give that 0 button's effect.
Here is the HTML:
<div class="numPad">
<button value="1">1</button>
<button value="2">2</button>
<button value="3">3</button>
<button value="4">4</button>
<button value="5">5</button>
<button value="6">6</button>
<button value="7">7</button>
<button value="8">8</button>
<button value="9">9</button>
<button value="0" class="zero">0</button>
</div>
Thank you for your time and help!
To fill whole space use grid-column: 1 / span 3;
.numPad {
border: 1px solid #b7b7b7;
width: 100px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
padding: 0px;
background-color: #f1f1f1;
}
.numPad button {
padding: 5px;
background-color: #f1f1f1;
border: 1px solid #b7b7b7;
outline: none;
color: #000;
padding: 5px 5px;
text-align: center;
text-decoration: none;
font-size: 16px;
font-family: 'Cinzel Decorative', cursive;
margin: 0;
cursor: pointer;
z-index: 0;
transform: scale(1);
transition: all 0.05s;
}
.numPad button:active {
z-index: 1;
background-color: #dedede;
transform: scale(1.15);
}
.zero {
grid-column: 1 / span 3;
}
<div class="numPad">
<button value="1">1</button>
<button value="2">2</button>
<button value="3">3</button>
<button value="4">4</button>
<button value="5">5</button>
<button value="6">6</button>
<button value="7">7</button>
<button value="8">8</button>
<button value="9">9</button>
<button value="0" class="zero">0</button>
</div>
To fill middle of keypad use grid-column: 2 / span 1;
.numPad {
border: 1px solid #b7b7b7;
width: 100px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
padding: 0px;
background-color: #f1f1f1;
}
.numPad button {
padding: 5px;
background-color: #f1f1f1;
border: 1px solid #b7b7b7;
outline: none;
color: #000;
padding: 5px 5px;
text-align: center;
text-decoration: none;
font-size: 16px;
font-family: 'Cinzel Decorative', cursive;
margin: 0;
cursor: pointer;
z-index: 0;
transform: scale(1);
transition: all 0.05s;
}
.numPad button:active {
z-index: 1;
background-color: #dedede;
transform: scale(1.15);
}
.zero {
grid-column: 2 / span 1;
}
<div class="numPad">
<button value="1">1</button>
<button value="2">2</button>
<button value="3">3</button>
<button value="4">4</button>
<button value="5">5</button>
<button value="6">6</button>
<button value="7">7</button>
<button value="8">8</button>
<button value="9">9</button>
<button value="0" class="zero">0</button>
</div>
You may set the grid column to centre the number 0 button.
.zero {
display: block !important;
grid-column: 2 / 3; /* set grid column */
width: 100%;
}
.numPad {
border: 1px solid #b7b7b7;
width: 100px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
padding: 0px;
background-color: #f1f1f1;
}
.numPad button {
padding: 5px;
background-color: #f1f1f1;
border: 1px solid #b7b7b7;
outline: none;
color: #000;
padding: 5px 5px;
text-align: center;
text-decoration: none;
font-size: 16px;
font-family: 'Cinzel Decorative', cursive;
margin: 0;
cursor: pointer;
z-index: 0;
transform: scale(1);
transition: all 0.05s;
}
.numPad button:active {
z-index: 1;
background-color: #dedede;
transform: scale(1.15);
}
.zero {
display: block !important;
grid-column: 2 / 3; /* set grid column */
width: 100%;
}
<div class="numPad">
<button value="1">1</button>
<button value="2">2</button>
<button value="3">3</button>
<button value="4">4</button>
<button value="5">5</button>
<button value="6">6</button>
<button value="7">7</button>
<button value="8">8</button>
<button value="9">9</button>
<button value="0" class="zero">0</button>
</div>
You can have it span the whole bottom by adding
.zero {
grid-column: 1/4;
}
Like this:
.numPad {
border: 1px solid #b7b7b7;
width: 100px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
padding: 0px;
background-color: #f1f1f1;
}
.numPad button {
padding: 5px;
background-color: #f1f1f1;
border: 1px solid #b7b7b7;
outline: none;
color: #000;
padding: 5px 5px;
text-align: center;
text-decoration: none;
font-size: 16px;
font-family: 'Cinzel Decorative', cursive;
margin: 0;
cursor: pointer;
z-index: 0;
transform: scale(1);
transition: all 0.05s;
}
.numPad button:active {
z-index: 1;
background-color: #dedede;
transform: scale(1.15);
}
.zero {
grid-column: 1/4;
}
<div class="numPad">
<button value="1">1</button>
<button value="2">2</button>
<button value="3">3</button>
<button value="4">4</button>
<button value="5">5</button>
<button value="6">6</button>
<button value="7">7</button>
<button value="8">8</button>
<button value="9">9</button>
<button value="0" class="zero">0</button>
</div>
I have a some basic button styles where on :hover I add the letter-spacing property:
.btn {
display: inline-block;
text-align: center;
background-color: transparent;
border: 1px solid transparent;
padding: 0.375rem 0.75rem;
font-size: 1rem;
border-radius: 0.25rem;
cursor: pointer;
transition: all 0.2s ease;
}
.btn-primary {
background-color: #8065F1;
color: #FFFFFF;
}
.btn-large {
border-radius: 32px;
box-shadow: 0 2px 80px 0 rgba(74, 74, 74, 0.23);
padding: 0.25rem 3rem;
font-size: 1.5rem;
text-transform: uppercase;
}
.btn:hover {
letter-spacing: 4px;
}
<button type="button" class="btn btn-primary btn-large">Lorem</button>
Is there a way that width doesn't expand? Like adding min/max-width? However the problem is that button elements can contain different string length:
.btn {
display: inline-block;
text-align: center;
background-color: transparent;
border: 1px solid transparent;
padding: 0.375rem 0.75rem;
box-shadow: 0 2px 80px 0 rgba($grey, 0.23);
font-size: 1rem;
border-radius: 0.25rem;
cursor: pointer;
transition: all 0.2s ease;
}
.btn-primary {
background-color: #8065F1;
color: #FFFFFF;
}
.btn-large {
border-radius: 32px;
-webkit-box-shadow: 0 2px 80px 0 rgba(74, 74, 74, 0.23);
box-shadow: 0 2px 80px 0 rgba(74, 74, 74, 0.23);
padding: 0.25rem 3rem;
font-size: 1.5rem;
text-transform: uppercase;
min-width: 240px;
}
.btn:hover {
letter-spacing: 4px;
}
<p>I need this "effect" (I added some min-width):</p>
<button type="button" class="btn btn-primary btn-large">Lorem</button>
<p>However it won't work for larger strings</p>
<button type="button" class="btn btn-primary btn-large">Lorem Ipsum</button><br><br>
<button type="button" class="btn btn-primary btn-large">Lorem Ipsum Dolor</button>
I know I can use JS and append the elements fixed width to it, however I'm looking for a CSS solution - if there is one?
On idea to approximate this is to duplicate the text considering a hidden one that has already the letter-spacing and another one on the top that you animate to fill the space already defined by the hidden text:
Here is an idea by making the text color the same as background:
.btn {
display: inline-block;
text-align: center;
background-color: transparent;
border: 1px solid transparent;
padding: 0.375rem 0.75rem;
font-size: 1rem;
border-radius: 0.25rem;
cursor: pointer;
transition: all 0.2s ease;
margin-bottom:10px;
}
.btn-primary {
background-color: #8065F1;
color: #FFFFFF;
}
.btn-large {
border-radius: 32px;
box-shadow: 0 2px 80px 0 rgba(74, 74, 74, 0.23);
padding: 0.25rem 3rem;
font-size: 1.5rem;
text-transform: uppercase;
}
.btn::before {
content:attr(data-text);
position:absolute;
left:0;
right:0;
text-align:center;
letter-spacing: initial;
color:#fff;
transition: all 0.2s ease;
}
.btn {
letter-spacing: 4px;
color:#8065F1;
position:relative;
}
.btn:hover::before {
letter-spacing: 4px;
}
<div><button type="button" class="btn btn-primary btn-large" data-text="Lorem">Lorem</button></div>
<div><button type="button" class="btn btn-primary btn-large" data-text="Lorem Ipsum">Lorem Ipsum</button></div>
<div><button type="button" class="btn btn-primary btn-large" data-text="Lorem Ipsum Dolor">Lorem Ipsum Dolor</button></div>
Another one using opacity and both pseudo element in case the background is not a solid color:
.btn {
display: inline-block;
text-align: center;
background-color: transparent;
border: 1px solid transparent;
padding: 0.375rem 0.75rem;
font-size: 1rem;
border-radius: 0.25rem;
cursor: pointer;
transition: all 0.2s ease;
margin-bottom:10px;
}
.btn-primary {
background: linear-gradient(#8065F1,purple);
color: #FFFFFF;
}
.btn-large {
border-radius: 32px;
box-shadow: 0 2px 80px 0 rgba(74, 74, 74, 0.23);
padding: 0.25rem 3rem;
font-size: 1.5rem;
text-transform: uppercase;
}
.btn {
position:relative;
font-size:0;
}
.btn::before {
content:attr(data-text);
position:absolute;
left:0;
right:0;
text-align:center;
letter-spacing: initial;
font-size: 1.5rem;
transition: all 0.2s ease;
}
.btn::after {
content:attr(data-text);
letter-spacing: 4px;
opacity:0;
font-size: 1.5rem;
}
.btn:hover::before {
letter-spacing: 4px;
}
<div><button type="button" class="btn btn-primary btn-large" data-text="Lorem">Lorem</button></div>
<div><button type="button" class="btn btn-primary btn-large" data-text="Lorem Ipsum">Lorem Ipsum</button></div>
<div><button type="button" class="btn btn-primary btn-large" data-text="Lorem Ipsum Dolor">Lorem Ipsum Dolor</button></div>
How about turning off box-sizing, then using a percentage for your padding? It should work well no matter what the size of your contents is, but my numbers are probably wrong so you'll need to adjust the numbers to make it accurate.
.wrapper{
display:inline-block;
}
button{
box-sizing: content-box;
padding: 0 10.4%;
border: none;
width: 100%;
font-size:13px;
}
button:hover{
letter-spacing:0.1em;
padding:0;
}
.outer-wrapper{
}
<div class="outer-wrapper">
<div class="wrapper">
<button class='button'>Small Text</button>
</div>
</div>
<div class="outer-wrapper">
<div class="wrapper">
<button class='button'>Much much bigger text</button>
</div>
</div>
<div class="outer-wrapper">
<div class="wrapper">
<button class='button'>Small TextSmall TextSmall TextSmall TextSmall Text</button>
</div>
</div>
Edit: Well, it's...more or less working, except that it turns out to be impossible. No matter how finely I tune it, I'm getting problems because of differences in browser rendering of sub-pixels. (The browser apparently rounds rem differently than it does %, which means this is going to be impossible to do with pure CSS.)
I'm currently working on a footer. There are 3 input-elements as you can see in the picture. Now, if you click on a input, the border-top becomes white. And now I want to achieve: if a input-field is filled with text and I click on another element, a green border-top has to appear. Which pseudo class do I have to use?
HTML:
<div id="footer">
<ul>
<li> <input type="text" name="name" placeholder="Name"> </li>
<li> <input type="text" name="email" placeholder="Email"> </li>
<li> <input class="last" type="text" name="message" placeholder="Message"> </li>
</ul>
</div>
CSS:
#footer {
width: 100%;
background-color: rgba(0, 0, 0, 0.8);
text-align: center;
padding: 20px 0px;
}
input {
padding: 10px 5%;
background: rgba(0, 0, 0, 0.4);
outline: none;
width: 60%;
margin-bottom: 30px;
font-family: Roboto-Thin;
color: white;
border: none;
border-bottom: 2px solid rgba(255, 255, 255, 0.0);
border-top: 2px solid rgba(255, 255, 255, 0.0);
font-size: 18px;
transition: 0.2s;
}
.last {
margin-bottom: 0px;
}
input:focus {
border-top: 2px solid white;
}
[1]: https://i.stack.imgur.com/4ZE0K.png
Since you're using placeholders, you can use :not(:placeholder-shown):not(:focus)
#footer {
width: 100%;
background-color: rgba(0, 0, 0, 0.8);
text-align: center;
padding: 20px 0px;
}
input {
padding: 10px 5%;
background: rgba(0, 0, 0, 0.4);
outline: none;
width: 60%;
margin-bottom: 30px;
font-family: Roboto-Thin;
color: white;
border: none;
border-bottom: 2px solid rgba(255, 255, 255, 0.0);
border-top: 2px solid rgba(255, 255, 255, 0.0);
font-size: 18px;
transition: 0.2s;
}
.last {
margin-bottom: 0px;
}
input:focus {
border-top: 2px solid white;
}
input:not(:placeholder-shown):not(:focus) {
border-top: 1px solid green;
}
<div id="footer">
<ul>
<li> <input type="text" name="name" placeholder="Name"> </li>
<li> <input type="text" name="email" placeholder="Email"> </li>
<li> <input class="last" type="text" name="message" placeholder="Message"> </li>
</ul>
</div>
I have 3 buttons that do not effect the size of their parent container and I cannot determine why.
html
<div class="normal-body main-raised">
<div class="section section-basic">
<div class="jumbotron jumbotron-fluid">
<div class="container-fluid text-center">
<h1 class="text-xs-center">Welcome to the Employee Portal</h1>
</div>
</div>
<div class="container-fluid col-xs-8 col-xs-offset-2 text-xs-center">
<div class="row">
<h2>Useful Links</h2>
</div>
<div class="row">
<button class="btn btn-primary btn-raised"><%= link_to "Locations", locations_path, class: "text-white" %></button>
<button class="btn btn-primary btn-raised"><%= link_to "Employees", fetch_employees_path, class: "text-white" %></button>
<button class="btn btn-primary btn-raised"><%= link_to "Timecards", timecards_path, class: "text-white" %></button>
</div>
</div>
</div>
</div>
I have only used un-altered bootstrap css and elements from the Creative Tim Material Kit
Here is a Fiddle (not perfect, but gets the point across)
...in case you want to see it, here is the button css.
.btn.btn-raised:not(.btn-link), .btn-group-raised .btn:not(.btn-link), .input-group-btn .btn.btn-raised:not(.btn-link), .btn-group-raised .input-group-btn .btn:not(.btn-link) {
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.btn.btn-raised.btn-primary, .btn.btn-fab.btn-primary, .btn-group-raised .btn.btn-primary, .input-group-btn .btn.btn-raised.btn-primary, .input-group-btn .btn.btn-fab.btn-primary, .btn-group-raised .input-group-btn .btn.btn-primary {
background-color: #9c27b0;
color: #ffffff;
}
.btn.btn-raised, .btn.btn-raised.btn-default, .btn.btn-fab, .btn.btn-fab.btn-default, .btn-group-raised .btn, .btn-group-raised .btn.btn-default, .input-group-btn .btn.btn-raised, .input-group-btn .btn.btn-raised.btn-default, .input-group-btn .btn.btn-fab, .input-group-btn .btn.btn-fab.btn-default, .btn-group-raised .input-group-btn .btn, .btn-group-raised .input-group-btn .btn.btn-default {
background-color: #EEEEEE;
color: rgba(0, 0, 0, 0.87);
}
.btn, .input-group-btn .btn {
border: none;
border-radius: 3px;
position: relative;
padding: 12px 30px;
margin: 10px 1px;
font-size: 12px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0;
will-change: box-shadow, transform;
transition: box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
background: transparent;
}
.btn-primary {
color: #fff;
background-color: #0275d8;
border-color: #0275d8;
}
.btn {
display: inline-block;
font-weight: normal;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
user-select: none;
border: 1px solid transparent;
padding: 0.375rem 1rem;
font-size: 1rem;
line-height: 1.5;
border-radius: 0.25rem;
}
Because your markup is a bit off. You shouldn't have your container share the same class as a col-xs, it should be more like container > row > col-xs-8.
See here - http://jsfiddle.net/qE9kJ/361/
find this class 'section section-basic'...you need to clear the floats there
<div class="section section-basic">
<!--Your code-->
</div>
<!--just add this line-->
<div style="clear:both;"></div>
I am having difficulty understanding the different column width attributes that are defined in classes, and a few other issues below.
If I have a form-horizontal with a form-group inside, and that form-group encapsulates a label, an input field, a button and a toggle switch all on the same line, how do I define it in my media query for mobile so that the label and input field stay on the same line and the button and toggle switch are wrapped on the same second line?
At the moment when viewed in mobile view the button and toggle switch seem like they float to the right sort of above the input field...I have tried defining form-inline, but I dont want any form-inlines in my form-horizontal, only form-groups...
I also have not specified sections in my long form, so instead I have individual div headers to signify each sections of the form, so does seem fine to do with a form?
I also am having a problem with my select dropdown lists. When I specify them to have width of 100% they dont span the width of their column width, the only way I can specify is to give them a fixed width, but then they dont become responsive....
Any ideas?
Thanks
<div class="form-horizontal" role="form" action="#" method="post">
<div class="form-group">
<label for="fname" class="col-md-2 control-label custom-label">First name</label>
<div class="col-md-8">
<input type="text" class="form-control input-text" id="inputfname" placeholder="" focus>
</div>
</div>
<div class="form-group">
<label for="lname" class="col-md-2 control-label custom-label">Last name</label>
<div class="col-md-8">
<input type="text" class="form-control input-text" id="inputlname" placeholder="">
</div>
</div>
<div class="form-group">
<label for="gender" class="col-md-2 control-label custom-label">Gender</label>
<div class="col-md-2">
<div class="toggle-input-btn-two">
<div class="slider-two"></div>
<span class="male">Male</span>
<span class="female selected">Female</span>
</div>
</div>
<div class="btn-group col-md-5">
<a class="btn btn-default dropdown-toggle btn-select gender"
data-toggle="dropdown" href="#">Other <span class="caret"></span>
</a>
<ul class="dropdown-menu inline">
<li>gender</li>
<li>gender</li>
<!-- <li class="divider"></li>
<li><a href="#">
<span class="glyphicon glyphicon-star"></span> Other</a></li> -->
</ul>
</div>
<div class="col-md-2">
<div class="toggle-input-btn-three">
<div class="slider-three"></div>
<span class="private3">Private</span>
<span class="public3 selected">Public</span>
</div>
</div>
</div>
<div class="headers">
<h3>Next Section</h3>
</div>
css
.form-horizontal .form-group{ padding: 0 15px;}
.form-horizontal .form-group .custom-label{ text-align: left; padding-left: 0; margin-top: -10px; font-size: 1.7em; font-weight: normal; color: #fff;}
.form-horizontal .form-group .form-control { background-color: #4d4d4d; border-color: #4d4d4d; color: #fff; padding: 0px 10px; border-radius: 3px;}
.form-horizontal .form-group .input-text { font-size: 1.3em; color: #fff;}
.form-horizontal .form-group .form-control:focus { border-color: #f47929; }
/* DROPDOWN MENU STYLING */
.btn-group .btn-default { color: #fff; background-color: #4d4d4d; border: none; font-size: 1.2em; border-radius: 3px;}
.btn-group .dropdown-toggle {position: relative; overflow: hidden; padding-right: 24px /* Optional for caret */; text-align: left; text-overflow: ellipsis; }
.btn-group ul.dropdown-menu {width: 96%; margin-left: 15px; }
.btn-group .dropdown-toggle.gender {position:relative; width: 567px; margin-left: 10px; }
.btn-group .dropdown-toggle.account {position:relative; width: 780px; }
.btn-group ul.dropdown-menu.inline { width: 567px; margin-left: 25px;}
/* OPTIONAL FOR DROPDOWN CARET */
.dropdown-toggle .caret { position: absolute; right: 12px; top: calc(50% - 2px);}
.toggle-input-btn-two {
width: 200px;
height: 38px;
position: absolute;
display: inline-block;
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
color: #FFF;
background-color: #F47929;
border: 2px solid #FCD7BC;
border-radius: 3px;
line-height: 34px;
font-family: 'Lato', verdana, sans-serif; font-size: 1.3em;
/* -webkit-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2);
*/ cursor: pointer;
}
.toggle-input-btn-three {
width: 200px;
height: 38px;
left: 60%;
position: absolute;
display: inline-block;
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
color: #FFF;
background-color: #F47929;
border: 2px solid #FCD7BC;
border-radius: 3px;
line-height: 34px;
font-family: 'Lato', verdana, sans-serif; font-size: 1.3em;
/* -webkit-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2);
*/ cursor: pointer;
}
.toggle-input-btn span,
.toggle-input-btn-two span,
.toggle-input-btn-three span,
.toggle-input-btn-four span,
.toggle-input-btn-five span,
.toggle-input-btn-six span,
.toggle-input-btn-seven span
{ width: 50%; height: 100%; float: left; text-align: center; cursor: pointer; -webkit-user-select: none;}
.toggle-input-btn-two div,
.toggle-input-btn-three div { width: 100px; height: 80%; top: 50%; left: 2%; transform: translateY(-50%); position: absolute; background-color: #FFF; border-radius: 3px;}
.toggle-input-btn-three div { border: 2px solid #aaa;}
.toggle-input-btn-two div {border: 2px solid #b3b3b3;}
Are you using Bootstrap 3? The documentation provides a nice illustration of the grid system: http://getbootstrap.com/css/#grid. To take advantage of bootstrap's grid, I'd wrap each set of elements that should stay together on "xs" in their own div with a class of .col-xs-12. Translated, "Hey, when you're in the "xs" world, take up the whole row." Then additionally, give it a class of .col-sm-6 so that once you hit 768px wide, each div will take up half the row.