<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>
Related
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;
}
I am trying to style a particular label with an id but not sure if the following code is correct though as nothing is changing.
I am trying to move the label id down a few spaces and am trying to use the positioning for this but can't seem to get it moving.
From my understanding, I think that you can give an id for the label correct?
div.changepassword #temporary_password label {
color: #008000;
font-size: 1em;
white-space: nowrap;
position: absolute;
left: -2em;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="../style.css">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
</head>
<body>
<div class="changepassword">
<h2>Update your password here!</h2>
<form class="signup-form" action="changepassword2.php" method="POST">
<br></br>
<label>Username</label>
<input type="text" name="user_uid" placeholder="Username">
<br></br>
<label id="temporary_password">Temporary Password</label>
<br></br>
<div class="changepassword2">
<input type="text" name="temporary_password" placeholder="token">
<br></br>
<label>New Password</label>
<input type="password" name="password" placeholder="Password">
<br></br>
<label>Confirm New Password</label>
<input type="password" name="confirm_password" placeholder="Confirm Password">
<br></br>
<button type="submit" name="submit">Update Password</button>
</div>
</div>
</body>
</html>
add this code
CSS
div.changepassword label#temporary_password {
color:#008000;
font-size: 1em;
white-space: nowrap;
position: absolute;
left: 0em;
}
You can remove the space from bottom of #temporary_password label by removing extra br tags from bottom. Though if its required by your design please find my solution below:
div.changepassword label#temporary_password {
position:absolute;
margin-top:15px;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="../style.css">
<link href="https://fonts.googleapis.com/css?family=Lobster"
rel="stylesheet">
</head>
<body>
<div class="changepassword">
<h2>Update your password here!</h2>
<form class="signup-form" action="changepassword2.php" method="POST">
<br></br>
<label>Username</label>
<input type="text" name="user_uid" placeholder="Username">
<br></br>
<label id="temporary_password">Temporary Password</label>
<br></br>
<div class="changepassword2">
<input type="text" name="temporary_password" placeholder="token">
<br></br>
<label>New Password</label>
<input type="password" name="password" placeholder="Password">
<br></br>
<label>Confirm New Password</label>
<input type="password" name="confirm_password" placeholder="Confirm Password">
<br></br>
<button type="submit" name="submit">Update Password</button>
</div>
</div>
</body>
</html>
So, first of all, if you put a hash (#) in front of an identifier in css that means look for the element with this ID. So the div.changepassword part is superfluous.
When you use #temporary_password it targets directly the element with that id. But because you have #temporary_password label it targets any label element inside the element with the id temporary_password.
The easiest it to just target the element that you want to style directly. But this approach is not recommended if you intend to reuse the style (id's need to be unique on the page). In that case you should work with CSS classes instead.
A good way to learn and experiment with CSS is to use the developer tools in chrome. You can test and experiment in real time without having to reload anything. Also very useful is to right click an element in the Elements view and select Copy/Copy Selector. This will give you a CSS selector that targets that element.
There is a multiple input feature provided in Bootstrap 4 that looks like the following:
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="">First and last name</span>
</div>
<input type="text" class="form-control">
<input type="text" class="form-control">
</div>
Is there a trivial way to replicate this behavior using Bootstrap 3.3.7? Would it require stripping styles from Bootstrap 4 or is there something I'm overlooking in 3.3.7 that already allows this behavior? The documentation is available here: https://getbootstrap.com/docs/4.0/components/input-group/#multiple-inputs
I cannot speak to it being trivial or not, but with some additional CSS and with the assistance of the Bootstrap Grid you can achieve similar results:
.input-group-multi [class*='col-'] {
margin: 0 !important;
padding: 0 !important;
}
.input-group-multi .form-control {
border-right: 0;
}
.input-group-multi [class*='col-']:last-child .form-control {
border-radius: 0 4px 4px 0;
border-right: 1px solid #ccc;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="input-group input-group-multi">
<div class="input-group-addon">First and last name</div>
<div class="col-xs-6"><input type="text" class="form-control"></div>
<div class="col-xs-6 no-gutters"><input type="text" class="form-control"></div>
</div>
<br />
<div class="input-group input-group-multi">
<div class="input-group-addon">First and last name</div>
<div class="col-xs-4"><input type="text" class="form-control"></div>
<div class="col-xs-4"><input type="text" class="form-control"></div>
<div class="col-xs-4"><input type="text" class="form-control"></div>
</div>
<br />
<div class="input-group input-group-multi">
<div class="input-group-addon">First and last name</div>
<div class="col-xs-3"><input type="text" class="form-control"></div>
<div class="col-xs-3"><input type="text" class="form-control"></div>
<div class="col-xs-3"><input type="text" class="form-control"></div>
<div class="col-xs-3"><input type="text" class="form-control"></div>
</div>
In the above code snippet you can see how .input-group-mutli is sort of the heavy-lifter here. With this new class we can use a wildcard match on the Bootstrap Grid column to remove all margin and padding. That alone gets you to where your multiple inputs will line up nicely... but with the borders doubling up.
A little extra CSS to detect remove the right-border and then re-apply that border on the last column+input provides you with a pretty spot on multiple input feature. With one exception of course; this presumes that input-group-addon is always on the left.
A little CSS will give you the same effect.
In the following snippet I created the css class input-multiple and modified the CSS styling accordingly. Adjust field widths as needed, here I simply altered the width:100% associated with Bootstraps .form-control class
.input-multiple>input.form-control {
width: auto;
}
.input-multiple>input.form-control+input.form-control {
border-left: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div style="padding:20px">
<div class="row">
<div class="col-lg-6">
<div class="input-group input-multiple">
<span class="input-group-addon" id="sizing-addon1">First and Last Name</span>
<input type="text" class="form-control" placeholder="First Name">
<input type="text" class="form-control" placeholder="Last Name">
</div>
</div>
</div>
</div>
This question already has answers here:
Why don't flex items shrink past content size?
(5 answers)
Closed 5 years ago.
I have the following:
.flex { display: flex; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
rel="stylesheet"/>
<div class="flex">
<input class="form-control" />
<div class="flex">
<input class="form-control" value="123456789" />
<input class="form-control" value="123456789" />
</div>
</div>
Why I can't see the latest input entirely in Microsoft Edge (is OK even in IE), and how to fix it.
If you add min-width: 0; to form-control it work cross browser.
It appears Edge does some other calculation for the input's width, and since the min-width defaults to auto, it won't allow it to be less than its computed width, which min-width: 0 solves.
Will see if I can find some more info about this issue, and when/if, I will update this answer.
.flex { display: flex; }
.form-control { min-width: 0; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="flex">
<input class="form-control" />
<div class="flex">
<input class="form-control" value="123456789" />
<input class="form-control" value="123456789" />
</div>
</div>
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;
}