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
Related
I am using a Bootstrap template to build a website. I have 2 questions I am struggling to solve:
1) When I put my HTML code into a < section >, automatically some sort of top margin/padding is applied to the section. There is no css code affecting the section.
I can't seem to be able to control how much padding/margin is applied at the top/bottom.
Would anyone know if this is normal and how can I control amount of spacing?
2) If I don't use the section but just the div to separate each portion of my code the text goes right at the top of my page with no spacing at all. I tried using some css but failed at any attempt. This my most recent and basic attempt (also failing)
.q2 {
position: relative;
margin-top: 20px;
}
Thanks for any help - I have tried adding and removing section, using the bootstrap grid, a table but it all still gets either squashed together (if I don't use sections) or way too far apart (if I use sections).
HTML code:
<section>
<div class="container">
<form action="sqlQuery.php" method="post" name="foundationsurvey">
<div class="row">
<div class="col-12 text-center pb-3">
<label for="Q1">Q1</label>
</div>
</div>
<div class="row">
<div class="col-sm-12 text-left ml-4">
<input type="radio" id="dry" required> <label for="dry"> Dry </label>
</div>
</div>
<div class="row">
<div class="col-12 text-left ml-4">
<input type="radio" id="normal" required> <label for="normal"> Normal</label>
</div>
</div>
</div>
<!--Q2-->
<div class="container">
<div class="row">
<div class="col-12">
<label for="Q2">Q2</label>
</div>
</div>
<div class="row">
<div class="col">
<input type="text" name="product1" placeholder="Brand, Product Name" required>
</div>
<div class="col">
<input type="text" name="product2" placeholder="Brand, Product Name" required>
</div>
</div>
</div>
</section>
</header>
Where is the q2 class applied?
try the following:
... <div class="container q2"> ...
all styles work:
section {
margin-top: 150px;
}
.q2 {
/* position: relative; */
margin-top: 20px;
}
So i am trying something very simple but can seem to figure it out. I have two select elements which I want to align horizontally with text in between. This is what I have: ( also on codepen )
<div class="row">
<div class="col-xs-2">
<select class="form-control input-sm">...</select>
</div>
<div class="col-xs-1"> vs </div>
<div class="col-xs-2">
<select class="form-control input-sm">...</select>
</div>
</div>
However I when I try to put a vs (versus) between them , if I use a <p> or <div> with no class defined the second select gets misaligned. If I wrap the vs in a div class=col-xs-1 the gap is too big and doesnt look nice. What would be the best way to get a vs between the 2 select while keeping the alignment and not having a huge space between 2 elements
I assume you are using Bootstrap looking at the CodePen. Bootstrap has a class for inline forms which you could use like this:
<div class="container">
<form action="" class="form-inline">
<div class="form-group">
<select class="form-control"><option>Select option</option></select>
</div>
<div class="form-group">vs</div>
<div class="form-group">
<select class="form-control"><option>Select option</option></select>
</div>
</form>
</div>
CodePen: http://codepen.io/anon/pen/ZOYjBm
I just tried with CSS
<div class="row">
<div class="col-xs-2 field">
<select class="form-control input-sm">...</select>
</div>
<div><span>vs</span></div>
<div class="col-xs-2 field">
<select class="form-control input-sm">...</select>
</div>
</div>
CSS:
div{
display:inline;
}
.field{
position:absolute;
}
span{
position:relative;
padding:0px;
}
I have the following html. My label is not aligned vertically in the center compare to the input field.
<div class="row">
<div class="col-sm-5">
<label for="investmentbalance" class="control-label pull-right">Investment Balance</label>
</div>
<div class="col-sm-2">
<input type="text" readonly="readonly" value="28500.00" class="form-control" name="investmentbalance" id="investmentbalance">
</div>
</div>
How can I set both input and label have the same height ?
JSFiddle
https://jsfiddle.net/mLcrv19z/
To get the two elements (label and input) to align vertically, try using the form-inline class, along with form-group. Here's what that looks like:
<div class="form-inline">
<div class="form-group">
<label for="investmentbalance">Investment Balance</label>
<input type="text" readonly="readonly" value="28500.00" class="form-control" name="investmentbalance" id="investmentbalance" />
</div>
</div>
https://jsfiddle.net/mLcrv19z/10/
You can use both padding or line-height.
Add to label:
padding: 7px;
or:
line-height: 34px;
The input height is 20px; the padding 6 and the margin 1. So here's the calculation:
padding: 6 + 1 = 7px
line-height: 20 + 7 (top) + 7 (bottom) = 34px
You may use margin-top:3%; to the label CSS
The value is based on the jsfiddle example. It may change depending on the application you are developing.
Issue is not with your alignment but the classes you have defined. You need to define bootstrap grid class for every width. Otherwise grid would appear different in different resolutions. Check this out.
<div class="col-sm-10 col-md-10 col-xs-10">
<div class="col-sm-2 col-md-2 col-xs-2">
Fiddle Solution
Another solution is to use a custom class, setting it's line-height equal to the parent's height and aligning it in the middle.
.middle {
vertical-align: middle;
line-height: 34px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row middle">
<div class="col-xs-5">
<label for="investmentbalance" class="control-label pull-right">Investment Balance</label>
</div>
<div class="col-xs-7">
<input type="text" readonly="readonly" value="28500.00" class="form-control" name="investmentbalance" id="investmentbalance">
</div>
</div>
</div>
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>
I have this code:
<div class="well">
<form role="form" id="shop-order" method="post" action="">
<div class="row">
<div class="form-group">
<div class="col-md-3">
<div class="pull-right">
<label for="name">Label</label>
</div>
</div>
<div class="col-md-6">
<select class="form-control" name="clientId">
$options
</select>
</div>
</div>
</div>
// possibly other rows...
</div>
The result of this code is on this image:
I don't get how I can center label and input in a row. I want them on one line: middle of label opposite middle of input.
How I can do this? Or probably I my html is wrong and this can be achieved by correct html?
I am looking for bootstrap method, I understand, that it can be achieved by line-height. I will do it by line-height if I wouldn't find bootstrap solution. So I am looking for bootstrap solution.
JSFiddle demo
Bootstrap provides a Horizontal Forms style that seems like what you're looking for: http://getbootstrap.com/css/#forms-horizontal
Working Fiddle: http://jsfiddle.net/Nv9Q5/1/
Code:
<div class="well">
<form class="form-horizontal">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">ФИО Клиента</label>
<div class="col-sm-10 col-md-10">
<select class="form-control" name="clientId">
<option>one</option>
</select>
</div>
</div>
</form>
</div>
Set the css line-height of the label to match the height of the input. You'll have to play around to find the right value.
https://developer.mozilla.org/en-US/docs/Web/CSS/line-height
Input elements are already inline level element. If you add text-align:center to the parent div it will automatically float to the center.
EDITS
If you want to center it vertically, you need to add one more div wrapping the input box
<div class="vertically_center">
<input type="text">
</div>
CSS
.vertically_center {
display: table-cell;
height: 200px;
vertical-align: center;
}