I have developed a form using Bootstrap and I need the form to behave correctly on different devices. In one part of my form I have three inputs on one row, which usually works fine. But when I emulate different devices in the browser I see that the labels are broken into two lines when the screen width is to narrow. This makes sense of course, but I need a solution to prevent this. Is it possible? I can accept that the label/icon is cropped, but not divided to several lines. The form is generated by PHP and the labels may vary in length.
My expected result is like this (labels will have an icon on their side):
But when the screen width gets too narrow it looks like this:
I don't want the icon to appear on a new line. I would rather prefer that it was hidden if there's no space for it.
In the sample code below I have forced the width to 350px to illustrate the problem. When using width 400px or more it looks good:
<html>
<head>
<title>Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
</head>
<body>
<div class="container" style="max-width:350px">
<form>
<div class="form-row">
<div class="col-4">
<div class="form-group">
<label for="input-1">First label <span class='fas fa-info-circle'></span>
</label>
<input id="input-1" class="form-control" name="input1" type="text">
</div>
</div>
<div class="col-4">
<div class="form-group">
<label for="input-1">Second label <span class='fas fa-info-circle'></span></label>
<input id="input-1" class="form-control" name="input2" type="text">
</div>
</div>
<div class="col-4">
<div class="form-group">
<label for="input-1">Third label <span class='fas fa-info-circle'></span></label>
<input id="input-1" class="form-control" name="input3" type="text">
</div>
</div>
</div>
</form>
</div>
</body>
</html>
First of all you have to find at which device width, it is breaking, after that you can add media query in css to hide the icon.
Like this:
#media screen and (max-width: 350px) {
.fa-info-circle {
display: none;
}
}
this will hide the icon for width 350px or less.
You can use ellipsis in the label tag. So a part of the label along with the icon will be replaced with an ... when they exceed over the width limit.
label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Related
<div className="form-inline">
<label>1.</label><br />
<input type="text" className="form-control" />
</div>
Using bootstrap, why when I do input 100% the form will break?
https://jsfiddle.net/bdw9eyme/
How to make label and input to be at same line and input will fill the rest of the screen?
You shouldn't use a br to create a break here, you can use CSS for that. Also you should either nest your input in the label, or use the for attribute with the label to link to an id on the input.
Making the row flex with the input set to flex-grow: 1 will put the input by the label text, and make the input grow to take up the available space.
input {
flex-grow: 1;
margin-left: 1em;
}
.fw {
display: flex;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.0/bootstrap-table.min.css" rel="stylesheet"/>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div className="form-inline">
<label class="fw">1. <input type="text" className="form-control"></label>
</div>
i think this is what you're looking for
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="form-group">
<label class="col-xs-2">1.</label>
<div class="col-xs-10">
<input class="form-control" type="text"/>
</div>
</div>
</body>
I have this Bootstrap horizontal form but the problem is label text is not aligned . How can I align the label text.
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h3>Signup Form</h3><hr/>
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="username" class="col-sm-2 control-label">Username</label>
<div class="col-sm-4">
<input type="text" placeholder="Your Username ..." class="form-control"/>
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-4">
<input type="email" placeholder="Your Email ..." class="form-control"/>
</div>
</div>
</form>
</div>
</div>
</div>
<script src="bootstrap/js/jquery-1.11.3.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
I want Email label to be aligned with Username label
It is aligned right by default in Bootstrap stylesheet, you can give your form and id and add something like this to your stylesheet:
#signup-form label {
text-align: left;
}
This will align all the labels in your form to left, you may modify the selector to your needs to limit the scope of this style.
Working sample at JSBin.
.form-horizontal .control-label {
text-align: left;
}
simply use this.
CSS:
.control-label {
text-align:left!important;
}
Given the following HTML, how would I make the Label, Input, and 2 Buttons exist on the same "line", and have the input take 100% space between the Label and 2 Buttons, with changing browsers widths? In other words, I want the input anchored on both sides, so that that will change width as you make the browser smaller and larger widths.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>example</title>
<style>
/* ?? */
</style>
</head>
<body>
<div id="container">
<form class="form">
<p>
<label>xyz:</label>
<span class="item">
<input type="text" class="txt" name="description" id="description" />
<button>A</button>
<button>B</button>
</span>
</p>
<br clear="all" />
</form>
</div>
</body>
</html>
See JSFiddle here: http://jsfiddle.net/3vGtJ/
You could also try using display:table and display:table-cell
http://jsfiddle.net/3vGtJ/1/
I am new to Twitter Bootstrap and am starting to fumble my way through its use. While certain aspects of the framework are starting to make sense I am still struggling with form styling. I am trying to setup several different sections of a form which will have elements that are styled utilizing .form-inline. In one such instance I am also attempting to use .input-append with little luck.
<div class="row">
<div class="well span12">
<div class="row">
<div class="span12 form-inline input-append">
<label for="assetSearch">Asset Search</label>
<input type="search" id="assetSearch" placeholder="">
<span class="add-on"><i class="icon-search"></i></span>
</div>
</div>
<div class="row">
<div class="span12 form-inline">
<label for="service">Service</label>
<input type="text" id="service" autocomplete="off" />
</div>
</div>
</div>
</div>
The above markup renders like this:
As you can see "Asset Search" is not inline with the form input. If i remove the .input-append class from the containing div things line up. However, the search icon is no longer embedded in the text box, but instead to the right of text box.
How can I use .form-inline in cunjunction with .input-append?
You should not put inside a input-append (or prepend) anything else than inputs, buttons or .add-ons (this might not be exhaustive).
Try wrapping the whole thing into a div.input-append and let the .form-inline handle the floating : Demo on jsfiddle
<div class="span12 form-inline">
<label for="assetSearch">Asset Search</label>
<div class="input-append">
<input type="search" id="assetSearch" placeholder="" />
<span class="add-on"><i class="icon-search"></i></span>
</div>
</div>
Here's a fiddle of working alignment: http://jsfiddle.net/Jeff_Meadows/xGRtL/
The two fixes are to set vertical-align of <label> elements inside elements of class .input-append, and to reset the font-size of your element to 14px (it's set to 0 somewhere else in bootstrap). Rather than create a rule based on .input-append, I created a new class that you can add to your containing element. That way, you won't get unexpected results elsewhere.
.input-prepend label, .input-append label {
vertical-align: middle;
}
.fix-text-spacing {
font-size: 14px;
}
I'm having some trouble centering my Bootstrap login form.
Centering
I've tried many different ways of centering the form. The whole div is centered with the col-md-offset class, but I don't understand how to make the content (the form inputs) center in the div itself. For the text I know you can use text align, and for content I usually use margin: 0, auto;, but that isn't working for the form.
I also want to center it vertically, if possible, but given what I have researched on the internet, it seems very difficult to do so, and there is nothing I've found in the bootstrap references explaining how to do so.
Another random question, is why on the form are the left corners right angles whereas the right corners are rounded? Even when I change the corner-radius it only effects the right corners.
CODE:
http://jsbin.com/gamufagehu/edit?html
If you want to place the form in the center of the screen then use position: absolute and don't use the grid. You can use media queries to control other factors depending on what you ultimately want on smaller or larger viewports.
Also, you're use of input-group (Docs) doesn't really make sense and is the reason you're having adverse styling on your inputs (one being shorter than the other and the border-radius). Use form-group instead.
.myForm {
min-width: 500px;
position: absolute;
text-align: center;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 2.5rem
}
#media (max-width: 500px) {
.myForm {
min-width: 90%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" id="logoText">Test</a>
</div>
<div class="collapse navbar-collapse">
<form class="navbar-form navbar-right" method="post">
<div class="form-group">
<input type="email" class="form-control" name="loginemail" id="loginemail" placeholder="email" />
</div>
<div class="form-group">
<input type="password" class="form-control" name="loginpassword" placeholder="password" />
</div>
<input type="submit" name="submit" class="btn btn-default" value="Log In" />
</form>
</div>
</div>
</div>
<div class="container">
<form class="myForm" method="post">
<div class="form-group">
<label for="email">Email</label>
<input class="form-control input-lg" type="email" name="email" id="email" placeholder="email" />
</div>
<div class="form-group">
<label for="password">Password</label>
<input class="form-control input-lg" type="password" name="password" placeholder="password" />
</div>
<div class="form-group">
<input type="submit" name="submit" class="btn btn-success btn-lg" value="Sign Up" />
</div>
</form>
</div>
you can use
.input-group{
margin:0px auto;
}
here is a bin working fine with same rules.
the reason you input box has right-top and right-bottom radius but not the left-top and left-right is that it is excepting something on the left of it, like some button or something, let me throw a link to make it understand better. go to amount field on this link. we can always overwrite the bootstrap rules but it is not recommended when there is a problem with use of classes, good luck.
well well well, sorry for frequent edits, but check out the use of .input-group class, i guess you messed it up there
I would recommend using column layout in a proper way.
You could wrap your login elements in divs that are based on column layout grid with length 4 and offset equal 4 too. You would get elements centered on the page and fully responsible. Then you could style elements inside them as in normal form groups.
I'd also recommend not using input groups as they are designed to group inputs as the name suggests and this is the reason you have square corners on left side of the inputs (for other inputs on left to seamlessly integrate into one input group) :)
Just put every form row inside that structure:
<div class="row">
<div class="col-sm-4 col-sm-offset-4">
<div class="input-group">(...)</div>
</div>
</div>
Look here:
JSBin example
Good note for future use of any library, including bootstrap - it is a good way to read all examples of use of particular library and its documentation, because otherwise you could end up overwriting functionalities that are already provided within it :)
You can use this:
.input-group {
position: relative;
border-collapse: separate;
display: block;
}