I have created an input file button and I want to set it to fullwidth (display:block).
I have hidden the input field but still don't see a difference. Here is my code:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<form method='POST' action='' enctype='mutlipart/form-data'>
<label for="uploadAvatar">
<p style="display:block" class="btn btn-secondary btn-sm mt-3">Upload new avatar</p>
<input type="file" id="uploadAvatar" name="uploadAvatar" style="display:none">
</label>
</form>
You have not add the display style properties to the HTML, because by default all form elements in Bootstrap are display: block and width: 100%.
Besides, you can use native Bootstrap 4 class utilities, like:
d-block : to display block any element
btn-block : to display block a btn element or an element with the btn class.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<form>
<div class="form-group">
<label for="exampleFormControlFile1">Example file input</label>
<input type="file" class="form-control-file" id="exampleFormControlFile1" style="border: 1px solid #000;">
</div>
</form>
<form method='POST' action='' enctype='mutlipart/form-data'>
<label for="uploadAvatar" class="d-block">
<p class="btn btn-secondary btn-block btn-sm mt-3">Upload new avatar</p>
<input type="file" id="uploadAvatar" name="uploadAvatar" style="display:none">
</label>
</form>
You can set col-12 to the label.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<form method='POST' action='' enctype='mutlipart/form-data'>
<label for="uploadAvatar" class="col-12">
<p style="display:block" class="btn btn-secondary btn-sm mt-3">Upload new avatar</p>
<input type="file" id="uploadAvatar" name="uploadAvatar" style="display:none">
</label>
</form>
Related
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 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>
I have the following form in my Angular app Using Bootstrap 4. I want my form label and input text box to be on the same line but its not working. The label and the input text box appears on separate lines. I have searched but couldn't find any better answer ::
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-12">
<form class="form-horizontal" [formGroup]="parentCategoryForm" autoComplete="off">
<div class="form-group">
<label class="control-label col-md-2" for="parent">Category name</label>
<div class="col-md-10">
<input type="text" formControlName="parentName" name="parentName" class="form-control" id="parentName" />
</div>
</div>
<div class="btn-toolbar pull-right">
<button type="button" (click)="cancel()" class="btn btn-outline-danger btn-sm mr-4">Cancel</button>
<button type="submit" class="btn btn-outline-primary btn-sm">Submit</button>
</div>
</form>
</div>
</div>
I am following the tutorials from this site Creating Horizontal Form Layout
What am I doing wrong?
please add class row on form-group
<div class="form-group row"> </div>
Use the input-group class. Follow This
I want to place the search button in the column next to the input form using the Bootstrap grid, but since both the "input" tag and "button" tag must be in the div with the "form-group" attribute, this makes things difficult.
This is my original code:
<div class="row">
<div class="col-md-12 formMove">
<form id="getposts_form" role="form">
<div class="form-group">
<input type="text" class="form-control searchBar" id="search" name="search" placeholder="">
<button class="btn btn-default searchBtn" type="submit" id="submit ">Search <span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
<br><div id="errors"></div>
</div>
</form>
</div>
</div><!--end row-->
And this is my failed attempt with nested columns:
<div class="row">
<div class="col-md-12 formMove">
<div class="row">
<div class="col-md-10">
<form id="getposts_form" role="form">
<div class="form-group">
<input type="text" class="form-control searchBar" id="search" name="search" placeholder="">
</div> <!--I want this closing tag to close "col-md-10", but its closing the "form-group"-->
<div class="col-md-2">
<button class="btn btn-default searchBtn" type="submit" id="submit ">Search <span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
<br><div id="errors"></div>
</div>
</form>
</div>
</div>
</div>
</div>
Thanks in advance.
I could not understand why do you need button and input within the same form-group class, as you can use separate form-group class for them.
The approach through which in line forms are achieved is using .form-inline class with the<form> tag. As you wanted an answer using grid system I have provide a snippet for that also.
I have added two snippet
using .form-inline class
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class="row">
<div class="col-md-12 formMove">
<form id="getposts_form" class="form-inline" role="form">
<div class="form-group">
<input type="text" class="form-control searchBar" id="search" name="search" placeholder="">
</div>
<div class="form-group">
<button class="btn btn-default searchBtn" type="submit" id="submit ">Search <span class="glyphicon glyphicon-search" aria-hidden="true"></span></button></div>
<br><div id="errors"></div>
</form>
</div>
</div><!--end row-->
</body>
</html>
using bootstrap grid system
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class="row">
<div class="col-md-12 formMove">
<form id="getposts_form" class="form-inline" role="form">
<div class="form-group">
<div class="row">
<div class="col-md-8 col-lg-8 col-sm-8 col-xs-8">
<input type="text" class="form-control searchBar" id="search" name="search" placeholder="">
</div>
<div class="col-md-4 col-lg-4 col-sm-4 col-xs-4">
<button class="btn btn-default searchBtn" type="submit" id="submit ">Search <span class="glyphicon glyphicon-search" aria-hidden="true"></span></button></div>
</div>
<br><div id="errors"></div>
</div>
</form>
</div>
</div><!--end row-->
</body>
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>