Im new to flexbox and css.I need some help to make this code work.
The problem is the following, i cant make the inputs, textarea and button to be responsive.
I need them to be that width size on normal computer page but to be smaller and responsive on mobile devices.
Any advice with help me.
Thanks a lot
.email{
padding: 0.5% 0% 0.5% 0%;
display: flex;
align-items: center;
flex-flow: column;
}
.email >div{
margin: 10px 0px 10px 0px;
}
input {
padding: 15px;
width: 402px;
max-width: 402px;
box-sizing: border-box;
border: 1px solid #272525;
font-size: small;
}
::placeholder {
font-size: 14px ;
opacity: 1;
}
textarea{
padding: 15px;
width: 402px;
resize: vertical;
font-size: small;
border: 1px solid #272525;
}
.button-send{
width: 434px;
height: 40px;
background-color: black;
color: white;
font-size: 15px;
font-size: small;
}
<div class="email">
<div>
<input type="text" placeholder="Name">
</div>
<div>
<input type="text" placeholder="Email*">
</div>
<div>
<textarea rows="10" placeholder="Message*"></textarea>
</div>
<div>
<button class="button-send">Send </button>
</div>
</div>
you can add #media queries in Css as I have done it for you below:-
Click on Run code snippet and then Full page and make your window smaller and check it
.email {
padding: 0.5% 0% 0.5% 0%;
display: flex;
align-items: center;
flex-flow: column;
}
.email>div {
margin: 10px 0px 10px 0px;
}
input {
padding: 15px;
width: 402px;
max-width: 402px;
box-sizing: border-box;
border: 1px solid #272525;
font-size: small;
}
::placeholder {
font-size: 14px;
opacity: 1;
}
textarea {
padding: 15px;
width: 402px;
resize: vertical;
font-size: small;
border: 1px solid #272525;
}
.button-send {
width: 434px;
height: 40px;
background-color: black;
color: white;
font-size: 15px;
font-size: small;
}
#media only screen and (max-width: 600px) {
input {
width: 200px;
max-width: 200px;
}
textarea {
width: 200px;
max-width: 200px;
}
button {
width: 200px;
max-width: 200px;
}
}
<body>
<div class="email">
<div>
<input type="text" placeholder="Name">
</div>
<div>
<input type="text" placeholder="Email*">
</div>
<div>
<textarea rows="10" placeholder="Message*"></textarea>
</div>
<div>
<button class="button-send">Send </button>
</div>
</div>
</body>
In the event, you need to alter CSS values exclusively for small screen sizes but retain specific values for another screen size you would then need to use media queries.
So first what is a media query?
A media query consists of a media type and zero or more expressions that check for the conditions of particular media features.
https://www.w3.org/TR/css3-mediaqueries/
I'd advise reading through that document to get a better understanding of what media queries really are.
But in answer to your question to have responsive text areas you would want to add in something like this (You could also just use max-width by changing all your widths to 100% and setting your max-width to your current width.);
.email {
padding: 0.5% 0% 0.5% 0%;
display: flex;
align-items: center;
flex-flow: column;
}
.email>div {
margin: 10px 0px 10px 0px;
}
input {
padding: 15px;
width: 402px;
max-width: 402px;
box-sizing: border-box;
border: 1px solid #272525;
font-size: small;
}
::placeholder {
font-size: 14px;
opacity: 1;
}
textarea {
padding: 15px;
width: 402px;
resize: vertical;
font-size: small;
border: 1px solid #272525;
}
.button-send {
width: 434px;
height: 40px;
background-color: black;
color: white;
font-size: 15px;
font-size: small;
}
#media all and (max-width:500px) {
textarea,.button-send,input {
width: 100%;
}
}
<div class="email">
<div>
<input type="text" placeholder="Name">
</div>
<div>
<input type="text" placeholder="Email*">
</div>
<div>
<textarea rows="10" placeholder="Message*"></textarea>
</div>
<div>
<button class="button-send">Send </button>
</div>
</div>
Related
I want to render my screen responsive with any kind of device, so my code display very good on a big screen but not the same thing with the young screen so I want my screen to be fitted for all sizes.I spend a lot of time to target it but I can't found any solution my code:
* {
box-sizing: border-box;
padding: 0%;
margin: 0%;
background-color: #dfe3ee;
}
.text {
float: left;
margin-top: 200px;
margin-left: 160px;
font-size: 2rem;
font-family: sans-serif;
color: rgb(100, 5, 5)
}
form {
border: 3px solid #f1f1f1;
width: 30%;
display: flex;
flex-wrap: wrap;
flex-direction: column;
margin-top: 5rem;
margin-right: 250px;
float: right;
}
input[type=text],
input[type=password] {
width: 90%;
padding: 8px 12px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
background-color: #04AA6D;
color: white;
padding: 8px 10px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
button:hover {
opacity: 0.8;
}
/* Extra style for the cancel button (red) */
/* Center the avatar image inside this container */
.container {
padding: 16px;
}
/* The "Forgot password" text */
span.psw {
float: right;
padding-top: 16px;
}
#media screen and (max-width: 600px) {
span.psw {
display: block;
float: right;
}
.form {
border: 3px solid #f1f1f1;
width: 30%;
display: flex;
}
}
import {Link} from "react-router-dom"; const RegisterPage =() => { return (
<div>
<div className="text">
<h1>Private</h1>
</div>
<form>
<div class="container">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required />
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required />
<button type="submit">Login</button>
<label>
<input type="checkbox" checked="checked" name="remember" /> Remember me
</label>
</div>
<div className="container" style={{ "backgroundColor": "#f1f1f1"}}>
Forgot password?
<div className="btn">
<button>Create New Account</button>
</div>
</div>
</form>
</div>
) }; export default RegisterPage;
Check this out, I added flexbox for your main div and modified your media query part with flexbox and removed margins. Keep in mind I changed className with class for snipping, for testing in your local you should change them again with className
* {
box-sizing:border-box;
padding: 0%;
margin: 0%;
background-color: #dfe3ee;
}
.mainDiv {
width: 100%;
height: 100vh;
display: flex;
justify-content: space-evenly;
align-items: center;
}
.text{
float: left;
font-size: 2rem;
font-family: sans-serif;
color:rgb(100, 5, 5)
}
form {
border: 3px solid #f1f1f1;
width: 30%;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
input[type=text], input[type=password] {
width: 90%;
padding: 8px 12px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
background-color: #04AA6D;
color: white;
padding: 8px 10px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
button:hover {
opacity: 0.8;
}
/* Extra style for the cancel button (red) */
/* Center the avatar image inside this container */
.container {
padding: 16px;
}
/* The "Forgot password" text */
span.psw {
float: right;
padding-top: 16px;
}
#media screen and (max-width: 600px) {
.mainDiv {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.text {
margin-left: 0;
}
span.psw {
display: block;
float: right;
}
form{
border: 3px solid #f1f1f1;
width: 30%;
display: flex;
float: none;
margin-right: 0;
min-width: 250px;
}
}
<div class="mainDiv">
<div class="text" >
<h1>Private</h1>
</div>
<form >
<div class="container">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required />
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required />
<button type="submit">Login</button>
<label>
<input type="checkbox" checked="checked" name="remember" /> Remember me
</label>
</div>
<div className="container" style={{"backgroundColor":"#f1f1f1"}}>
<a href="" >Forgot password?</a>
<div className="btn" >
<button >Create New Account</button>
</div>
</div>
</form>
</div>
every time when I have to work with Inputs this problem occurs.
My goal is to make a simple input form and achieve that 2 Inputs type number will be the same width, with small space between them in one line, just under "Description" input.
I've tried to add them to divs and apply Display:inline-block to them, but it didn't work. Now I've tried to apply display: flex on it a this is the result. Changing the width of input does not work. Thank you for your help.
.inputBox{
width: 30%;
padding: 2em;
text-align: center;
background-color: white;
border-radius: .3em;
}
.inputBox h3{
font-size: 2em;
font-weight: 300;
}
.inputBox input[type="text"]{
width: 100%;
padding: .5em;
margin: 1em 0;
border-radius: .3em;
border: 1px solid grey;
box-sizing: border-box;
}
.inputBox input[type="number"]{
padding: .5em;
border-radius: .3em;
border: 1px solid grey;
box-sizing: border-box;
width: 100%;
}
label{
display: block;
text-align: left;
}
.flex{
display: flex;
justify-content: space-between;
}
<div className="inputBox">
<h3>Please set your alarm</h3>
<label for="text">Description</label>
<input type="text" id="text" />
<div className="flex">
<div className="inputNumber">
<label>Hours</label>
<input type="number" />
</div>
<div className="inputNumber">
<label>Minutes</label>
<input type="number" />
</div>
</div>
.inputBox{
width: 30%;
padding: 2em;
text-align: center;
background-color: white;
border-radius: .3em;
}
.inputBox h3{
font-size: 2em;
font-weight: 300;
}
.inputBox input[type="text"]{
width: 100%;
padding: .5em;
margin: 1em 0;
border-radius: .3em;
border: 1px solid grey;
box-sizing: border-box;
}
.inputBox input[type="number"]{
padding: .5em;
border-radius: .3em;
border: 1px solid grey;
box-sizing: border-box;
width: 100%;
}
label{
display: block;
text-align: left;
}
.flex{
display: flex;
justify-content: space-between;
}
.inputNumber{
flex-basis:48%;
}
<div class="inputBox">
<h3>Please set your alarm</h3>
<label for="text">Description</label>
<input type="text" id="text" />
<div class="flex">
<div class="inputNumber">
<label>Hours</label>
<input type="number" />
</div>
<div class="inputNumber">
<label>Minutes</label>
<input type="number" />
</div>
</div>
If you want to keep inputBox's width at 30%, you can do something like this:
HTML
<div class="inputBox">
<h3>Please set your alarm</h3>
<label for="text">Description</label>
<input type="text" id="text" />
<div class="flex">
<div class="inputNumber">
<label>Hours</label>
<input type="number" />
</div>
<div class="inputNumber second">
<label>Minutes</label>
<input type="number" />
</div>
</div>
</div>
CSS
.inputBox {
width: 30%;
padding: 2em;
text-align: center;
background-color: white;
border-radius: .3em;
}
.inputBox h3 {
font-size: 2em;
font-weight: 300;
}
.inputBox input[type="text"] {
width: 100%;
padding: .5em;
margin: 1em 0;
border-radius: .3em;
border: 1px solid grey;
box-sizing: border-box;
}
.inputBox input[type="number"] {
padding: .5em;
border-radius: .3em;
border: 1px solid grey;
box-sizing: border-box;
width: 100%;
}
label {
display: block;
text-align: left;
}
.flex {
display: flex;
flex-direction: row;
}
.inputNumber {
width: 50%;
}
.second {
margin-left: 5%;
}
two problems:
you are using className when you should be using class
change .inputBox width to 100%
also, you should ALWAYS try to post a working snippet that shows your problem. You will get back answers faster and ones that are more likely to work!
.inputBox{
width: 100%;
padding: 2em;
text-align: center;
background-color: white;
border-radius: .3em;
}
.inputBox h3{
font-size: 2em;
font-weight: 300;
}
.inputBox input[type="text"]{
width: 100%;
padding: .5em;
margin: 1em 0;
border-radius: .3em;
border: 1px solid grey;
box-sizing: border-box;
}
.inputBox input[type="number"]{
padding: .5em;
border-radius: .3em;
border: 1px solid grey;
box-sizing: border-box;
width: 100%;
}
label{
display: block;
text-align: left;
}
.flex{
display: flex;
justify-content: space-between;
}
<div class="inputBox">
<h3>Please set your alarm</h3>
<label for="text">Description</label>
<input type="text" id="text" />
<div class="flex">
<div class="inputNumber">
<label>Hours</label>
<input type="number" />
</div>
<div class="inputNumber">
<label>Minutes</label>
<input type="number" />
</div>
</div>
you can use display: grid on your parent and modify the first child of grid to span across the first line like:
.parentContainer {
/* this will create the grid for us with 1rem gap between children */
display: grid;
grid-template-columns: repeat(1, 1fr),
grid-gap: 1rem;
}
.theChildElementYouWantToFullWidth {
grid-column: 1 / span 3;
}
for more information check this doc from MDN on Grid styling!
I'm making a simple booking form, it is complete but for some reason every single input is slightly off to the right from being center aligned.
I've wrapped the form because there's multiple sections and the DIVs for inputs make controlling them slightly easier.
The page is complete so needs to follow this layout, the only issue is the alignment as shown in the image and code below.
.booking-wrap {
width: 100%;
padding-top: 3.5vh;
}
#media only screen and (max-width: 500px) {
.booking-wrap {
width: 100%;
padding-top: 3.5vh;
}
}
#media only screen and (max-width: 500px) {
.booking-wrap {
width: 100%;
padding-top: 1.75vh;
}
}
.booking-form {
width: 80%;
display: block;
margin-left: auto;
margin-right: auto;
padding-bottom: 3.5vh;
}
.user-input {
max-width: 60%;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-top: 2.5vh;
}
.responsecontainer {
width: 100%;
margin-left: auto;
margin-right: auto;
}
.user-response {
width: 94%;
margin-left: auto;
margin-right: auto;
}
::placeholder {
color: #FFFFFF;
}
input[type=name], select {
width: 100%;
padding: 2vh;
margin: 0.5vh;
display: inline-block;
border-radius: 2vh;
border: 0;
color: #FFFFFF;
background: #000000;
outline: none;
}
<div class="booking-wrap">
<div class="booking-form">
<p class="form-explainer left textoffblack">Please enter your details</p>
<div class="user-input">
<div class="responsecontainer">
<div class="user-response">
<input type="name" placeholder="First Name" id="forename" name="forename" required>
</div>
</div>
</div>
</div>
</div>
Any help would be appreciated, I assume it's a quick fix but can't quite figure it out.
Your input element has width: 100%; and margin: 0.5vh;. margin is always added to the width, regardless of the box-sizing setting, so the overall width is 100% (of the container's width) plus 2 time 0.5vh. That's why it exceeds the width of its container.
A solution would probably be to apply those 0.5vh as padding to the container and remove the margin setting from the input element/s.
You're setting the width to be 100% of its container, but you're also setting a margination of 1vh in width in total, you can use calc() to avoid that issue: width: calc(100% - 1vh).
And making use of a border-box for the input will make the border part of the box itself.
.booking-wrap {
width: 100%;
padding-top: 3.5vh;
}
#media only screen and (max-width: 500px) {
.booking-wrap {
width: 100%;
padding-top: 3.5vh;
}
}
#media only screen and (max-width: 500px) {
.booking-wrap {
width: 100%;
padding-top: 1.75vh;
}
}
.booking-form {
width: 80%;
display: block;
margin-left: auto;
margin-right: auto;
padding-bottom: 3.5vh;
}
.user-input {
max-width: 60%;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-top: 2.5vh;
}
.responsecontainer {
width: 100%;
margin-left: auto;
margin-right: auto;
}
.user-response {
width: 94%;
margin-left: auto;
margin-right: auto;
}
::placeholder {
color: #FFFFFF;
}
input[type=name], select {
width: calc(100% - 1vh);
box-sizing: border-box;
padding: 2vh;
margin: 0.5vh;
display: inline-block;
border-radius: 2vh;
border: 0;
color: #FFFFFF;
background: #000000;
outline: none;
}
<div class="booking-wrap">
<div class="booking-form">
<p class="form-explainer left textoffblack">Please enter your details</p>
<div class="user-input">
<div class="responsecontainer">
<div class="user-response">
<input type="name" placeholder="First Name" id="forename" name="forename" required>
</div>
</div>
</div>
</div>
</div>
There may be a better solution than this but removing margins from the sides of the inputs seems to work.
input[type=name], select {
width: 100%;
padding: 2vh;
margin-top: 0.5vh;
margin-bottom: 0.5vh;
display: inline-block;
border-radius: 2vh;
border: 0;
color: #FFFFFF;
background: #000000;
outline: none;
}
.booking-wrap {
width: 100%;
padding-top: 3.5vh;
}
#media only screen and (max-width: 500px) {
.booking-wrap {
width: 100%;
padding-top: 3.5vh;
}
}
#media only screen and (max-width: 500px) {
.booking-wrap {
width: 100%;
padding-top: 1.75vh;
}
}
.booking-form {
width: 80%;
display: block;
margin-left: auto;
margin-right: auto;
padding-bottom: 3.5vh;
}
.user-input {
max-width: 60%;
//text-align: center;
//margin-left: auto;
//margin-right: auto;
margin-top: 2.5vh;
}
.responsecontainer {
width: 100%;
margin-left: auto;
margin-right: auto;
}
.user-response {
width: 94%;
//margin-left: auto;
//margin-right: auto;
}
::placeholder {
color: #FFFFFF;
}
input[type=name], select {
width: 100%;
padding: 2vh;
margin: 0.5vh;
display: inline-block;
border-radius: 2vh;
border: 0;
color: #FFFFFF;
background: #000000;
outline: none;
}
<div class="booking-wrap">
<div class="booking-form">
<p class="form-explainer left textoffblack">Please enter your details</p>
<div class="user-input">
<div class="responsecontainer">
<div class="user-response">
<input type="name" placeholder="First Name" id="forename" name="forename" required>
</div>
</div>
</div>
</div>
</div>
I commented out margin-left: auto, magin-right: auto for .responsecontainer and .user-response
However, I am not sure this is what you want.
If it is not, Please let me know more detail so that I can help you.
I'm trying to get the two block elements to be on different lines when the browser window is less than 768px. The media query tells the yellow and green divs to be blocks in responsive view, but nothing happens. If you apply the display block to all elements on mobile view, nothing still happens.
I thought block elements were 100% wide and operate on a single row?
#newsletter-wrap {
width: 100%;
height: auto;
background: lightgrey;
float: left;
display: flex;
justify-content: center;
align-items: center;
font-size: 22px;
font-weight: 300;
padding: 25px 25px;
box-sizing: border-box;
}
#newsletter-wrap > *, #newsletter-wrap > form > * {
display: inline;
vertical-align: middle;
}
#newsletter-button {
border: none;
border-radius: 6px;
padding: 10px 20px;
border: 1px solid #333;
cursor: pointer;
}
input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
#mce-EMAIL {
background: pink;
width: 300px;
height: 25px;
margin: 0 25px;
border: 1px solid #333;
text-align: center;
padding: 4px;
}
#mc-embedded-subscribe-form {
background: green;
width: auto;
text-align: center;
height: auto;
float: left;
}
#newsletter-wrap-text {
background: yellow;
width: auto;
height: auto;
float: left;
}
/* MOBILE */
#media handheld, screen and (max-width: 768px) {
/* BELOW HAS A PROBLEM */
#newsletter-wrap-text, #mc-embedded-subscribe-form {
display: block;
}
}
<section id="newsletter-wrap">
<div id="newsletter-wrap-text">wuf wfbrie erig ergibw eiwbfwe wef00x0 __W)9.</div>
<form action="https://eiurfhyergv.us17.list-manage.com/subscribe/post?u=8c38151fa33f984127db5705c&id=4c741659e1" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<input type="email" placeholder="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
<div id="mce-responses">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div>
<input type="submit" value="Subscribe" name="subscribe" id="newsletter-button">
</form>
</section>
As you have set display: flex to the parent section container, you have to set flex-direction: column; in order to display the child elements in a column rather than in a row. (or you could just not use display: flex at all and leave the block elements as they are, but I assume that flex is there for a reason like responsiveness or something)
By the way, you could also leave out the float: left as it has no effect in this case. I'd generally advise to clean the CSS up a bit. You are using display: flex;, but then there are the floats and display: inline, which is then again being overwritten by display: block - that's all unnecessary!
#newsletter-wrap {
width: 100%;
height: auto;
background: lightgrey;
float: left;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 22px;
font-weight: 300;
padding: 25px 25px;
box-sizing: border-box;
}
#newsletter-wrap > *, #newsletter-wrap > form > * {
display: inline;
vertical-align: middle;
}
#newsletter-button {
border: none;
border-radius: 6px;
padding: 10px 20px;
border: 1px solid #333;
cursor: pointer;
}
input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
#mce-EMAIL {
background: pink;
width: 300px;
height: 25px;
margin: 0 25px;
border: 1px solid #333;
text-align: center;
padding: 4px;
}
#mc-embedded-subscribe-form {
background: green;
width: auto;
text-align: center;
height: auto;
float: left;
}
#newsletter-wrap-text {
background: yellow;
width: auto;
height: auto;
float: left;
}
/* MOBILE */
#media handheld, screen and (max-width: 768px) {
/* BELOW HAS A PROBLEM */
#newsletter-wrap-text, #mc-embedded-subscribe-form {
display: block;
}
}
<section id="newsletter-wrap">
<div id="newsletter-wrap-text">wuf wfbrie erig ergibw eiwbfwe wef00x0 __W)9.</div>
<form action="https://eiurfhyergv.us17.list-manage.com/subscribe/post?u=8c38151fa33f984127db5705c&id=4c741659e1" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<input type="email" placeholder="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
<div id="mce-responses">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div>
<input type="submit" value="Subscribe" name="subscribe" id="newsletter-button">
</form>
</section>
I am trying to make two buttons scale appropriately with in between margin responsive design.
How do I properly specify width of each button with the margin to stay constant in between?
Equal width buttons are below that I am trying to scale together, without exceeding the total width.
|--------------------100%------------------------|
|---Button 1---||--margin in px--||---Button 2---|
Here is what I have so far..
button1.back-btn {
#include btn-inline;
}
button2.next-btn {
#include btn-inline;
}
#mixin btn-inline{
width: calc(50% - $form-control-spacing/2 - $border-btn-width*2);
width: -webkit-calc(50% - $form-control-spacing/2 - $border-btn-width*2);
width: -moz-calc(50% - $form-conrol-spacing/2 - $border-btn-width*2);
display: inline-block;
}
Flexbox can do that.
* {
box-sizing: border-box;
}
.wrap {
width: 80%;
margin: 1em auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
border: 1px solid pink;
}
.wide {
flex: 0 0 100%;
}
button:first-of-type {
margin-right: 2em;
}
button {
flex: 1;
}
<div class="wrap">
<input class="wide" type="text" />
<button>Button 1</button>
<button>Button 2</button>
</div>
Here is my workout to your answer. Not sure if its the way you wanted, so please do let me know. Thanks.
You can refer to this link: https://jsfiddle.net/2g5unL8y/4/
Also refer to this link for a different resizing with no space in between when viewed at smallest window: https://jsfiddle.net/jeemo0yu/
CSS:
*{ box-sizing: border-box;}
input {
width: 50%;
height: auto;
margin: 10px;
}
#new {
float: left;
max-width: 30%;
overflow: hidden;
}
#old {
float: right;
max-width: 30%;
overflow: hidden;
}
div {
width:50%;
margin: 10px;
text-align: center;
}
HTML:
<input type="text"><br>
<div>
<button id="new">Click Me!</button>
<button id="old">Click Me!</button>
</div>
Float two buttons to left: float: left, then give the second button a margin-left:
body {
font-family: Gothamroundedmedium;
}
.create-password {
text-align: center;
}
.create-password .form-horizontal .form-group {
white-space: nowrap;
}
.create-password .form-horizontal .form-group .form-control {
border-radius: 0;
border: none;
box-shadow: none !important;
background-color: #f5f5f5;
margin-bottom: 5px;
height: 38px;
}
.create-password .form-horizontal .form-group .back-btn {
background-color: white;
color: #001b24;
font-size: 14px;
border: 2px solid #49dce0;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 0px;
}
.create-password .form-horizontal .form-group .next-btn {
background-color: #49dce0;
color: #001b24;
font-size: 14px;
border: 2px solid #49dce0;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 0px;
}
.back-btn {
float: left;
background-color: white;
color: #001b24;
font-size: 14px;
border: 2px solid #49dce0;
padding-top: 10px;
padding-right: 50px;
padding-bottom: 10px;
padding-left: 50px;
width: 30%;
display: inline-block;
}
.next-btn {
float: left;
margin-left: 40%;
background-color: #49dce0;
color: #001b24;
font-size: 14px;
border: 2px solid #49dce0;
padding-top: 10px;
padding-right: 50px;
padding-bottom: 10px;
padding-left: 50px;
width: 30%;
display: inline-block;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="row create-password">
<div class="row">
<form class="form-horizontal col-xl-6 col-xl-offest-2 col-lg-10 col-lg-offset-1 col-md-10 col-md-offset-1 col-sm-10 col-sm-offset-1 col-xs-10 col-xs-offset-1 ng-pristine ng-valid">
<div class="form-group">
<input class="form-control" placeholder="Password" value="" type="password">
<input class="form-control" placeholder="Confirm password" value="" type="password">
<button class="back-btn" type="button" name="button">BACK</button>
<button class="next-btn" type="button" name="button">NEXT</button>
</div>
</form>
</div>
</div>
Possible solution using margin on first element
.buttonscontainer {
width: 100%;
background-color: hsl(38, 100%, 84%);
font-size: 0;
}
.buttons {
display: inline-block;
width: 33.33%;
text-align: center;
background-color: hsl(0, 0%, 60%);
font-size: 20px;
}
.buttons:first-child {
margin-right: 33.33%;
}
<div class="buttonscontainer">
<div class="buttons">Button 1</div>
<div class="buttons">Button 2</div>
</div>
fiddle
https://jsfiddle.net/Hastig/hgcLpds0/4/
A possible flexbox solution using a ghost button as a separator
.buttonscontainer {
display: flex;
width: 100%;
justify-content: center;
align-items: center;
}
.buttons {
display: flex;
justify-content: center;
align-items: center;
flex: 1;
border: 1px solid hsla(0, 0%, 0%, 0.4)
}
.buttons:nth-child(2) {
visibility: hidden;
}
<div class="buttonscontainer">
<div class="buttons">Button 1</div>
<div class="buttons">u cant see me</div>
<div class="buttons">Button 2</div>
</div>
fiddle
https://jsfiddle.net/Hastig/hgcLpds0/
Possible solution using floats
.buttonscontainer {
width: 100%;
background-color: hsl(38, 100%, 84%);
overflow: auto;
}
.buttons {
display: flex;
justify-content: center;
width: 33.33%;
background-color: hsl(0, 0%, 60%);
}
.buttons:first-child {
float: left;
}
.buttons:last-child {
float: right;
}
<div class="buttonscontainer">
<div class="buttons">Button 1</div>
<div class="buttons">Button 2</div>
</div>
fiddle
https://jsfiddle.net/Hastig/hgcLpds0/1/