I have a form that looks like this (on a big device, e.g. pc monitor)
that is as it should be. On smaller devices it however looks like this:
the button is no longer in the same line as the input. My code looks like this:
<div class="form-group ">
<label class="col-md-2 control-label">Title</label>
<div class="col-md-10">
<div class="row">
<div class="col-md-10">
<input id="title" class="form-control" placeholder="Title" autocomplete="off" name="title" type="text" value="">
</div>
<div class="col-md-2">
<a id="btn-verify" class="btn btn-primary pull-right">Verify</a>
</div>
</div>
</div>
</div>
How can I ensure that it also is aligned correctly when using smaller devices?
PS: Bootstrap is being used
Your columns are col-md, which means that when the screen width gets below 992px, the columns will take up the full width of the page. So if you want them to stay inline, then add col-xs classes with the column sizes that you need.
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group ">
<label class="col-md-2 control-label">Title</label>
<div class="col-md-10">
<div class="row">
<div class="col-xs-10">
<input id="title" class="form-control" placeholder="Title" autocomplete="off" name="title" type="text" value="">
</div>
<div class="col-xs-2">
<a id="btn-verify" class="btn btn-primary pull-right">Verify</a>
</div>
</div>
</div>
</div>
Both the input and button need to be set to display: inline, and they should be placed in the same column. Below works and should satisfy your needs:
<div class="form-group ">
<label class="col-md-2 control-label">Title</label>
<div class="col-md-10">
<div class="row">
<div class="col-md">
<input id="title" class="form-control d-inline w-70 float-left" placeholder="Title" autocomplete="off" name="title" type="text" value="">
<a id="btn-verify" class="btn btn-primary float-left d-inline">Verify</a>
</div>
</div>
</div>
</div>
Have you tried stacking the bootstrap col classes?
The lg / md / sm all target different screen size thresholds. Using multiples should help you define the space it should take up in a given scenario. I would say you can steal some real-estate from that input.
You could also consider putting them in the same div.
Your code modified with stacked col classes:
<div class="form-group ">
<label class="col-md-2 control-label">Title</label>
<div class="col-md-10">
<div class="row">
<div class="col-md-10 col-sm-6">
<input id="title" class="form-control" placeholder="Title" autocomplete="off" name="title" type="text" value="">
</div>
<div class="col-md-2 col-sm-6">
<a id="btn-verify" class="btn btn-primary pull-right">Verify</a>
</div>
</div>
</div>
</div>
Related
I'm newbie using bootstrap, so I would like you help to center these couple of textBoxes and the button. I appreciate if there any other enhancement I can do with the code
This is part of the code I did and I'm using this as template: https://github.com/BlackrockDigital/startbootstrap-agency
<div class="row">
<div class="col-lg-12 text-center">
<form method="post" action="">
<div class="col-md-6">
<div class="form-group">
<input class="form-control" type="text" class="textbox" id="txt_uname" name="txt_uname" placeholder="Username" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input class="form-control" type="password" class="textbox" id="txt_uname" name="txt_pwd" placeholder="Password"/>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input class="btn btn-primary btn-xl text-uppercase" type="submit" value="Submit" name="but_submit" id="but_submit" />
</div>
</div>
</form>
</div>
</div>
The final idea is to have something like this:
login
You can use Flex too, see this link to more information: https://getbootstrap.com/docs/4.0/utilities/flex/
Basically, you can use <div class="d-flex justify-content-center">...</div> to center your div. In my opnion you can use grid to define the macro layout of your view, for example, use grid to define the number of columns in one component of your view and inside this component you can use flexbox. This approach make the view more responsive. And if you understand flexbox you can do anything. I hope this help you. Good luck.
Hope this can help you. Just add "m-auto" class to col-md-6
<div class="row">
<div class="col-lg-12 text-center">
<form method="post" action="">
<div class="col-md-6 m-auto">
<div class="form-group">
<input class="form-control" type="text" class="textbox" id="txt_uname" name="txt_uname" placeholder="Username" />
</div>
</div>
<div class="col-md-6 m-auto">
<div class="form-group">
<input class="form-control" type="password" class="textbox" id="txt_uname" name="txt_pwd" placeholder="Password"/>
</div>
</div>
<div class="col-md-6 m-auto">
<div class="form-group">
<input class="btn btn-primary btn-xl text-uppercase" type="submit" value="Submit" name="but_submit" id="but_submit" />
</div>
</div>
</form>
</div>
<div class="text-center"><!-- Code goes here --></div>
Here's what I mean.
I have a log in button on the top right of the page, and the title of the page centered in the middle.
However, the only way I found to center the tile on the div, was the center the div itself on the page, which was col-md-9.
I tried using CSS to center the Div, but I couldn't make it work, so the workaround I found was the center the div by using another column before the column where the Title is positioned.
However, this new div is completely empty. I might put a logo in it later on, but I planned for the top right of the page to be empty.
Is there something bad with having empty divs?
Is there a better way to implement this?
Code for reference.
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-6">
<h1 id="TEXT">OH SNIP</h1>
<br>
</div>
<div class="col-md-3">
<div class="dropdown">
<button id="dpBt" class="dropbtn"></button>
<div id="myDropdown" class="dropdown-content">
<form id="logIn" action="api/users" method="POST">
<div class='form-group'>
<label for='username' class='sr-onl'>Username</label>
<input id='username' type='username' required='' placeholder='Username' class='form-control' name='username'>
</div>
<div class='form-group'>
<label for='password' class='sr-onl'>Password</label>
<input id='password' type='password' required='' placeholder='Password' class='form-control' name='password'>
</div>
<div class='form-group'>
<button id="btnLogin" class='btn btn-block'>Login</button>
</div>
</form>
<hr>
<input id="btnRegisto" type="button" class="btn btn-block" value="Sign up">
<br>
</div>
</div>
</div>
</div>
You could leave blank columns, but a better approach provided by Bootstrap is to use offsets.
Here is an example from Bootstrap 3.3
https://getbootstrap.com/docs/3.3/css/#grid
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>
Here's an example that better fits what your trying to do. Notice the offset for the button.
<form class="form-horizontal" method="post" action="/login/">
<div class="form-group">
<label for="inputEmail" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="id_username" name="username" value="" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password" name="password" value="" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
I have small issue with bootstrap grid system , I have a row that has grid setup with two sections with col-md-6 , Now problem is when i zoom my browser more than 100% my Close label and input is moving to next line. I want them to stay same place all the time zoom should not effect the position of the rows.I tried to use col-xs-1 but it does not work. How can i achieve that task using bootstrap ?
main.html
<div class="row">
<div class="container col-md-6">
<div class="form-group">
<label class="col-md-5">Actual Cycle Start:</label>
<div class="col-md-7">
<div class="row">
<div class="col-xs-5">
<input class="form-control" ng-model="riskAssessmentDTO.cycleStartDate"
k-format="'MM/dd/yyyy'" disabled />
</div>
<div class="col-xs-1">
<label class="control-label"> Close:</label>
</div>
<div class="col-md-5 changeWdh">
<input class="form-control" ng-model="riskAssessmentDTO.cycleEndDate" k-format="'MM/dd/yyyy'" disabled />
</div>
</div>
</div>
</div>
</div>
<div class="form-group col-md-6 fieldHeight">
<label for="challengeOutstand" class="col-md-5">Challenges
Outstanding:</label>
<div class="col-md-7">
<input type="text" class="form-control" id="challengeOutstand"
name="challengeOutstand" maxlength="256"
ng-model="riskAssessmentDTO.challengesOutstanding" disabled />
</div>
</div>
</div>
main.css
.changeWdh{
width: 152px;
}
EDIT: try this:
<div class="container">
<div class="row">
<div class="col-6-md">
<div class="col-md-7">
<div class="row">
<div class="col-xs-1">
<label class="col-md-5">Actual Cycle Start:</label>
</div>
<div class="col-xs-5">
<input class="form-control" ng-model="riskAssessmentDTO.cycleStartDate"
k-format="'MM/dd/yyyy'" disabled />
</div>
</div>
<div class="row">
<div class="col-xs-1">
<label class="control-label"> Close:</label>
</div>
<div class="col-xs-5 changeWdh">
<input class="form-control" ng-model="riskAssessmentDTO.cycleEndDate" k-format="'MM/dd/yyyy'" disabled />
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 fieldHeight">
<label for="challengeOutstand" class="col-xs-5">Challenges
Outstanding:</label>
<div class="col-xs-7">
<input type="text" class="form-control" id="challengeOutstand"
name="challengeOutstand" maxlength="256"
ng-model="riskAssessmentDTO.challengesOutstanding" disabled />
</div>
</div>
</div>
place your col-5 and col-1 into row div's or make them both into xs, not one md and one xs, and place them into a div container class "col-md-6"
The following is the code for the form which I wrote:
<div class="container-fluid" id="unlabelled">
<p class="bg-primary">Items<span>Quantity</span><span>In Kit</span></p>
<form>
<div class="form-group col-lg-5">
<input type="text" class="form-control" id="unlabelled-items" placeholder="Enter code or description">
</div>
<div class="form-group col-md-2">
<input type="text" class="form-control" id="quantity" placeholder="Enter Quantity">
</div>
<div class="form-group">
<input type="checkbox" id="in-kit">
<button class="btn-primary" id="add-btn">Add</button>
</div>
</form>
</div>
I am using bootstrap here. And I have the top paragraph heading with a class="bg-primary" which gives a nice background for the heading. I have two text input fields, a checkbox and a button. I want to align the text in the above paragraph with these fields.
https://imgur.com/XinA1kT
I want the Items text to be aligned in center with the first text field, Quantity with the second text field and the In kit with the check box.
As you can see in my code, I added span tags around the text. I experimented with it by adding margin properties to these span tags, but it didn't work properly. I tried a bunch of it works okay but I atleast need 15 to 20 of them which even didn't solve my problem.
Is there any alternative for this? I could even try other alternatives for the p tag too.
Thank you.
This can at least get you started, it's just rows and columns and some minor CSS. The problem you'll have is on a mobile device, if you want this to remain completely horizontal it'll start to break down.
.well-md.well-head {
background: #3973a6;
border: none;
color: #fff;
font-size: 18px;
height: 60px;
text-align: center;
}
.checkbox {
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<form>
<div class="row well well-md well-head">
<div class="col-xs-4">
<p>Items</p>
</div>
<div class="col-xs-3">
<p>Quantity</p>
</div>
<div class="col-xs-3">
<p>In Kit</p>
</div>
</div>
<div class="row">
<div class="form-group col-xs-4">
<input type="text" class="form-control" id="unlabelled-items" name="unlabelled-items" placeholder="Enter code or description">
</div>
<div class="form-group col-xs-3">
<input type="text" class="form-control" id="quantity" name="quantity" placeholder="Enter Quantity">
</div>
<div class="form-group">
<div class="form-group col-xs-3">
<div class="form-group">
<div class="checkbox">
<input type="checkbox" id="in-kit" name="in-kit">
</div>
</div>
</div>
<div class="form-group col-xs-2">
<button class="btn btn-primary" id="add-btn">Add</button>
</div>
</div>
</div>
</form>
</div>
You need to put your text descriptors into columns that match with the columns for you inputs. Like this:
<div class="container-fluid" id="unlabelled">
<p class="bg-primary">
<div class="row">
<div class="form-group col-md-5"> Items</div>
<div class="form-group col-md-2">Quantity</div>
<div class="form-group col-md-2">In Kit</div>
</div>
</p>
<form>
<div class="form-group col-md-5">
<input type="text" class="form-control" id="unlabelled-items" placeholder="Enter code or description">
</div>
<div class="form-group col-md-2">
<input type="text" class="form-control" id="quantity" placeholder="Enter Quantity">
</div>
<div class="form-group">
<div class="form-group col-md-2">
<input type="checkbox" id="in-kit">
</div>
<div class="form-group col-md-2">
<button class="btn-primary" id="add-btn">Add</button>
</div>
</div>
</form>
</div>
After searching everywhere i couldnt see exactly how i can design an inline form that has the following design: (using bootstrap 3 classes instead of css customizations when possible)
When the user has a wide screen:
Form-Legend
LabelFieldA: InputFieldA LabelFieldB: InputFieldB LabelFieldC: InputFieldC <Submit Button>
When the user has a smaller screen:
Form-Legend
LabelFieldA: InputFieldA LabelFieldB: InputFieldB
LabelFieldC: InputFieldC <Submit Button>
The idea is that the design initially puts all the fields in one line and if it doesnt fit the controls would jump to the next line, but maintaining the Label + Field together.
Also if there is a way so the spacing between each Label + Input is greater than the spacing between the Label and its Field.
And lastly if there is a way of having more vertical margin between the Label + Field when it jumps to the next line.
Option #1 : fixed columns
You can use a structure mixing col-xs-12, col-sm-6 and col-lg-3 to get 1, 2 or 4 columns. Inside your form-group, remember to fix label/input sizes with col-xs-4 and col-xs-8 :
<div class="container">
<form class="form form-inline" role="form">
<legend>Form legend</legend>
<div class="form-group col-xs-12 col-sm-6 col-lg-3">
<label for="InputFieldA" class="col-xs-4">Field A</label>
<div class="col-xs-8">
<input type="text" class="form-control" id="InputFieldA" placeholder="InputFieldA">
</div>
</div>
<div class="form-group col-xs-12 col-sm-6 col-lg-3">
<label for="InputFieldB" class="col-xs-4">Field B</label>
<div class="col-xs-8">
<input type="text" class="form-control" id="InputFieldB" placeholder="InputFieldB">
</div>
</div>
<div class="form-group col-xs-12 col-sm-6 col-lg-3">
<label for="InputFieldC" class="col-xs-4">Field C</label>
<div class="col-xs-8">
<input type="text" class="form-control" id="InputFieldC" placeholder="InputFieldC">
</div>
</div>
<div class="form-group col-xs-12 col-sm-6 col-lg-3">
<button type="submit" class="btn btn-default col-xs-8 col-xs-offset-4">Submit Button</button>
</div>
</form>
</div>
You still need a few CSS :
// get a larger input, and align it with submit button
.form-inline .form-group > div.col-xs-8 {
padding-left: 0;
padding-right: 0;
}
// vertical align label
.form-inline label {
line-height: 34px;
}
// force inline control to fit container width
// http://getbootstrap.com/css/#forms-inline
.form-inline .form-control {
width: 100%;
}
// Reset margin-bottom for our multiline form
#media (min-width: 768px) {
.form-inline .form-group {
margin-bottom: 15px;
}
}
You can add as many inputs as you want.
Bootply
Option #2 : fluid columns
To be able to not care of the number of fields per row, you can use this structure :
<div class="container">
<form class="form form-inline form-multiline" role="form">
<legend>Form legend</legend>
<div class="form-group">
<label for="InputFieldA">Field A</label>
<input type="text" class="form-control" id="InputFieldA" placeholder="InputFieldA">
</div>
<div class="form-group">
<label for="InputFieldB">Very Long Label For Field B</label>
<input type="text" class="form-control" id="InputFieldB" placeholder="InputFieldB">
</div>
<div class="form-group">
<label for="InputFieldC">F. C</label>
<input type="text" class="form-control" id="InputFieldC" placeholder="InputFieldC">
</div>
<div class="form-group">
<label for="InputFieldD">Very Long Label For Field D</label>
<input type="text" class="form-control" id="InputFieldD" placeholder="InputFieldD">
</div>
<div class="form-group">
<label for="InputFieldE">Very Long Label For Field E</label>
<input type="text" class="form-control" id="InputFieldE" placeholder="InputFieldE">
</div>
<div class="form-group">
<label for="InputFieldF">Field F</label>
<input type="text" class="form-control" id="InputFieldF" placeholder="InputFieldF">
</div>
<div class="form-group">
<button type="submit" class="btn btn-default">Submit Button</button>
</div>
</form>
</div>
And a few CSS lines to fix margins :
.form-multiline .form-group {
margin-bottom: 15px;
margin-right: 30px;
}
.form-multiline label,
.form-multiline .form-control {
margin-right: 15px;
}
Bootply
The same as option #1 from #zessx, but without overriding CSS. This one also aligns labels to the right to increase space between label-control pairs. Class "media" is there to add top margin without creating a custom class, but in general case it is better to have a custom one.
<div class="form-horizontal">
<legend>Form legend</legend>
<div class="media col-xs-12 col-sm-6 col-lg-3">
<label for="InputFieldA" class="control-label text-right col-xs-4">Field A</label>
<div class="input-group col-xs-8">
<input type="text" class="form-control" id="InputFieldA" placeholder="InputFieldA">
</div>
</div>
<div class="media col-xs-12 col-sm-6 col-lg-3">
<label for="InputFieldB" class="control-label text-right col-xs-4">Field B</label>
<div class="input-group col-xs-8">
<input type="text" class="form-control" id="InputFieldB" placeholder="InputFieldB">
</div>
</div>
<div class="media col-xs-12 col-sm-6 col-lg-3">
<label for="InputFieldC" class="control-label text-right col-xs-4">Field C</label>
<div class="input-group col-xs-8">
<input type="text" class="form-control" id="InputFieldC" placeholder="InputFieldC">
</div>
</div>
<div class="media col-xs-12 col-sm-6 col-lg-3">
<button type="submit" class="btn btn-default col-xs-8 col-xs-offset-4">Submit Button</button>
</div>
</div>
Bootply
I would propose something completely different, wrap the labels and fields inside inline divs:
<div style="display:inline-block">
Label:input
</div>
This way, when they are about to break, they break in pairs, labels+inputs.
Alright I played with the grid system and this is as close as I could get to your setup.
<div class="container">
<form role="form" class="form-horizontal">
<div class="form-group col-sm-5">
<label for="inputPassword" class="col-xs-4 control-label">Email</label>
<div class="col-xs-8">
<input type="password" class="form-control" id="inputPassword" placeholder="Password" />
</div>
</div>
<div class="form-group col-sm-5">
<label for="inputPassword" class="col-xs-4 control-label">Password</label>
<div class="col-xs-8">
<input type="password" class="form-control" id="inputPassword" placeholder="Password" />
</div>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
This has two fields only. You might want to change the col classes to fit your layout.
jsFiddle
You can try below
Working here- http://www.bootply.com/117807
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="row">
<div class="col-md-4 col-xs-3 col-sm-4"><label>First Name</label></div>
<div class="col-md-8 col-xs-9 col-sm-8"><input type="text"></div>
</div>
</div>
<div class="col-md-4">
<div class="row">
<div class="col-md-4 col-xs-3 col-sm-4"><label>Last Name</label></div>
<div class="col-md-8 col-xs-9 col-sm-8"><input type="text"></div>
</div>
</div>
<div class="col-md-4">
<div class="row">
<div class="col-md-4 col-xs-3 col-sm-4"><label>Contact</label></div>
<div class="col-md-8 col-xs-9 col-sm-8"><input type="text"></div>
</div>
</div>
</div>
</div>
The simplest way is to put both label and text input in cols div. Hope this will save time for all others :)
<div class="col-md-3 text-right">
<label>City</label>
</div>
<div class="col-md-3 text-right">
<asp:TextBox data-toggle="tooltip" pbpo-validation-type="required" title="City" runat="server" ID="textbox_city" CssClass="form-control input-sm" ClientIDMode="Static" placeholder=""></asp:TextBox>
</div>