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>
Related
I have a nav dropdown menu. I want the dropdown items to come from behind the menu. But the dropdown always comes from over the menu. No matter what z-index I put. I searched and almost all of the similar issues came from elements that where not positioned, but mine are. Here is the HTML of the menu component (<MenuItem />)
<div>
<div className={styles.dropdown}>
<div className={styles.dropbtn}>Bio</div>
<div className={styles.dropdownContent}>
<Link href="/biography">Biographie</Link>
<Link href="/albums">Discographie</Link>
<Link href="#">Télé/Films</Link>
<Link href="/games">Jeux vidéos</Link>
</div>
</div>
<div className={styles.dropdown}>
<div className={styles.dropbtn}>Média</div>
<div className={styles.dropdownContent}>
<Link href="/media/videos">Vidéos</Link>
<Link href="/media/gallery">Photos</Link>
<Link href="#">Musique</Link>
</div>
</div>
<div className={styles.dropdown}>
<div className={styles.dropbtn}>Pédagogie</div>
<div className={styles.dropdownContent}>
<Link href="/methods">Méthodes</Link>
<Link href="#">Internet</Link>
<Link href="#">Journaux</Link>
</div>
</div>
<LanguageSwitcher/>
</div>
and here is my topmenu
<nav className={styles.menu}>
<Link href={'/'}>
<div className={styles.logoContainer}>
<div className={styles.logo}>Chris Rime<Image
src={'/images/bg/waveform.svg'}
width={100}
/></div>
</div>
</Link>
<div className={styles.menuContainer}>
{!matches ? (
<Image src={'/images/icons/musicburger.svg'} style={{cursor: 'pointer'}} width={30}
onClick={() => setOpened((o) => !o)}
/>
) : (
<div className={styles.menuItems}>
<MenuItems/>
</div>
)}
</div>
</nav>
and here is my CSS
.menu {
position:fixed;
z-index:5;
top:0;
width:100%;
height:75px;
display: flex;
gap: 20px;
justify-content: flex-end;
transition: 0.4s;
background-color: var(--secondary);
border-bottom: 1px solid var(--accent);
}
.dropdown {
/*position: relative;*/
display: inline-block;
transition: 0.3s;
}
.dropdownContent {
animation: dropBack 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
display: none;
position: absolute;
background-color: var(--accent);
width:100vw;
left:0;
box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
z-index:6
}
.dropdownContent a {
color: var(--primary);
padding: 12px 16px;
text-decoration: none;
transition: 0.3s;
display: block;
}
.dropbtn {
height: 100%;
color: white;
width:100%;
padding: 16px;
border: none;
cursor: pointer;
transition: 0.3s;
border-radius: 0 10px 0 10px;
font-size : 30px;
list-style-type: none;
font-family: 'Nanum Gothic', sans-serif;
display: flex;
justify-content: space-around;
/*align-items: center;*/
}
.dropbtn span {
font-size: 0.4em;
padding: 10px;
}
.dropdownContent a:hover {
background-color: var(--accent)
}
.dropdown:hover .dropdownContent {
display: flex;
justify-content: flex-end;
transition: top 1s linear;
animation: dropdownContent 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both
}
I created a codepen here to replicate the issue
https://codepen.io/Altho/pen/zYpLMzj
Try making the parent class position:"relative" and the inside class position:"absolute' then apply z-index
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 struggling to understand why my container (table-cell) don't behave how I wish I want :)
Situation : I created a div container (bouton) with 2 div inside (image and text).
What I want : hover anywhere on the container will apply a background-color.
Problem : I added a background-color hover to the div container (bouton) but instead of just applying it to all the div "bouton" it applies it to the all row.
Here is the Fiddle : https://jsfiddle.net/gicspy/qotv4yz0/3/
HTML :
<div id="bouton">
<a href="/test/" title="test">
<div class="bouton-image">
<img class="clear-btn-devis" src="http://via.placeholder.com/100x120" width="100" height="120">
</div>
<div class="bouton-texte">
THIS IS CONTENT FOR THE BUTTON
<br /><span style="font-size:90% !important;"><p style="line-height: 1 !important;">(with more information even)</p></span>
</div>
</a>
</div>
CSS :
#bouton div {
display: table-cell;
cursor: pointer;
background-color: #1ac658;
color: #ffffff !important;
padding: 5px;
border: 0px;
margin: 4px 2px;
margin-top: 20px;
margin-bottom: 20px;
text-align: center;
vertical-align: middle;
max-width: 300px;
}
.bouton-image {
display: table;
border-radius: 3px 0px 0px 3px;
min-width: 70px !important;
margin: auto;
text-align: center;
overflow: hidden;
}
.bouton-texte {
border-radius: 0px 3px 3px 0px;
font-size: 130%;
text-decoration: none;
font-weight: bold;
}
#bouton:hover,
#bouton:active {
-webkit-transition-duration: 0.4s;
background-color: #f6416c !important;
box-shadow: 0 6px 13px 0 rgba(0, 0, 0, 0.2), 0 4px 16px 0 rgba(0, 0, 0, 0.19);
}
I've been looking but I'm missing something on how the table-cell behaves.
Any one can help ?
Thanks a lot,
You applied the background and shadow to #bouton. You need to apply it to the divs inside it:
#bouton div:hover,
#bouton div:active
This will give you what you want, but you have several other issues:
You cannot place div inside a.
You're trying to display table inside cell, which doesn't make sense.
You don't even need these display types. The div is capable of doing what you want without changing its display type.
Here is some code that gets you close to what you want. You can tweak it to your liking, but it will get you started:
#bouton a {
display: block;
border-radius: 3px;
background-color: #1ac658;
padding: 5px;
margin: 4px 2px;
text-align: center;
vertical-align: middle;
width: 400px;
}
.bouton-image {
display: inline-block;
min-width: 70px;
text-align: center;
overflow: hidden;
float: left;
}
.bouton-texte {
display: inline-block;
font-size: 130%;
color: #ffffff;
text-decoration: none;
font-weight: bold;
text-align: center;
vertical-align: middle;
max-width: 300px;
}
#bouton a:hover,
#bouton a:active {
-webkit-transition-duration: 0.4s;
background-color: #f6416c !important;
box-shadow: 0 6px 13px 0 rgba(0, 0, 0, 0.2), 0 4px 16px 0 rgba(0, 0, 0, 0.19);
}
<div id="bouton">
<a href="/test/" title="test">
<span class="bouton-image">
<img class="clear-btn-devis" src="http://via.placeholder.com/100x120" width="100" height="120">
</span>
<span class="bouton-texte">
THIS IS CONTENT FOR THE BUTTON
<br /><span style="font-size:90% !important;"><p style="line-height: 1 !important;">(with more information even)</p></span>
</span>
<br style="clear: both;" />
</a>
</div>
I have this problem in bootstrap.
I have made a navbar wich is fixed on top, and the dropdown does work on computer. But when I use mobile view the dropdown does not show.
I have search this and other sites for solution, but none of them have worked for me. The problem seems to be overflow:auto; in mobile view.
Here is my code:http://www.bootply.com/tMdIqM9xSL
HTML:
<div class="row mynav">
<div class="col-md-12 nopadding">
<span class="logo glyphicon glyphicon-home" aria-hidden="true"><label>Hjem</label></span>
<div class="btn-group"><span class="logo glyphicon glyphicon-user" data-toggle="dropdown" aria-hidden="true"><label>Din profil</label><span class="caret"></span></span>
<ul class="dropdown-menu " role="menu">
<li>Login
</li>
<li>My profile
</li>
<li>Add
</li>
<li>Favorites
</li>
<li>Logout
</li>
</ul>
</div>
<span class="logo glyphicon glyphicon-stats align-bottom" aria-hidden="true"><label>Stats</label></span>
<span class="logo glyphicon glyphicon-envelope" aria-hidden="true"><label>Contact us</label></span>
<span class="logo glyphicon glyphicon-search pull-right" data-toggle="collapse" href="#m_showsearch" aria-hidden="true"><label>Search</label></span>
</div>
<div id="m_showsearch" class="panel-collapse collapse container-fluid">
<div class="col-md-4 floatnone">
<div class="panel panel-default search-panel">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" href="#collapseFag">Subject</a></h4>
</div>
<div id="collapseFag" class="panel-collapse collapse in">
<div class="panel-body">
<p> </p><p> </p><p> </p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-1 text-center floatnone">
<button type="button" class="searchbutton btn btn-primary btn-lg pull-center" onclick="findhelp();"><span class="glyphicon glyphicon-search" data-toggle="dropdown" aria-hidden="true"></span>
</button>
<br>
</div>
CSS:
.maincontainer {
padding: 0px;
}
.mynav {
border-bottom: 1px solid rgb(38, 70, 83);
background-color: #FFF;
text-align: left;
box-shadow: 0px 2px 2px #AAAAAA;
z-index: 10;
position: fixed;
width: 100%;
}
#spaceontop {
margin-bottom: 60px;
}
#m_showsearch {} a[title2]:hover:after {
font-size: 10px;
font-weight: thin;
border: 1px solid #000;
background-color: rgb(38, 70, 83);
content: attr(title2);
padding: 10px;
size: 5px;
color: #FFF;
position: absolute;
left: 50%;
top: 50px;
}
.dropdown-menu {
border-radius: 0px;
border: 1px solid rgb(38, 70, 83);
}
.dropdown-menu li a:hover {
background-color: #51b098;
color: #fff;
}
.panel {
box-shadow: 3px 3px 3px 0px;
border: 1px solid #51b098;
border-radius: 0px;
}
.search-panel {
border-radius: 3px;
box-shadow: 0px 0px 0px 0px;
}
.search-panel.panel-heading {
box-shadow: 0px 0px 0px 0px;
}
.panel>.panel-heading {
background-color: #FFF;
/*#51b098;*/
//box-shadow: 0px 2px 2px 0px;
border-radius: 0px;
font-size: 100%;
text-transform: uppercase;
font-family: 'Lato', sans-serif;
}
.panel>.panel-headinga a {
font-size: 20px;
font-weight: bold;
color: #51b098;
}
.panel-body {
// border:1px solid #51b098;
}
.btn-group {
vertical-align: initial;
}
.logo {
font-size: 20px;
height: 60px;
padding: 18px;
padding-left: 20px;
padding-right: 20px;
vertical-align: middle;
border-top: 3px solid transparent;
-webkit-transition: background 0.2s, color 0.2s;
-moz-transition: background 0.2s, color 0.2s;
-ms-transition: background 0.2s, color 0.2s;
-o-transition: background 0.2s, color 0.2s;
transition: background 0.2s, color 0.2s;
text-align: center;
}
.logo:hover {
//background-color:rgb(38, 70, 83);
color: orange;
//text-shadow:-1px -1px #000;
border-top: 3px solid rgb(38, 70, 83);
-webkit-transition: background 0.5s, color 0.2s;
-moz-transition: background 0.5s, color 0.2s;
-ms-transition: background 0.5s, color 0.2s;
-o-transition: background 0.5s, color 0.2s;
transition: background 0.5s, color 0.2s;
}
.logo label {
font-size: 12px;
padding: 14px 0px 14px 0px;
margin: 5px;
font-family: Lato;
text-transform: uppercase;
padding: 0px;
}
.btn,
.btn:hover,
.btn:focus {
//background-color:rgb(38, 70, 83);
padding: 20px;
//color:#FFF;
padding: 10px;
border-radius: 0px;
border: 0px;
}
.panel-default>.panel-heading {
background: transparent;
}
#media(max-width:1000px) {
.logo label:last-child {
display: none;
//visibility:hidden;
}
.logo {
height: 100%;
}
}
#media(max-width:768px) {
.logo label {
display: none;
padding: 20px 15px 15px 0px;
}
.logo {
font-size: 16px;
padding-left: 10px;
padding-right: 10px;
padding: 10px;
}
.div_headline {
padding: 5px;
text-align: center;
width: 100%;
}
.div_headline:after {
display: none;
}
.floatnone {
padding: 0px;
}
#m_showsearch {
padding: 1px;
}
.mynav {
width: 100%;
margin-bottom: 0px;
max-height: 100%;
overflow: auto;
}
.dropdown-menu {
}
}
As I said I have tried every solution I have found, but none those I found worked.
EDIT:
I need the overflow to make the search-button work. When I press the searchbutton a div appears. And the search-div may be large so I need to be able to scroll it.
Just remove overflow: auto. It should work.
.mynav {
width: 100%;
margin-bottom: 0px;
}
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.