set width 50% each in select tag and remaing part
<div class="input-group">
<select class="form-select">
<option selected value="dummy">Dummy</option>
<option selected value="rd">Random data</option>
</select>
<span class="input-group-text bg-theme">Selection</span>
<div class="dropdown">
<input
type="text"
class="form-control dropdown-toggle"
data-bs-toggle="dropdown"
readonly
/>
<div class="dropdown-menu p-0 w-100">
<div class="list-group">
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" checked />
dummy
</label>
</div>
</div>
</div>
</div>
How can i make select tag with 50% width and remaing part also 50% width ?
Simply you can use the BS5 grid system in order to change the size.
<div class="row g-2">
<div class="col-md">
<div class="form-floating">
<input type="email" class="form-control" id="floatingInputGrid" placeholder="name#example.com" value="mdo#example.com">
<label for="floatingInputGrid">Email address</label>
</div>
</div>
<div class="col-md">
<div class="form-floating">
<select class="form-select" id="floatingSelectGrid">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<label for="floatingSelectGrid">Works with selects</label>
</div>
</div>
</div>
Related
I am using Bootstrap 5.2, and I have a form that includes the following form snippet:
<div class="row mb-2 align-items-center">
<div class="col-sm-4">
<label class="checkbox-inline" for="Credit_Pulled">Credit Pulled</label>
<input type="checkbox" class="form-check-inline" value="1" name="Credit_Pulled" id="Credit_Pulled">
</div>
<div class="col-sm-4">
<label class="checkbox-inline" for="Is_On_Terms">Approved For Terms</label>
<input type="checkbox" class="align-middle" value="true" name="Is_On_Terms" id="Is_On_Terms">
</div>
<div class="col-sm-4 form-floating">
<label for="Terms_Days">Terms Period</label>
<select class="form-select form-control d-flex" id="Terms_Days" name="Terms_Days">
<option value="0" selected>NONE</option>
<option value="30">NET-30</option>
<option value="60">NET-60</option>
<option value="90">NET-90</option>
</select>
</div>
</div>
<div class="row mb-2">
<div class="col-sm-4 form-floating">
<label for="Credit_Limit">Approved Limit</label>
<input type="text" class="form-control d-flex" id="Credit_Limit" name="Credit_Limit">
</div>
</div>
<div class="row mb-2">
<div class="col-sm-12 w-100 form-floating">
<label for="Review_Notes">Review Notes</label>
<textarea class="form-control rounded" rows="8" id="Review_Notes" name="Review_Notes"></textarea>
</div>
</div>
When I view the form, this is what I get:
The problem is, the form labels and their contents overlap. Is there any way (even by adding custom CSS) to prevent this so that they display cleanly?
Bootstrap docs says that the <label> needs to come after the <input> https://getbootstrap.com/docs/5.0/forms/floating-labels/
This question already has answers here:
Vertical Align Center in Bootstrap 4 [duplicate]
(20 answers)
Closed 2 years ago.
I'm trying to build a simple filter-bar which has a custom-control element.
The element should be aligned vertically but it seems not to be working. This is the markup for the filter-bar:
<div class="bg-light p-3 card">
<form class="form-inline">
<div class="form-row">
<div class="col-auto">
<input type="text" placeholder="The team's name" class="form-control" value="" />
</div>
<div class="col-auto">
<select class="form-control">
<option value="">Select the season</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
</select>
</div>
<div class="col-auto">
<button type="submit" class="btn btn-secondary">
<i class="fas fa-search"/> Search</button>
</div>
<div class="col-auto">
<div class="custom-control custom-switch align-center">
<input type="checkbox" class="custom-control-input" id="vpx" checked="" />
<label class="custom-control-label" for="vpx">Hide 0-point teams</label>
</div>
</div>
</div>
</form>
</div>
But the result is shown below:
No matter which align- class I add, the element won't move a bit. Already tried to set the display property to inline-block as stated in the bootstap-docs.
Only way to achieve something like centered is to add mt-2 class but this seems not to be the correct way this should be done.
Add align-items-center to form-row and also close the <i> tag correctly on Search button
body{ min-width: 800px;}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="bg-light p-3 card">
<form class="form-inline">
<div class="form-row align-items-center">
<div class="col-auto">
<input type="text" placeholder="The team's name" class="form-control" value="" />
</div>
<div class="col-auto">
<select class="form-control">
<option value="">Select the season</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
</select>
</div>
<div class="col-auto">
<button type="submit" class="btn btn-secondary">
<i class="fas fa-search"> Search</i></button>
</div>
<div class="col-auto">
<div class="custom-control custom-switch align-center">
<input type="checkbox" class="custom-control-input" id="vpx" checked="" />
<label class="custom-control-label" for="vpx">Hide 0-point teams</label>
</div>
</div>
</div>
</form>
</div>
How do I adjust the bootstrap input group width and still have it be responsive. For example I only want the quantity input field to take x%(be much smaller) than description field. Also how do I wrap each input field on mobile? Thanks in advance, sorry I am a Noob.
<div class="container">
<div class="col-lg-1"></div>
<div class="col-lg-10">
<div class="panel panel-danger">
<div class="panel-heading text-center"><strong>Store Transfer</strong></div>
<div class="panel-body">
<div class="col-lg-12">
<div class="form-group">
<div class="input-group"> <span class="input-group-addon">Description</span>
<input type="text" class="form-control input-sm" placeholder="Item Description">
<span class="input-group-addon">Quantity</span>
<input type="text" class="form-control input-sm" placeholder="Quantity">
<span class="input-group-addon">Cost</span>
<input type="text" class="form-control input-sm" placeholder="Cost">
<span class="input-group-addon">Total $0.00</span>
</div>
</div>
</div>
<div class="col-lg-2"></div>
<div class="col-lg-8">
<div class="form-group">
<div class="input-group"><span class="input-group-addon">Transfer From:</span>
<select class="form-control form-control-sm">
<option value="store" disabled="" selected="" class="">Select Store</option>
<option value="Richfield" class="">Richfield</option>
<option value="Eagan" class="">Eagan</option>
</select>
<span class="input-group-addon">Transfer To:</span>
<select class="form-control">
<option value="store" disabled="" selected="" class="">Select Store</option>
<option value="Richfield" class="">Richfield</option>
<option value="Eagan" class="">Eagan</option>
</select>
<span class="input-group-addon" style="width:0px; padding-left:0px; padding-right:0px; border:none;"></span>
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-success" type="button">Submit</button>
</span>
</div>
</div>
</div>
<div class="col-lg-2"></div>
</div>
</div>
</div>
BootPly Here
I have a table. i want to add a row just above the table header. i have 8 divs to add in the row. I have following codes.
<div class = "container">
<div class="row" style="margin-top: 8px">
<div class = "col-sm-1">
<div class="dateselect_filter" id="dt_basic_length">
<label>
<select name="dt_basic_length" aria-controls="dt_basic" class="form-control input-sm">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
<option value="e">e</option>
</select>
</label>
</div>
</div>
<div class = "col-sm-1">
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked>S
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option2" autocomplete="off">L
</label>
</div>
</div>
<div class = "col-sm-1">
<div id="dt_basic_filter" class="dataTables_filter">
<label>
<input type="search" class="form-control" placeholder="Filter a">
</label>
</div>
</div>
<div class = "col-sm-1">
<div id="dt_basic_filter" class="dataTables_filter">
<label>
<input type="search" class="form-control" placeholder="Filter b" aria-controls="dt_basic">
</label>
</div>
</div>
<div class = "col-sm-1">
<div id="dt_basic_filter" class="dataTables_filter">
<label>
<input type="search" class="form-control" placeholder="Filter c" aria-controls="dt_basic">
</label>
</div>
</div>
<div class = "col-sm-3">
<div id="dt_basic_filter" class="dataTables_filter">
<label>
<span class="input-group-addon">
<i class="glyphicon glyphicon-search"></i>
</span>
<input type="search" class="form-control form-control-sm" placeholder="Search" aria-controls="dt_basic">
</label>
</div>
</div>
<div class = "col-sm-1">
<div class="dt_basic_filter" id="dt_basic_length">
<label>
<select name="dt_basic_length" aria-controls="dt_basic" class="form-control input-sm">
<option value="x">x</option>
<option value="y">y</option>
<option value="z">z</option>
<option value="xx">xx</option>
</select>
</label>
</div>
</div>
<div class = "col-sm-3">
<div id="dt_basic_filter" class="dataTables_filter">
<label>
<span class="input-group-addon">
<i class="fa fa-calendar"></i>
</span>
<input type="search" class="form-control form-control-sm" placeholder="calendar" aria-controls="dt_basic">
</label>
</div>
</div>
</div>
</div>
My problem is first 3 divs here have margin between them and last 3 divs have margins as well. But 2 divs in the middle have no margin and they are overlapped. Moreover, when i try to reduce the size of 'search' and 'calender' divs, they break into icon and field and take the space of the row below. Can anyone please tell me what went wrong here ? I just need moderate space between the divs in one row.
I wonder if this is what you mean by needing to add a header. (I did work with Bootstrap 4). Perhaps you could upload an image of what you're looking for, so that it's clearer :)
.search-custom {
width: 80%;
}
.calendar-custom {
width: 50%;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-12 text-center" style="border:1px solid;">Header</div>
</row>
<div class="row" style="margin-top: 8px">
<div class="col-sm-1">
<div class="dateselect_filter" id="dt_basic_length">
<label>
<select name="dt_basic_length" aria-controls="dt_basic" class="form-control input-sm">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
<option value="e">e</option>
</select>
</label>
</div>
</div>
<div class="col-sm-1">
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked>S
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option2" autocomplete="off">L
</label>
</div>
</div>
<div class="col-sm-1">
<div id="dt_basic_filter" class="dataTables_filter">
<label>
<input type="search" class="form-control" placeholder="Filter a">
</label>
</div>
</div>
<div class="col-sm-1">
<div id="dt_basic_filter" class="dataTables_filter">
<label>
<input type="search" class="form-control" placeholder="Filter b" aria-controls="dt_basic">
</label>
</div>
</div>
<div class="col-sm-1">
<div id="dt_basic_filter" class="dataTables_filter">
<label>
<input type="search" class="form-control" placeholder="Filter c" aria-controls="dt_basic">
</label>
</div>
</div>
<div class="col-sm-3">
<div id="dt_basic_filter" class="dataTables_filter">
<label>
<span class="input-group-addon">
<i class="glyphicon glyphicon-search"></i>
</span>
<input type="search" class="form-control form-control-sm search-custom" placeholder="Search" aria-controls="dt_basic">
</label>
</div>
</div>
<div class="col-sm-1">
<div class="dt_basic_filter" id="dt_basic_length">
<label>
<select name="dt_basic_length" aria-controls="dt_basic" class="form-control input-sm">
<option value="x">x</option>
<option value="y">y</option>
<option value="z">z</option>
<option value="xx">xx</option>
</select>
</label>
</div>
</div>
<div class="col-sm-3">
<div id="dt_basic_filter" class="dataTables_filter">
<label>
<span class="input-group-addon">
<i class="fa fa-calendar"></i>
</span>
<input type="search" class="form-control form-control-sm calendar-custom" placeholder="calendar" aria-controls="dt_basic">
</label>
</div>
</div>
</div>
</div>
Hope it helps!
I have this code in bootstrap:
<div class="input-group" id="adv-search">
<select class="form-control" >
<option value="0" selected>All Snippets</option>
<option value="1">Featured</option>
</select>
<div class="input-group-btn">
<div class="btn-group" role="group">
<div class="dropdown dropdown-lg">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span></button>
<div class="dropdown-menu dropdown-menu-right" role="menu">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="filter">Filter by</label>
<select class="form-control">
<option value="0" selected>All Snippets</option>
<option value="1">Featured</option>
<option value="2">Most popular</option>
<option value="3">Top rated</option>
<option value="4">Most commented</option>
</select>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
I checked my code in http://www.bootlint.com/.
But I have this error:
.input-groupcontains a <select>; this should be avoided as <select>
s cannot be fully styled in WebKit browsers
So I can not use input-group with select!
Is there a standard way to do it in bootstrap?
Bootlint leads you to the error E006 that says
non- .form-control within .input-group
You should use form-group instead of input-group like this:
<div class="form-group">
<label for="exampleSelect2">Example multiple select</label>
<select multiple class="form-control" id="exampleSelect2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>