Why is button behaving like a block element when it is a block-inline element? Input tag is inline as well so the code below should show input ang button besides each other horizontally but inteads it is showing one on top of another using Bootstrap 4.
<button type="button" style="display: inline" class="btn btn-primary">C</button>
<input type="text" style="display: inline" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
.form-control has width: 100%;
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" style="display: inline" class="btn btn-primary">C</button>
<input type="text" style="display: inline" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
Set width: auto; and it displays inline as expected
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" style="display: inline" class="btn btn-primary">C</button>
<input type="text" style="display: inline; width: auto;" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
Bootstraps concept is a grid layout structure, so by simply grouping them will make it work fine, and it will scale and use available space properly (width in this case)
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group">
<span class="input-group-btn">
<button type="button" class="btn btn-primary">C</button>
</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
Related
With Bootstrap 5 I'd like to add a close button to form floating and form control input fields so users can easily clear text on mobile, but it's not working as expected. I'm after a simple 'x' on the right end that'll show after text input, as shown in the search field in this example.
Minimal reproduction of examples from docs with the close button I expected to work inserted:
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
</head>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="name#example.com">
<button type="button" class="btn-close" disabled aria-label="Close"></button>
<label for="floatingInput">Email address</label>
</div>
<div class="mb-3">
<label for="exampleFormControlInput1" class="form-label">Email address</label>
<button type="button" class="btn-close" disabled aria-label="Close"></button>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name#example.com">
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script>
</html>
What am I doing wrong?
I might be doing something stupid, but I can't find any examples on this for Bootstrap 5, so please forgive the dumb question.
"I'm after a simple 'x' on the right end that'll show after text
input, as shown in the search field in this example."
The 'X' is that example is simply a search type input...
<div class="form-floating mb-3">
<input type="search" class="form-control" id="floatingInput" placeholder="name#example.com">
<label for="floatingInput">Email address</label>
</div>
Or, use an input group as explained in this similar question
<div>
<label for="exampleFormControlInput2" class="form-label">Email address</label>
<div class="input-group">
<input class="form-control border-end-0 border" type="email" placeholder="name#example.com" id="exampleFormControlInput2">
<span class="input-group-append">
<button class="btn btn-white border-start-0 border" type="button">
<i class="bi bi-search"></i>
</button>
</span>
</div>
</div>
Codeply
<div class="input-group position-relative d-inline-flex align-items-center">
<input class="form-control " formControlName="textInput" type="text" value="">
<i class="bi bi-search position-absolute"
style="
right: 10px;
cursor: pointer;
z-index: 100;">
</i>
</div>
https://codesandbox.io/s/bootstrap-5-playground-forked-z65ldi?file=/index.html
How can i add a 2nd floating label to the right input field? the problem now is that the 2nd label overlaps the first label in the 1st input field:
<div class="form-floating input-group">
<input type="text" name="" class="form-control delete-from-date" value="" />
<label for="floatingDateToDelete">startdate</label>
<span class="input-group-text">till</span>
<input type="text" name="" class="form-control delete-till-date" value="" />
<label for="floatingDateToDelete">Enddate</label>
<button type="submit" class="btn btn-danger delete-multiple-events" name="submit">Delete</button>
</div>
here is a fiddle you can see the issue: http://jsfiddle.net/1uf0zv2d/6/
The floating label "Enddate" should occur in the right input field
Each input+label combo needs to be within its own .form-floating class. Having multiple inputs in the same div was causing that issue. Also, a placeholder is required on each input field.
I've moved the entire combo into a container that has .input-group on it. You can look at the changes here.
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</head>
<body>
<div class="input-group">
<div class="form-floating">
<input type="text" class="form-control delete-from-date" id="floatingDateToDelete1" placeholder="startdate" />
<label for="floatingDateToDelete1">startdate</label>
</div>
<span class="input-group-text">till</span>
<div class="form-floating">
<input type="text" class="form-control delete-till-date" id="floatingDateToDelete2" placeholder="Enddate" />
<label for="floatingDateToDelete2">Enddate</label>
</div>
<button type="submit" class="btn btn-danger delete-multiple-events" name="submit">Delete</button>
</div>
</body>
</html>
I'm using Bootstrap 5. I'm trying to use floating labels with centered form controls that have a width: auto instead of Bootstrap's default 100%. I'm not sure how I can get the floating labels to be inside the input fields at all times. I've currently got the following form and relevant CSS:
<form action="/login" method="post">
<div class="form-floating mb-3">
<input type="text" class="form-control" name="username" id="floatingUsername" placeholder="Username" autocomplete="off" autofocus>
<label for="floatingUsername">Username</label>
</div>
<div class="form-floating mb-3">
<input type="password" class="form-control" name="password" id="floatingPassword" placeholder="Password" autocomplete="off">
<label for="floatingPassword">Password</label>
</div>
<button class="btn btn-light border" type="submit">Log In</button>
</form>
main .form-control
{
/* Center form controls and override 100% width */
display: inline-block;
width: auto;
}
main
{
/* Scroll horizontally*/
overflow-x: auto;
text-align: center;
}
And this is what that looks like:
labels not inside inputs
I've tried using a bunch of align and display properties in .form-floating, label, etc. I've also tried setting width:auto for labels but that didn't change anything either. Kind of at a loss here as I've only got minimal experience and it seems like floating labels are a relatively new addition to stock Bootstrap, so Google/SO didn't find much. Maybe it's just not possible to make the inputs small (not width:100%) and have working floating labels?
You can do with bootstrap flex behaviors & Grid system without use custom css.
Example 1
with flex behaviors
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex justify-content-center text-center">
<form action="/login" method="post">
<div class="form-floating mb-3">
<input type="text" class="form-control" name="username" id="floatingUsername" placeholder="Username" autocomplete="off" autofocus>
<label for="floatingUsername">Username</label>
</div>
<div class="form-floating mb-3">
<input type="password" class="form-control" name="password" id="floatingPassword" placeholder="Password" autocomplete="off">
<label for="floatingPassword">Password</label>
</div>
<button class="btn btn-light border" type="submit">Log In</button>
</form>
</div>
Example 2
with Grid system
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row justify-content-center text-center">
<div class="col-md-4">
<form action="/login" method="post">
<div class="form-floating mb-3">
<input type="text" class="form-control" name="username" id="floatingUsername" placeholder="Username" autocomplete="off" autofocus>
<label for="floatingUsername">Username</label>
</div>
<div class="form-floating mb-3">
<input type="password" class="form-control" name="password" id="floatingPassword" placeholder="Password" autocomplete="off">
<label for="floatingPassword">Password</label>
</div>
<button class="btn btn-light border" type="submit">Log In</button>
</form>
</div>
</div>
</div>
I can't find a way to reduce the width of the input window. I don't see or find any code that controls the width of the input window. The code below is taken from the Bootstrap v5 documentation, from the form element.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<form>
<div class="input-group mb-3">
<span class="input-group-text">#</span>
<input type="email" id="email" class="form-control" placeholder="Your email" aria-label="Email" aria-describedby="basic-addon1" />
<button type="submit" class="btn btn-primary btn-md">Sign up</button>
</div>
</form>
It's pretty simple. Add w class like the following examples:
This is the default width of the Bootstrap input element:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<form>
<div class="input-group mb-3">
<span class="input-group-text">#</span>
<input type="email" id="email" class="form-control" placeholder="Your email" aria-label="Email" aria-describedby="basic-addon1">
<button type="submit" class="btn btn-primary btn-md">Sign up</button>
</div>
</form>
You will need to reduce it by adding w-25 class like below:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<form>
<div class="input-group mb-3 w-25">
<span class="input-group-text">#</span>
<input type="email" id="email" class="form-control" placeholder="Your email" aria-label="Email" aria-describedby="basic-addon1">
<button type="submit" class="btn btn-primary btn-md">Sign up</button>
</div>
</form>
If you want to reduce it even more or make it bigger, change the w class to w-50, w-75, w-100, or w-auto.
This is all called Bootstrap Utilities Sizing.
The input element in BootStrap v5 is a flex item. To change it's width, just set the input element's flex-grow property to 0 and the flex-basis property to the value you want for the width (e.g. 100px) like this:
flex-grow: 0;
flex-basis: 100px;
Or you can use the flex shorthand property (the second value is for the flex-shrink property) like this:
flex: 0 1 100px;
Check and run the following Code Snippet for a practical example of the above approach:
/* CSS */
.input-group>input.someInput {flex: 0 1 100px;}
<!-- HTML -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"/><script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js"></script><script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.min.js"></script>
<form>
<div class="input-group mb-3">
<span class="input-group-text">#</span>
<input type="email" id="email" class="form-control someInput" placeholder="Your email" aria-label="Email" aria-describedby="basic-addon1">
<button type="submit" class="btn btn-primary btn-md">Sign up</button>
</div>
</form>
Because of using form-control, it is taking the full width allotted. You can use the column property like col-md-4 or other property to make the size you wanted.
Just use the 'size' property of input.
<form>
<div class="input-group mb-3">
<span class="input-group-text">#</span>
<input type="email" id="email" class="form-control" placeholder="Your email" aria-label="Email" aria-describedby="basic-addon1" size="20">
<button type="submit" class="btn btn-primary btn-md">Sign up</button>
</div>
</form>
this is my HTML
<div id="formSuscription">
<form class="form-inline">
<div class="form-group">
<input type="text" class="form-control" placeholder="First Name">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Last Name">
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Email">
</div>
<div class="form-group ">
<input type="button" class="form-control" value="Submit">
</div>
<div class="clearfix"></div>
<center>
<div class="form-group">
<label>
<input type="checkbox" class="form-control" value="Submit"> DON'T SHOW AGAIN
</label>
</div>
</center>
</form>
</div>
image: https://www.dropbox.com/s/mpa7rybvpngf19z/ohnails.png
I can't post image, due to my reputation
How can I make for the button is full width?
I tried with:
style: display: block; width: 100%;
and
class btn-block
and
<div class="form-group btn-group-justified">
<input class="form-control btn-block" type="button" style="display: block; width: 100%;" value="Submit">
</div>
but not working
You can override current css by adding id="submit" to the <button> tag and use css to change it's width.
Your example: http://jsfiddle.net/urahara/b64yf2jm/2/
You can do it statically :
edit this:
<input id="submit" type="button" class="form-control" value="Submit">
use css:
#submit{
width:180px; // <-- Your width value
}
Or use css dynamically via jQuery:
Here what we do is assigning the #submit button width with witdh of the other fields on the form. ( I added +8 to compensate padding or margins, just tweak it a bit )
jQuery:
$('#submit').css('width', $('.form-control').width()+8);
If you're using bootstrap shouldnt this work?
<button type="button" class="btn btn-primary btn-lg btn-block" >Block level button</button>
Creates a button the full width of its container.
http://getbootstrap.com/css/#buttons-sizes
Phil