I have made bootstrap contact from in which I want to align all its element in center.
Below is my code:
.third-section > form > input{
width: 35%;
margin: auto;
margin-top: 25px;
}
.third-section > form > textarea{
width: 35%;
margin:auto;
margin-top: 20px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<section class="third-section">
<form>
<input type="text" class="form-control" placeholder="Name" required/>
<input type="email" class="form-control" placeholder="Email" required/>
<textarea id="message" rows="4" class="form-control" placeholder="Message" required></textarea>
<input type="submit" class="btn btn-primary" value="SUBMIT"/>
</form>
</section>
SCREENSHOT
As seen in screenshot button is not aligned in center.Someone please let me know how can I get desired layout. Any help would be appreciated.
THANKS
Add the following CSS
.third-section > form {
text-align: center;
}
if you could provide a working jsfiddle with all of your code in it, that would help. However, from what I can see, your issue can be solved by putting all of your form inside of a container with the text-center class.
<div class="container text-center">
...
</div>
Add bootstrap class 'text-center'. please refer the below code.
<section class="third-section text-center">
<form>
<input type="text" class="form-control" placeholder="Name" required/>
<input type="email" class="form-control" placeholder="Email" required/>
<textarea id="message" rows="4" class="form-control" placeholder="Message" required></textarea>
<input type="submit" class="btn btn-primary" value="SUBMIT"/>
</form></section>
Your button is not aligned because the your button is actually an input. All the elements are centered because they have margin: auto (so the remaining space is split evenly between the two margins). But the input elements (and the elements with class btn from bootstrap) are inline-block, and margin left and right properties are not working on inline and inline-block elements.
One option is the one that metaDesign sugested. Another option is to explicitly set the display property of the button to display: block.
so something like:
input.btn {
display:block;
}
Related
I am trying to make a search bar using html/bootstrap/Jquery which looks similar to the search bar found here:
https://us.letgo.com/en
So far I have that design but with only one text box:
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-offset-3 col-md-6">
<form class="" action="next_page.php" method="GET">
<div class="form-group" id="search_wrapper">
<input type="text" id="search_field" class="form-control" name="search_title" placeholder="Search By Name">
<button type="submit" id="search_button" class="btn btn-default">Search</button>
css
#search_field {
background-transparent;
height:40px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border-color: #CCCCCC;
outline: none;
}
#search_button {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
position:absolute;
top:0;
right:0;
font-size: 17px;
width:120px;
height:40px;
}
#search_wrapper{
height:40px;
position:relative;
}
When I add another input between the button and input between the input and button, the input just displays below both the button and the text box.
<input type="text" id="search_field" class="form-control" name="search_place" placeholder="Search By Place">
EDIT 1
I made a jsfiddle
https://jsfiddle.net/7v6hc9sz/1/
If that doesnt just link you to it, please let me know in a comment that it doesn't work. I have never used jsfiddle before.
I would recommend leveraging the Bootstrap native styles to the maximum extent possible, as they give you a robust set of tools to build your site.
For this particular issue, you're looking for Bootstrap's Inline Form styles.
Here's an example from their docs:
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe#example.com">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form>
You also are looking for Bootstrap Input Groups which will allow you to "pair" the button to the right of the last input.
Note the following things about that code:
1. The form has a class of form-inline. This is important, as it tells Bootstrap to line things up inline.
2. Each pair of label / inputs gets wrapped in a div with the class form-group. This tells Bootstrap to display this "group" (label and input) inline.
3. Each input gets a class of form-control. This tells bootstrap to style it up as an input.
Now, applying those classes to your markup, to achieve what you want, would look something like this:
<!-- Add the class "form-inline" -->
<h3>
Important:<br>form-inline does not appear correctly unless you make the preview pane wide!
</h3>
<form class="form-inline" action="next_page.php" method="GET">
<div class="form-group">
<input type="text" id="search_field" class="form-control" name="search_title" placeholder="Search By Name">
<!-- close the "form-group" div and start a new div -->
</div>
<!-- here we use "input-group" to get the submit tight "against" the input -->
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button type="submit" id="search_button" class="btn btn-default">Search</button>
</span>
</div>
</form>
Here's a Working Fiddle
You just need to make an inline form - the bootstrap website has examples.
It looks like this:
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="inputOne">Input One</label>
<input type="text" class="form-control" id="inputOne" placeholder="Input Two">
</div>
<div class="form-group">
<label class="sr-only" for="inputTwo">Input Two</label>
<input type="text" class="form-control" id="inputTwo" placeholder="Input Two">
</div>
<button type="submit" class="btn btn-default">Search</button>
</form>
Working bootply
Here's a bootply with connected fields by Rachel S
I had to create a custom CSS class to override the default margins for this form:
margin-right: -10px;
As well as remove the rounded corners of the following input element:
border-top-left-radius: 0;
border-bottom-left-radius: 0
See working demo below (need to see in in full-page).
You'd need to add this to your nav bar, of course.
.my-search {
padding: 1px;
margin-right: -10px;
display: inline-block;
}
.my-search2 input#search2 {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>my attempt</h2>
<hr/>
<form class="form-inline">
<div class="form-group">
<div class="input-group my-search">
<input type="text" class="form-control" id="search1" placeholder="s1">
</div>
<div class="input-group my-search2">
<input type="text" class="form-control" id="search2" placeholder="s2">
<div class="input-group-addon">
<span class="glyphicon glyphicon-search"></span>
</div>
</div>
</div>
</form>
I have a login form that is on the center of the page. The FORM is already in the right place with the right size. However, the two inputs are aligned to the left and I want them to be centered. The following code does not work. Any ideas?
HTML
<div class="col-sm-4 col-sm-offset-4">
<form action="/new" method="POST">
<input class="loginField" type="text" name="email" placeholder="Email address"></input>
<input class="loginField" type="text" name="password" placeholder="Password"></input>
</form>
</div>
CSS
.loginField {
margin: 0 auto;
width: 500px;
height: 50px;
}
You should use the form-control class to alter the default behavior of Bootstrap inputs.
*I altered your HTML so it's mobile first, this wont effect the text being centered if it's unnecessary for your needs tho.
body {
padding-top: 50px;
}
#loginForm {
max-width: 500px;
margin: 0 auto;
}
#loginForm .form-control {
position: relative;
height: 50px;
font-size: 16px;
text-align: center;
border-radius: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<form id="loginForm">
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
</form>
</div>
<!-- /container -->
<hr>
Add a class="text-center" to your form
<form class="text-center" action="/new" method="POST">
jsBin demo
Logically, if you don't want all your form's text to be centered, wrap your inputs inside a i.e: <div> and add the class to that DIV instead.
I want to set the background color on form-group. To clarify what I exactly mean, look at the following picture
As you can see above that I marked the div with color, I want to set the background color from form-group.
I tried with the following css.
.signup-ctrl {
//margin-top: 60px;
.form-buffer {
margin: 30px 0px;
background-color: #006dcc;
}
}
and the html
<div class="col-md-5 portfolio-item">
<form>
<div class="form-group form-buffer">
<input type="text" class="form-control" name="name" placeholder="Enter your name">
</div>
<div class="form-group form-buffer">
<input type="email" class="form-control" name="email" placeholder="Enter your email">
</div>
<div class="form-group form-buffer">
<input type="email" class="form-control" name="emailconfirm" placeholder="Enter email confirmation">
</div>
<div class="form-group form-buffer">
<input type="password" class="form-control" name="password" placeholder="Enter your Password">
</div>
<div class="form-group form-buffer">
<input type="text" class="form-control" name="captcha" placeholder="Enter numbers from image">
</div>
<button type="submit" class="btn btn-primary">Sign Up</button>
</form>
</div>
But it does not work, what do I wrong?
Your .form-group takes up exactly the same height as the input inside of it so every background color you add to it is actually hidden behind the input.
You could replace the top/bottom margins with padding to make the .form-group area actually bigger than the input:
.form-group {
padding: 30px 0;
background-color: #006dcc;
}
Your CSS is incorrect, it should be:
.portfolio-item form .form-buffer.form-group {
margin: 30px 0px;
background-color: #006dcc;
}
this will select the whole .form-group. Your mistake was nesting a CSS rule inside another.
Here is a fiddle of it
Sounds strange..!! but it doesnt work like that you have apply padding-bottom: XXpx inside the form-group of your choice instead of applying just background-color, and then it works for the length that you applied in the padding-bottom.
I want to add "month" after the input in bootstrap, in the side of it.
I've tried span, pull-left nothing worked. Months is always below
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">Months</label>
<input type="email" class="form-control" style="width: 50%" id="exampleInputEmail1" placeholder="Months"> months
</div>
</form>
JSFIDDLE
Just add form-inline to your form..
<form role="form" class="form-inline">
<div class="form-group">
<label for="exampleInputEmail1">Months</label>
<input type="email" class="form-control" style="width: 50%" id="exampleInputEmail1" placeholder="Months"> months
</div>
</form>
Demo: http://www.bootply.com/119625
Try wrapping the elements and specifying the column widths:
HTML
<form role="form">
<div class="form-group">
<div class="pull-left col-xs-9">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<span class="col-xs-3">months<span>
</div>
</form>
CSS
span{
margin-top: 25px;
}
JS Fiddle: http://jsfiddle.net/7rYp7/2/
putting style="display:inline" into the actual input element in question has worked for me.
Listen, I know we are supposed to avoid using style and only use classes defined in CSS but I tried all the example above and this is the only thing that worked.
You can set the following in your CSS (overwriting the bootstrap.css)
.form-group input {
display:inline;
width: 50%;
margin: 5px;
}
You can also use a different selector to be more specific (instead of overwriting it for all inputs) UPDATED:
#exampleInputEmail1{
display:inline;
width: 50%;
margin: 5px;
}
.form-group label {
display: block;
}
I'm working on a simple landing page for a site and my form wont align to the center. If you take a look here you can see that it is slightly offset to the right. I've tried adding a container div around the form and well, setting it as a block with margin:0 auto as well, but nothing changes. I've also tried setting class="span6 offset 3" to align it in the center but that little offset still remains. I have a feeling that all the divs inside other divs are building up some sort of margin on, but I can't seem to figure out how to fix it.
Here's my HTML code:
<div class="row">
<div class="span3"></div><!--/.span3-->
<div class="span6">
<div class="well span6" align="center">
<form id="contact-form" name="contact-form" method="post" action="form-processing.php">
<input class="span6" name="Name" id="Fname" type="text" placeholder="Your name" required>
<input class="span6" name="Email" id="Email" type="email" placeholder="Your email" required>
<input class="span6" name="Message" id="Message" type="text" rows="3" placeholder="What's on your mind?" required><br>
<button type="submit" class="btn btn-primary" id="button">Submit</button>
<button type="reset" class="btn">Clear</button>
</form>
</div><!--/.well span6-->
</div><!--/.span6-->
<div class="span3"></div><!--/.span3-->
</div><!--/.row-->
And here's my non-Bootstrap CSS code:
h1 {font-family: marvel, serif; color:#060; font-size:90px; -webkit-text-stroke: 1px white;}
h2 {font-family: marvel, serif; color:#CCC; font-size:50px; -webkit-text-stroke: 1px black;}
p {color:white; font-size:20px;}
body{
padding: 40px;
margin:0 auto;
background-image: url(../img/background.jpg);
background-repeat: repeat;
background-position: center center;
}
.welcome {padding:30px 0 0 0;}
#Message {overflow:hidden;}
.well {margin:0 auto;}
.navbar-fixed-top,.navbar-fixed-bottom{position:fixed}
If you can figure out what the problem is I'll bake you a pie or something. Thanks.
Here is my new code that I typed out, which is almost identical to the previous, with the omission of a span6 class. Everything is lined up perfectly now.
<div class="row">
<div class="span3"></div><!--/.span3-->
<div class="well span6" align="center">
<form id="contact-form" name="contact-form" method="post" action="form-processing.php">
<input class="span6" name="Name" id="Fname" type="text" placeholder="Your name" required>
<input class="span6" name="Email" id="Email" type="email" placeholder="Your email" required>
<textarea class="span6" name="Message" id="Message" type="text" rows="3" placeholder="What's on your mind?" required></textarea><br>
<button type="submit" class="btn btn-primary" id="button">Submit</button>
<button type="reset" class="btn">Clear</button>
</form>
</div><!--/.well span6-->
<div class="span3"></div><!--/.span3-->
</div><!--/.row-->
I recommend not editing the bootstrap css but including your own css as you've done above. Create an id for the specific you want centered and then pad it until it works. Looks like the bootstrap css interfered with your own css causing the problems. It works now so if you think it's important remember to you only your own css when you want to make changes in the future. One final thing, have the bootstrap page open it gives you an idea of what the spans and rows look like before including them in your page.
It looks like the padding on your "well" class is adding width to bootstrap's span6 class.
You could take the box-sizing route by adding "box-sizing: border-box;" to your well class or by targeting that specific div and reducing the width from 570px (bootstrap's span6 width) to 532px (19px padding on left and right).
Hope that helps.
Remember that for bootstrap theres the '-offset-' class which is very helpful when it comes to aligning items. For example you could use "col-md-12 col-md-offset-2" or for a span6 "col-lg-6 col-lg-offset-3".