below is my code
<div class="row">
<div class="col-md-12">
<div class="col-md-6">
<label>name</label>
<input type="text" class="form-input-icon">
</div>
<div class="col-md-6">
<label></label>
<label style="margin-top: 30px;">test</label>
</div>
</div>
</div>
i have created two columns in one row
first column has label and under that input box
next column has only label and it should be aligned inline with input box, but since only label was there it used to display on top. So i wrote one dummy label. Still it is not aligned with input box.
how to do this? Is there any way to do it in bootstrap?
Add between label. There should be some content inside label to make it work. So just add html code of empty space.
<label> </label>
However a better approach will be without bootstrap columns and using custom css as follows:
.column-holder {
table-layout: fixed;
display: table;
width: 100%;
}
.column-holder .column {
vertical-align: bottom;
display: table-cell;
padding: 0 15px;
}
label {
display: block;
}
input {
display: block;
width: 100%;
}
<div class="column-holder">
<div class="column">
<label>name</label>
<input type="text" class="form-input-icon">
</div>
<div class="column">
<label>test</label>
</div>
</div>
Without Bootstrap :
that is happens because you put every label inside same div tag again and again.
<div class="col-md-6">
<label>name</label>
<input type="text" class="form-input-icon">
</div>
<div class="col-md-6">
<label></label>
<label style="margin-top: 30px;">test</label>
</div>
when you remove those two same div tags or put all labels and input tag inside a single label then all elements will gets inline automatically.
HOW TO DO :
<div class="row">
<div class="col-md-12">
<div class="col-md-6">
<label>name</label>
<input type="text" class="form-input-icon">
<label></label>
<label style="margin-top: 30px;">test</label>
</div>
</div>
</div>
Using Bootstrap :
Yes you can do same thing using bootstrap even that is more easy and looks more beautiful. here is a simple example for you.
copy this code and run with chrome or firefox or safari this code will work perfectly
you can visit this site:for more detail
or check this outinline form using bootstrap
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Example of inline form</h2>
<form class="form-inline" role="form">
<div class="form-group">
<label >Name : </label>
<input type="email" class="form-control" id="name" placeholder="Enter your name ">
</div>
<div class="form-group">
<label for="email">Email : </label>
<input type="password" class="form-control" id="email" placeholder="enter your email">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</body>
</html>
Related
I'm still learning bootstrap and I would like to know what should I use move things inside a bootstrap container.
My question is a little bit strange but maybe with images and code it will be easier to understand.
I want to create a form in that precise position like in this image but I don´t know how can to do it. I don't understand if I have to apply margins or padding neither if it is suppose to change/apply css in the row or in the container.
At this moment my website looks like this and my code is this one:
<div id="form">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-offset-7">
<form class="form-group">
<label for="testEmail">Email address</label>
<input type="email" class="form-control" id="testEmail" placeholder="Email">
</form>
</div>
</div>
</div>
</div>
Can you guys explain me how can I change my form position and how it is suppose to move things inside bootstrap?
Thanks
you can use offset like what you did. But here I prefer to create to Columns of divs inside row. please review this one: (see in full screen to check the layout)
form {
border-radius: 2px;
border: 1px solid green;
padding: 15px;
}
#form {
margin-top: 50px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div id="form">
<div class="container">
<div class="row">
<div class="hidden-xs col-lg-3">test1</div>
<div class="col-xs-6 col-lg-3">test2</div>
<div class="col-xs-6 col-lg-4">
<form class="form-group">
<label for="testEmail">Email address</label>
<input type="email" class="form-control" id="testEmail" placeholder="Email">
</form>
</div>
<div class="hidden-xs col-lg-2">test3</div>
</div>
</div>
</div>
You can use bootstrap's offset class for positioning elements as you need. Here is the documentation for offset:
https://v4-alpha.getbootstrap.com/layout/grid/#example-offsetting-columns
Please look at the following code:
<div class="container">
<form class="form-inline" role="form">
<div class="form-group">
<label for="first">FIRST</label>
<input class="form-control" id="first" ng-model="???" ng-readonly="true" />
</div>
<div class="form-group">
<label for="second">SECOND</label>
<input class="form-control" id="second" ng-model="???" ng-readonly="true" />
</div>
<div class="form-group">
<label for="third">THIRD</label>
<input class="form-control" id="third" ng-model="???" ng-readonly="true" />
</div>
<div class="form-group">
<label for="fourth">FOURTH</label>
<input class="form-control" id="fourth" ng-model="???" ng-readonly="true" />
</div>
</form>
</div>
My purpose was to create a form with 4 elements in ONE line.
I wrote this code based on this example: http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_form_inline&stacked=h.
However, I got each one of these elements in a different line. Do you know why this code example didn't work out?
Maybe you need add these scripts and CSS:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Try this:
<html ng-app="">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="col-xs-12">
<form class="form-inline" role="form">
<div class="form-group">
<label for="first">FIRST</label>
<input class="form-control" id="first" ng-model="???" ng-readonly="true" />
</div>
<div class="form-group">
<label for="second">SECOND</label>
<input class="form-control" id="second" ng-model="???" ng-readonly="true" />
</div>
<div class="form-group">
<label for="third">THIRD</label>
<input class="form-control" id="third" ng-model="???" ng-readonly="true" />
</div>
<div class="form-group">
<label for="fourth">FOURTH</label>
<input class="form-control" id="fourth" ng-model="???" ng-readonly="true" />
</div>
</form>
</div>
</div>
</body>
</html>
This gives you all four in one line...
you have missed div class="col-xs-12" that means all content should
be in one row,
one row have maximum 12 col-xs that we declared.
and i have just tried for you and it is giving me the output like:
If you are testing your form on a viewport of more than 768px width, it will appear in one line. Otherwise it will not.
Test this out with the demo of inline-form on bootstraps website on this link
Excerpt from the above link!
Add .form-inline to your form (which doesn't have to be a ) for left-aligned and inline-block controls. This only applies to forms within viewports that are at least 768px wide.
Here is a plunker link that shows that your code when viewed in bigger screens shows up in one line. Click on the full screen link in the plunker and see the result.
Check if your parent container has a width set that is less than 768px.
i think they are too large for the window , try resizing the input boxes to fit the window in one line
or
try this put all the 4 elements in one 'div' tag , i think after displaying one div tag it goes to the next line by default, so use only one div tag
I am trying to center my form but even trying in all possible ways I can I am not able to achieve it.
.content {
margin: 0 auto;
padding: 0 1em;
max-width: 768px;
text-align: center;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>::Members Area::</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/pure/0.4.2/pure-min.css">
</head>
<body>
<div class="page-wrap">
<div class="header">
<h1>heading</h1>
<h2 id="msg">Heading</h2>
</div>
<div class="content">
<form class="pure-form" action="" method="post" id='loginform'>
<div class="fields">
<fieldset class="pure-group center" >
<input type="text" required autofocus class="pure-input-1-2" value="" name="username" id="username" placeholder="Username">
<input type="password" required class="pure-input-1-2" name="password" id="password" placeholder="Password">
<input type="email" class="pure-input-1-2" value="" name="email" id="email" placeholder="Email">
<input type="hidden" name="type" value="login" id="type">
</fieldset>
</div>
<button type="submit" class="pure-button pure-input-1-2 pure-button-primary" name="loginbutton" id="button" value="login">Sign in</button>
<div class="login-links">
Forgot password ?
Already have an account ? <strong>Sign in</strong>
<br />
Don't have an account ? <strong>Sign Up</strong>
</div>
</form>
</div>
</div>
</body>
</html>
The text and buttons in the field are centered but the input fields are not centered I tried adding width to the content but it didn't helped if I add <center> it works But I want to do it with css please help.
set .pure-form .pure-group input to display: inline-block instead of display: block in pure-min.css
or just override it in another stylesheet:
.pure-form .pure-group input{
display: inline-block;
}
FIDDLE
I'm developing a form in Bootstrap 3 that is to have a series of text controls and an image. The form takes up 100% of its container, and the text inputs also are set to 100% width. This works well when I don't have to worry about an image. I use the bootstrap .form-control and .form-horizontal classes to make it work (code at the bottom):
Current Look
I need to put the image to the right of these form controls and decrease their width appropriately:
Mockup
I would simply put in another column in Bootstrap's grid system to handle this, but I'd also like the columns to go back up to full width when the image is done, as shown in the mockup image above. Something similar to the "tight" image layout in Microsoft Word. I've tried setting float:right; and display:inline-block' to the image class but it doesn't turn out correctly:
Not Working Yet
Anyone know how to make the design work like how I described it in the mockup?
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div>
<h2>New Guest</h2>
<form class="form-horizontal" role="form">
<img src="http://images.all-free-download.com/images/graphiclarge/man_silhouette_clip_art_9510.jpg" style="float: right; max-width: 200px; display: inline-block;" />
<div class="form-group" id="group-tbFirstName">
<label for="tbFirstName" class="col-sm-3 control-label">First Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="tbFirstName" placeholder="First Name" value="" />
</div>
</div>
<div class="form-group" id="group-tbLastName">
<label for="tbLastName" class="col-sm-3 control-label">Last Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="tbLastName" placeholder="Last Name" value="" />
</div>
</div>
<div class="form-group" id="group-optGender">
<label for="optGender" class="col-sm-3 control-label">Gender</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="optGender" placeholder="Gender" value="" />
</div>
</div>
<div class="form-group" id="group-tbAge">
<label for="tbAge" class="col-sm-3 control-label">Age</label>
<div class="col-sm-9">
<input type="number" class="form-control" step="any" id="tbAge" value="" placeholder="Age" />
</div>
</div>
<div class="form-group" id="group-dtDateOfBirth">
<label for="dtDateOfBirth" class="col-sm-3 control-label">Date of Birth</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="dtDateOfBirth" placeholder="Date of Birth" value="" />
</div>
</div>
</form>
</div>
</body>
</html>
The specific effect I'm going for is to have the inputs below the image expand out to 100% again. Like this:
I know that the image can be floated but I don't want all the inputs below it at the same width as the ones on the lines with the image. I want them to expand.
You just need to add some floats to the image and also to the form, as in the following:
(FIDDLE)
HTML
<img class="img-right">
<form class="form-horizontal">
</form>
CSS
.img-right {
float: right;
max-width: 200px;
padding-left: 20px }
.form-horizontal {
float: right }
Have you tried putting the first 3 or 4 inputs and the image in their own row? This will cause the row to expand out to the width of the container and keep your image on the right. You can also add the class class="img-responsive" to the image so that it will shrink down as the screen shrinks.
<div class="row">
<div class="col-sm-8">
//inputs go here
</div>
<div class="col-sm-4">
//image goes here
</div>
</div>
<div class="row">
<div class="col-sm-12>
//the rest of your inputs here
</div>
</div>
I see many kinds of format column in your code. This makes it behave uncontrollable.
Try to use one format only, say, class="col-lg-6.
As long as I know, bootstrap use 100% for form-control, we can modify it by choosing the suitable class of columns.
To handle your need, you can create new CSS file. place it below the bootstrap.min.css. Then Float the image to the right and set the min-width and max width in % to make it resized automatically based on browser's windows.
Besides, use class='img-responsive' inside the image attr to make it resized auto.
Use float property float: right;
.img-right {
float: right;
max-width: 200px;
padding-left: 20px;
}
.form-horizontal {
float: right;
}
<img class="img-right">
<form class="form-horizontal">
</form>
Right now I'm working on a school project where I create a bookstore. I have created the front page and now I'm trying to use php to create the login and register system. I've created the Register page (php) and I created a CSS File to go along with it, however I can't get the two to connect properly. When I run it in localhost the css won't render. I don't see a error in my code and I don't understand why it's not working. I tried to change the css name around a bit to see if the problem was the naming however nothing else seems to work.
/* Import Google Font */
#import url('https://fonts.googleapis.com/css?family=Lora&display=swap');
.form-div {
margin: 50px auto 50px;
padding: 25px 15px 10px 15px;
border: 1px solid #80ced7;
border-radius: 5px;
font-size: 1.1em;
font-family: 'Lora', serif;
}
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<!--Bootstrap 4 CSS-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<!-- Other CSS File --->
<link rel="stylesheet" href="registerandlogin.css" type="text/css">
<title>Register</title>
</head>
<body>
<p>Register Today and Join the Royal Reader Community</p>
<div class="container">
<div class="row">
<div class="col-md-4 offset-md-4">
<form action="signup.php" method="post">
<h3 class="text-center">Register</h3>
<div class="form-group">
<label for="username">Username</label>
<input type="text" name="username" class="form-control form-control-lg">
</div>
<div class="form-group">
<label for="email">Email Address</label>
<input type="email" name="email" class="form-control form-control-lg">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" name="password" class="form-control form-control-lg">
</div>
<div class="form-group">
<label for="passwordConf">Confirm Password</label>
<input type="password" name="passwordConf" class="form-control form-control-lg">
</div>
<div class="form-group">
<button type="submit" name="signup-btn" class="btn btn-primary btn-block btn-log">Sign Up</button>
</div>
<p class="text-center">Already a member?</p>Sign In
</form>
</div>
</div>
</div>
</body>
</html>
Any help would be greatly appreciated.
Try to add a class to your form or whatever like this:
<form class="form-div" action="signup.php" method="post">
Here you can read about css selectors: https://www.w3schools.com/html/html_css.asp
You do not have an element named .form-div, which is why your CSS does not affect anything. Try adding an element with that class name in your <form> tag.