I faced a problem about getting a button to center, I tried the text-align: center, but it didn't work.
.regis-btn {
border-radius: 0px;
text-align: center;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
}
<form action="" method="post" role="form">
<div class="form-group">
<label for="cellphone">Cellphone Number</label>
<input type="text" class="form-control" id="cellphone" minlength="10" placeholder="Cellphone">
</div>
<div class="form-group">
<label for="name">Username</label>
<input type="text" class="form-control" id="name" placeholder="Username">
</div>
<div class="form-group">
<label for="seriesnum">Series Number</label>
<input type="text" class="form-control" id="seriesnum" placeholder="Series Number">
</div>
<button type="button" class="btn regis-btn" id="register" style="background: #FFCC00;">
<span> Register </span>
</button>
</form>
You can try this:
<div class="form-group text-center">
<button type="button" class="btn regis-btn" id="register" style="background: #FFCC00;"></button>
</div>
text-align: center only centers the content within the element. So what you have done was to center the text within the button.
If your button is the only element in the row, wrap the button in a div instead.
I added a demo to show that it works:
.btn-container {
text-align: center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<form action="" method="post" role="form">
<div class="form-group">
<label for="cellphone">Cellphone Number</label>
<input type="text" class="form-control" id="cellphone" minlength="10" placeholder="Cellphone">
</div>
<div class="form-group">
<label for="name">Username</label>
<input type="text" class="form-control" id="name" placeholder="Username">
</div>
<div class="form-group">
<label for="seriesnum">Series Number</label>
<input type="text" class="form-control" id="seriesnum" placeholder="Series Number">
</div>
<div class="btn-container">
<button type="button" class="btn regis-btn" id="register" style="background: #FFCC00;">
<span>Register</span>
</button>
</div>
</form>
Use margin: 0 auto; and display: block; for button.
.regis-btn {
border-radius: 0px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
text-align: center;
margin: 0 auto;
display: block;
}
<form action="" method="post" role="form">
<div class="form-group">
<label for="cellphone">Cellphone Number</label>
<input type="text" class="form-control" id="cellphone" minlength="10" placeholder="Cellphone">
</div>
<div class="form-group">
<label for="name">Username</label>
<input type="text" class="form-control" id="name" placeholder="Username">
</div>
<div class="form-group">
<label for="seriesnum">Series Number</label>
<input type="text" class="form-control" id="seriesnum" placeholder="Series Number">
</div>
<button type="button" class="btn regis-btn" id="register" style="background: #FFCC00;">
<span>
Register
</span>
</button>
</form>
Use My code that is working very well.
.regis-btn {
border-radius: 0px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<form action="" method="post" role="form">
<div class="form-group">
<label for="cellphone">Cellphone Number</label>
<input type="text" class="form-control" id="cellphone" minlength="10" placeholder="Cellphone">
</div>
<div class="form-group">
<label for="name">Username</label>
<input type="text" class="form-control" id="name" placeholder="Username">
</div>
<div class="form-group">
<label for="seriesnum">Series Number</label>
<input type="text" class="form-control" id="seriesnum" placeholder="Series Number">
</div>
<div class="text-center">
<button type="button" class="btn regis-btn" id="register" style="background: #FFCC00;">
<span> Register </span>
</button>
</div>
</form>
Related
Not sure if it's the way my HTML is laid out or the way the stepUp / stepDown functions work, but for some reason clicking on the buttons automatically submits the form, stopping only if any other fields don't have valid inputs. Obviously this wouldn't be desired behavior for any form.
Here's a fiddle: http://jsfiddle.net/asa9ohan/1nr2g5zb/38/
input[type="number"] {
appearance: textfield;
text-align: center;
height: 1.5rem;
}
button {
height: 1.5rem;
width: 3rem;
}
<form id="contact-form" action="#" method="post">
<div class="form-field">
<label for="name-input">name <span>*</span><br></label>
<input id="name-input" type="text" required>
</div>
<div class="form-field">
<label for="phone-num-input">phone number <span>*</span><br></label>
<input id="phone-num-input" type="tel" required>
</div>
<div class="form-field">
<label for="email-input">email<br></label>
<input id="email-input" type="email">
</div>
<div class="form-field number-input">
<label for="count-input">count<br></label>
<div>
<button onclick="this.parentNode.querySelector('#count-input').stepDown()" >-</button>
<input id="count-input" min="0" value="0" type="number">
<button onclick="this.parentNode.querySelector('#count-input').stepUp()" class="plus">+</button>
</div>
</div>
<div class="form-field">
<label for="inq-content-input">message <span>*</span><br></label>
<textarea id="inq-content-input" required></textarea>
</div>
<div class="submit-form-button">
<button type="submit" class="button button-form-submit">send</button>
</div>
</form>
Add a return false to your button scripts to avoid the buttons to submit the form:
input[type="number"] {
appearance: textfield;
text-align: center;
height: 1.5rem;
}
button {
height: 1.5rem;
width: 3rem;
}
<form id="contact-form" action="#" method="post">
<div class="form-field">
<label for="name-input">name <span>*</span><br></label>
<input id="name-input" type="text" required>
</div>
<div class="form-field">
<label for="phone-num-input">phone number <span>*</span><br></label>
<input id="phone-num-input" type="tel" required>
</div>
<div class="form-field">
<label for="email-input">email<br></label>
<input id="email-input" type="email">
</div>
<div class="form-field number-input">
<label for="count-input">count<br></label>
<div>
<button onclick="this.parentNode.querySelector('#count-input').stepDown();return false" >-</button>
<input id="count-input" min="0" value="0" type="number">
<button onclick="this.parentNode.querySelector('#count-input').stepUp();return false" class="plus">+</button>
</div>
</div>
<div class="form-field">
<label for="inq-content-input">message <span>*</span><br></label>
<textarea id="inq-content-input" required></textarea>
</div>
<div class="submit-form-button">
<button type="submit" class="button button-form-submit">send</button>
</div>
</form>
A slightly "cleaner" approach would be the following:
const cntr=document.getElementById("count-input");
document.querySelectorAll("button")
.forEach((b,i)=>b.onclick=ev=>(i>2 || cntr[["stepDown","stepUp"][i]](),false) )
input[type="number"] {
appearance: textfield;
text-align: center;
height: 1.5rem;
}
button {
height: 1.5rem;
width: 3rem;
}
<form id="contact-form" action="#" method="post">
<div class="form-field">
<label for="name-input">name <span>*</span><br></label>
<input id="name-input" type="text" required>
</div>
<div class="form-field">
<label for="phone-num-input">phone number <span>*</span><br></label>
<input id="phone-num-input" type="tel" required>
</div>
<div class="form-field">
<label for="email-input">email<br></label>
<input id="email-input" type="email">
</div>
<div class="form-field number-input">
<label for="count-input">count<br></label>
<div>
<button>-</button>
<input id="count-input" min="0" value="0" type="number">
<button>+</button>
</div>
</div>
<div class="form-field">
<label for="inq-content-input">message <span>*</span><br></label>
<textarea id="inq-content-input" required></textarea>
</div>
<div class="submit-form-button">
<button type="submit" class="button button-form-submit">send</button>
</div>
</form>
It turns out if I use div instead of button tags, it prevents the form from being submitted. I'd have to style the buttons independently, but the default button style would need restyling anyway.
input[type="number"] {
appearance: textfield;
text-align: center;
height: 1.5rem;
}
.number-input > div {
display: flex;
}
.button {
height: 1.5rem;
width: 3rem;
background: lightgray;
text-align: center;
border: 1px solid gray;
user-select: none;
}
.button:active { background: darkgray; }
<form id="contact-form" action="#" method="post">
<div class="form-field">
<label for="name-input">name <span>*</span><br></label>
<input id="name-input" type="text" required>
</div>
<div class="form-field">
<label for="phone-num-input">phone number <span>*</span><br></label>
<input id="phone-num-input" type="tel" required>
</div>
<div class="form-field">
<label for="email-input">email<br></label>
<input id="email-input" type="email">
</div>
<div class="form-field number-input">
<label for="count-input">count<br></label>
<div>
<div onclick="this.parentNode.querySelector('#count-input').stepDown()" class="button minus">-</div>
<input id="count-input" min="0" value="0" type="number">
<div onclick="this.parentNode.querySelector('#count-input').stepUp()" class="button plus">+</div>
</div>
</div>
<div class="form-field">
<label for="inq-content-input">message <span>*</span><br></label>
<textarea id="inq-content-input" required></textarea>
</div>
<div class="submit-form-button">
<button type="submit" class="button button-form-submit">send</button>
</div>
</form>
I am working on a personal project, and I need to make some changes to my current form but I cannot get it working so far.
I need the label and input to be inline. Here is a screenshot how the form should look like.
And here is my current code:
.personal_details {
max-width: 503px;
float: none;
margin: 0 auto;
padding: 40px;
border-radius: 5px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="personal_details">
<form class="personal_details">
<div class="form-group">
<label for="firstName">First name</label>
<input type="text" class="form-control" id="inputFirstName" />
</div>
<div class="form-group">
<label for="lastName">Last name</label>
<input type="text" class="form-control" id="inputLastName" />
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="text" class="form-control" id="inputEmail" />
</div>
<div class="form-group">
<label for="phone_nummber">Account type</label>
<select class="form-control" name="profile_type">
<option value="Basic" selected>Freelancer</option>
<option value="Company">Employer</option>
</select>
</div>
<button class="btn btn-primary mt-4 px-5" type="submit">EDIT</button>
</form> <!-- Form ends here -->
</div>
I'm not strong in frontend development :) I'm using bootstrap for created a form. But it isn't look fine. How could I align my input form in one column?
<form>
<div class="form-group form-inline">
<label for="exampleInputPrice" class="personal-form-labels">Purchase Price</label>
<input type="text" class="form-control" id="exampleInputPrice" placeholder="$$$">
</div>
<div class="form-group form-inline">
<label for="exampleInputLoan" class="personal-form-labels">Loan Amont</label>
<input type="text" class="form-control" id="exampleInputLoan" placeholder="$$$">
</div>
<div class="col-md-12 text-center block-buttons">
<button type="submit" class="btn btn-primary btn-lg">Continue</button>
</div>
</form>
enter image description here
Use of display:table-*
table {
border-collapse: separate;
}
.form-inline {
display: table-row;
}
.form-inline label, .form-inline input {
display: table-cell;
margin: 0 0 5px 10px;
}
<form>
<div class="form-group form-inline">
<label for="exampleInputPrice" class="personal-form-labels">Purchase Price</label>
<input type="text" class="form-control" id="exampleInputPrice" placeholder="$$$">
</div>
<div class="form-group form-inline">
<label for="exampleInputLoan" class="personal-form-labels">Loan Amont</label>
<input type="text" class="form-control" id="exampleInputLoan" placeholder="$$$">
</div>
<div class="col-md-12 text-center block-buttons">
<button type="submit" class="btn btn-primary btn-lg">Continue</button>
</div>
</form>
Try like this , bootstrap Horizontal form not support in bootstrap -4
Not supported ,use bootstrap 3
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form class="form-horizontal" action="/action_page.php">
<div class="form-group">
<label class="control-label col-sm-2" for="Purchase Price">Purchase Price</label>
<div class="col-sm-4">
<input type="email" class="form-control" id="exampleInputPrice" placeholder="$$$">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="Loan Amont">Loan Amont</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="exampleInputLoan" placeholder="$$$">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Continue</button>
</div>
</div>
</form>
bootsrap-3 doc https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_form_horizontal&stacked=h
If you are using bootstrap 4 Try This :
<form>
<div class="form-group row">
<label for="exampleInputPrice" class="col-sm-2 col-form-label">Purchase Price</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="exampleInputPrice" placeholder="$$$">
</div>
</div>
<div class="form-group row">
<label for="exampleInputLoan" class="col-sm-2 col-form-label">Loan Amont</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="exampleInputLoan" placeholder="$$$">
</div>
</div>
<div class="form-group form-inline">
<button type="submit" class="btn btn-primary btn-lg">Continue</button>
</div>
</form>
https://jsfiddle.net/sv2j08dd/3/
Modulation:
Glass thickness:
css:
.inputs span{ display: inline-block; width: 60%; padding: 0 0 15px 0; }
.inputs span input{ width: 30%; float: left; height:25px;padding: 0 5px;}
.inputs{width: 100%;float: left;padding: 0 25px; box-sizing: border-box;}
.inputs label{width: 20%;float: left;}
I am trying to put a checkbox, label and input box next to each other.
I separated it into divs and and put divs side-by-side.
I was able to get the buttons center but they are to close together which I am trying to fix too.
My question is how can I get <div class="col-centered border"> into a smaller border and put a checkbox, label and input box next to each other. In the end I want the buttons and all as a container.
html
<div class="col-centered border">
<form>
<div class="first">
<div class="form-group">
<input type="checkbox" class="form-check-input">
<label for="ssn">SSN:</label>
<input type="text" class="form-control-file" id="ssn" placeholder="Social Security Number">
</div>
<div class="form-group row">
<input type="checkbox" class="form-check-input">
<label for="lastname">Lastname:</label>
<input type="text" class="form-control-file" id="lastname" placeholder="Password">
</div>
<div class="form-group row">
<input type="checkbox" class="form-check-input">
<label for="role">Role:</label>
<input type="text" class="form-control-file" id="role" placeholder="Password">
</div>
</div>
<div class="second">
<div class="form-group row">
<input type="checkbox" class="form-check-input">
<label for="userId">User ID:</label>
<input type="text" class="form-control-file" id="userId" placeholder="User Id">
</div>
<div class="form-group row">
<input type="checkbox" class="form-check-input">
<label for="office">Office</label>
<input type="text" class="form-control-file" id="office" placeholder="Office">
</div>
<input type="checkbox">Include Subordinates
</div>
<div class="center-block lower-button">
<div class="center-block">
<button type="submit" class="btn btn-default btn-md left-button">Search</button>
<button type="submit" class="btn btn-default btn-md right-button">Reset</button>
</div>
</div>
</form>
</div>
css
.first {
width: 100px;
float: left;
padding-left: 450px;
}
.second {
width: 200px;
float: right;
padding-right: 950px;
}
.col-centered{
padding-top: 30px;
float: none;
margin: 0 auto;
}
.btn-beside {
position: center;
left: 100%;
top: 0;
margin-left: -10px;
}
.lower-button{
padding-top:250px;
padding-left:575px;
}
.left-button{
padding-right: -14px;
}
.form-group{
text-align: center;
}
I am using bootstrap
Here's a Fiddle for you to take inspiration from.
HTML
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox">
</span>
<span class="input-group-addon">
<label for="tbox">My Label</label>
</span>
<input type="text" id="tbox" class="form-control">
</div>
</div>
</div>
</div>
As per the official documentation for Bootstrap.
I'm trying to make a single page web app and I am also using boostrap 3.0. What I am having an issue with is making a div section, ie <div id="nameContainer">, fill up the entire viewport as if it was it's own page. Instead, the next sibling <div id="nameContainer"> will show up on the view port. I thought I could fix this with css position, width, and height attributes but I am not having success. How do I make each <div id="nameContainer"> fill the entire viewport as if it it's own page? I have my own css page load last so my custom CSS override any bootstrap behavior.
EDIT: the width: 100% and height: 100% is ineffective because the body is not defined in static values(non percentage). How do I get this size/assign the size of body so the percentages of the viewport are correct?
section of index.html:
<body class="container">
<div id="lightbox">
<div id="exitButton" type="button" class="btn btn-primary" data-toggle="button">Exit</div>
<div class="well col-lg-8" id="messageBox">
<h3 class="messageBox" >Performing operation...</h3>
</div>
</div>
<div id="lead">
Filler to use as position: absolute
</div>
<div id="shareImageContainer">
<div class="well col-md-3 titleBox">
<div>
<h1>Share Image<br><small>Share image all in one step</small></h1>
</div>
</div>
<form id="shareImageForm">
<div class="form-group btn-group-ls well col-md-5">
<legend>Region</legend>
<input class="form-inline" type="radio" name="region" id="IAD0" value="IAD" checked>
<label for="IAD0" class="btn btn-default region">Virginia</label>
<input class="form-inline" type="radio" name="region" id="ORD0" value="ORD">
<label for="ORD0" class="btn btn-default region">Chicago</label>
<input class="form-inline" type="radio" name="region" id="DFW0" value="DFW">
<label for="DFW0" class="btn btn-default region">Dallas</label>
<input type="radio" id="HKG0" name="region" value="HKG">
<label for="HKG0" class="btn btn-default region">Hong Kong</label>
</div>
<div class="form-group well col-md-5">
<label for="producerUsername">Producer Username</label>
<input type="text" class="form-control" name="producer_username" id="producerUsername" placeholder="Enter producer's username" required>
<label for="producerApiKey">Producer Api Key</label>
<input type="text" class="form-control" name="producer_apikey" id="producerApiKey" placeholder="Enter producer's api key" required>
</div>
<div class="form-group well col-md-5">
<label for="consumerUsername">Consumer Username</label>
<input type="text" class="form-control" name="consumer_username"id="consumerUsername" placeholder="Enter consumer's username" required>
<label for="consumerApiKey">Consumer Api Key</label>
<input type="text" class="form-control" name="consumer_apikey" id="consumerApiKey" placeholder="Enter consumer's api key" required>
</div>
<div class="form-group well col-md-5">
<label for="imageUuid">Image UUID</label>
<input type="text" class="form-control" name="image_uuid" id="imageUuid" placeholder="Enter images's image Uuid" required>
</div>
<div class="col-md-5">
<input type="submit" value="Submit" class="btn btn-primary">
</div>
</form>
</div>
<div id="addMemberContainer">
<div class="well col-md-3 titleBox">
<div>
<h1>Add Member<br><small>Add a member to be shared</small></h1>
</div>
</div>
<form id="addMemberForm">
<div class="form-group btn-group-ls well col-md-5">
<legend>Region</legend>
<input class="form-inline" type="radio" name="region" id="IAD5" value="IAD" checked>
<label for="IAD5" class="btn btn-default region">Virginia</label>
<input class="form-inline" type="radio" name="region" id="ORD5" value="ORD">
<label for="ORD5" class="btn btn-default region">Chicago</label>
<input class="form-inline" type="radio" name="region" id="DFW5" value="DFW">
<label for="DFW5" class="btn btn-default region">Dallas</label>
<input type="radio" id="HKG5" name="region" value="HKG">
<label for="HKG5" class="btn btn-default region">Hong Kong</label>
</div>
<div class="form-group well col-md-5">
<label for="producerUsername">Producer Username</label>
<input type="text" class="form-control" name="producer_username" id="producerUsername" placeholder="Enter producer's username" required>
<label for="producerApiKey">Producer Api Key</label>
<input type="text" class="form-control" name="producer_apikey" id="producerApiKey" placeholder="Enter producer's api key" required>
</div>
<div class="form-group well col-md-5">
<label for="imageUuid">Image UUID</label>
<input type="text" class="form-control" name="image_uuid" id="imageUuid" placeholder="Enter images's image Uuid" required>
</div>
<div class="form-group well col-md-5">
<label for="consumerAddId">Consumer/Member account id number to add</label>
<input type="text" class="form-control" name="consumer_tenantid" id="consumer_tenantid" placeholder="Enter member account id number" required>
</div>
<div class="col-md-5">
<input type="submit" value="Submit" class="btn btn-primary">
</div>
</form>
</div>
CSS:
#lightbox {
display: none;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
padding: 100px;
position: fixed;
z-index: 85;
background: rgba(0,0,0,.6);
}
.messageBox {
padding-top: 60px;
text-align: center;
}
body {
overflow: hidden;
width:100%;
height:100%;
}
#lead {
position: absolute;
height: 100%;
width: 100%;
top: 0px;
left: 0px;
}
[id*="Container"] {
position: relative;
height: 100% !important;
width: 100% !important;
top: 0px;
left: 0px;
}
I had to add width and height to html also.
body, html {
width: 100% !important;
height: 100% !important;
}