I want to achieve something like this: , I'm trying to make it work for several hours but couldn't do so,Here is my Code:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-mid-offset-1 col-lg-offset-1 col-mid-5 col-lg-5">
<div class="form-group">
<div class="row">
<div class="col-xs-7">
<h5>Land Area</h5></div>
<div class="col-xs-3">
<select class="form-control" id="mainSearch-unitSelect">
<option>1</option>
<option>2</option>
</select>
</div>
<div class="col-xs-2">
</div>
</div>
</div>
</div>
</div>
</div>
Any suggestions to make it work ?
Try this:
https://jsfiddle.net/2bz3jpad/2/
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-mid-offset-1 col-lg-offset-1 col-mid-5 col-lg-5">
<div class="form-group">
<div class="row">
<div class="col-xs-6 text-right">
<h5><strong>Land Area:</strong></h5></div>
<div class="col-xs-3 text-left">
<select class="form-control" id="mainSearch-unitSelect">
<option>1</option>
<option>2</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
Narrow your label's column and float the text to the right.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-mid-offset-1 col-lg-offset-1 col-mid-5 col-lg-5">
<div class="form-group">
<div class="row">
<div class="col-xs-2">
<h5 class="pull-right">Land Area</h5></div>
<div class="col-xs-7">
<select class="form-control" id="mainSearch-unitSelect">
<option>1</option>
<option>2</option>
</select>
</div>
<div class="col-xs-2">
</div>
</div>
</div>
</div>
</div>
</div>
EDIT
Or use an inline form:
http://getbootstrap.com/css/#forms-inline
Related
I want to move 2 rows at the right of the page so everything will be in right order, 2 rows on the left, button in the middle and 2 rows at the right! I will post an image and my source code!
Project Image
My source code using bootsrap 5:
function Converter () {
return (
<div className="card card-body p-3 mb-2 bg-light text-dark">
<h1>Currency Converter</h1>
<form>
<div className="d-flex">
<div className="form-row col-md-6 col-sm-6">
<div className="form-group col-md-8">
<label><strong>Currency I Have:</strong></label>
<select className="form-select" type="text" >
<option value="1" selected >USD</option>
<option value="2">EUR</option>
<option value="3">GBP</option>
<option value="3">CAD</option>
<option value="3">AUD</option>
</select>
</div>
<div className="form-group col-md-8">
<label><strong>Amount:</strong></label>
<input type="number" class="form-control"/>
</div>
</div>
<div className="form-row col-md-6 col-sm-6">
<div className="form-group col-md-8">
<label><strong>Currency I Want:</strong></label>
<select className="form-select" type="text" >
<option value="1" selected >EUR</option>
<option value="2">USA</option>
<option value="3">GBP</option>
<option value="3">CAD</option>
<option value="3">AUD</option>
</select>
</div>
<div className="form-group col-md-8">
<label><strong>Amount:</strong></label>
<input type="number" className="form-control"/>
</div>
</div>
</div>
<br/>
<button type="submit" class="btn btn-primary mb-2">Convert</button>
</form>
</div>
);
}
you can use like this
<div class="row">
<div class="col-md-5">
<div class="row">
code for first drop downs
</div>
</div>
<div class="col-md-2">
</div>
<div class="col-md-5">
<div class="row">
code for Second list of drop downs
</div>
</div>
Try this and fill your code snippets:
<div class="container">
<div class="row align-items-center justify-content-evenly">
<div class="col-md-5 text-start">
<!-- First drop down -->
</div>
<div class="col-md-2 text-center">
<!-- Button -->
</div>
<div class="col-md-5 text-end">
<!-- Second drop down -->
</div>
</div>
</div>
I am Trying to achieve below style using bootstrap framework. I was able to achieve some what similar to this, but the problem is the save button is not getting aligned to right(not taking available width). There is a gap between save button and red border wrapper. Is there any way to to get the button take available width? or is it possible using inline-form or something? please help.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div style="border:1px solid red;" class="container mb-4">
<div class="row mt-4">
<div class="col-5">
<div class="form-group row">
<label for="sel-city" class="col-form-label col-md-2">Label</label>
<div class="col-md-10">
<select class="form-control custom-select" id="sel-city" name="city"></select>
</div>
</div>
</div>
<div class="col">
<div class="form-group row">
<label for="sel-zone" class="col-form-label col-md-2">Label</label>
<div class="col-md-7">
<select class="form-control custom-select" id="sel-zone" name="workzone"></select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-5">
<div class="form-group row">
<label for="sel-stage" class="col-form-label col-md-2">label</label>
<div class="col-md-10">
<select class="form-control custom-select" id="sel-stage" name="stage">
</select>
</div>
</div>
</div>
<div class="col">
<div class="form-group row">
<label for="sel-status" class="col-form-label col-md-2">Label</label>
<div class="col-md-7">
<select class="form-control custom-select" id="sel-status" name="status"></select>
</div>
<button id="btn-status-save" class="btn btn-primary float-right" onclick="saveStatus()">Save</button>
</div>
</div>
</div>
</div>
So I restructured your html a bit so it flows automatically (see example)
Key things to note directly related to your question:
For the button (classes)
btn-block: This will make the button expand the entire available width of the container div.
For the column (classes):
align-self-end : will put item at the very bottom right of div; would need to add mb-3 to add bottom margin so it aligns with your other element.
noPadding: custom css class. By default, cols will have padding on the left and right side. You will want to override this with a css class if you want to kill that off.
.noPadding {
padding-right: 0px !important;
padding-left: 0px !important;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div style="border:1px solid red;" class="container mb-4">
<div class="row mt-4">
<div class="col-5">
<div class="form-group">
<label for="sel-city" class="col-form-label col-md-2">Label</label>
<div class="col-md-10">
<select class="form-control custom-select" id="sel-city" name="city"></select>
</div>
</div>
<div class="form-group">
<label for="sel-zone" class="col-form-label col-md-2">Label</label>
<div class="col-md-10">
<select class="form-control custom-select" id="sel-zone" name="workzone"></select>
</div>
</div>
</div>
<div class="col-5">
<div class="form-group">
<label for="sel-stage" class="col-form-label col-md-2">label</label>
<div class="col-md-10">
<select class="form-control custom-select" id="sel-stage" name="stage">
</select>
</div>
</div>
<div class="form-group">
<label for="sel-status" class="col-form-label col-md-2">Label</label>
<div class="col-md-10">
<select class="form-control custom-select" id="sel-status" name="status"></select>
</div>
</div>
</div>
<div class="col align-self-end mb-3 noPadding">
<button id="btn-status-save" class="btn btn-primary btn-block" onclick="saveStatus()">Save</button>
</div>
</div>
</div>
I have a problem with bootstrap form-horizontal, the problem is that I have a horizontal form with two "form-group col-sm-6" groups.
It looks that there is a blank space after the two groups (please see the blue arrow down).
I need to remove that space so the two form-groups are filling the space.
The code I use is:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<section class="animated fadeInUp">
<div class="panel panel-default col-md-12">
<div class="panel-heading"> <b class="text-capitalize">CIF Profile</b>
<div class="actions pull-right"> <i class="fa fa-chevron-down"></i> </div>
</div>
<div class="panel-body">
<div class="form-horizontal col-sm-12" style="background-color:red;">
<div class="form-group col-sm-6" style="background-color:blue;">
<div class="col-sm-6">
<label class="control-label">Customer Id</label>
</div>
<div class="col-sm-6">
<input id="txtCustomerId" name="txtCustomerId" class="form-control" value="" maxlength="6" readonly="readonly">
</div>
</div>
<div class="form-group col-sm-6" style="background-color:white;">
<div class="col-sm-6">
<label class="control-label">Mnemonic</label>
</div>
<div class="col-md-6">
<input id="txtMnemonic" name="txtMnemonic" class="form-control" placeholder="" value="" maxlength="10">
</div>
</div>
</div>
</div>
</div>
</section>
Bootstrap have a padding 15px by default, just add this css, and delete form-group
.form-horizontal.col-sm-12 {
padding-left: 0px !important;
padding-right: 0px !important;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<section class="animated fadeInUp">
<div class="panel panel-default col-md-12">
<div class="panel-heading"> <b class="text-capitalize">CIF Profile</b>
<div class="actions pull-right"> <i class="fa fa-chevron-down"></i> </div>
</div>
<div class="panel-body">
<div class="form-horizontal col-sm-12" style="background-color:red;">
<div class="col-sm-6" style="background-color:blue;">
<div class="col-sm-6">
<label class="control-label">Customer Id</label>
</div>
<div class="col-sm-6">
<input id="txtCustomerId" name="txtCustomerId" class="form-control" value="" maxlength="6" readonly="readonly">
</div>
</div>
<div class="col-sm-6" style="background-color:white;">
<div class="col-sm-6">
<label class="control-label">Mnemonic</label>
</div>
<div class="col-md-6">
<input id="txtMnemonic" name="txtMnemonic" class="form-control" placeholder="" value="" maxlength="10">
</div>
</div>
<div>I see the red</div>
</div>
</div>
</div>
</section>
This is the issue
I need to prevent over-write rows using bootstrap 3. This is my code
<div class="col-md-6">
<div class="row form-group">
<div class="col-md-4">
<label class="control-label">Location</label>
</div>
<div class="col-md-8">
<label class="control-label">{{draftJobPost.location}}</label>
</div>
</div>
<div class="row form-group">
<div class="col-md-4">
<label class="control-label">Salary</label>
</div>
<div class="col-md-8">
<label class="control-label">{{draftJobPost.salaryDetails}}</label>
</div>
</div>
<div class="row form-group">
<div class="col-md-4">
<label class="control-label">Recruiter</label>
</div>
<div class="col-md-8">
<label class="control-label">{{draftJobPost.location}}</label>
</div>
</div>
<div class="row form-group">
<div class="container col-md-4">
<label class="control-label">Type</label>
</div>
<div class="col-md-8">
<label class="control-label">{{draftJobPost.location}}</label>
</div>
</div>
</div>
I need set auto height in every rows by bootstrap 3.
You are overwriting the .row class with properties from the form-group class.
Change all of your input rows.
from
<div class="row form-group">
<div class="col-md-4">
<label class="control-label">Location</label>
</div>
<div class="col-md-8">
<label class="control-label">{{draftJobPost.location}}</label>
</div>
</div>
to
<div class="form-group">
<div class="row">
<div class="col-md-4">
<label class="control-label">Location</label>
</div>
<div class="col-md-8">
<label class="control-label">{{draftJobPost.location}}</label>
</div>
</div>
</div>
You can use the Bootstrap-Clearfix attribute.
https://v4-alpha.getbootstrap.com/utilities/clearfix/
Hi how will I reduce the distance of the two dropdowns between each other?
Here is the code:
<div class="row">
<p class="col-md-offset-1"><b>Type of Meal:</b></p>
<div class="form-group col-md-2">
<div class="col-md-8">
<select class="form-control">
<%-- options --%>
</select>
</div>
</div>
<div class="form-group col-md-2">
<div class="col-md-8">
<select class="form-control">
<%-- options --%>
</select>
</div>
</div>
</div>
Thanks!
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-md-4">
<p>Starfleet officer</p>
<form class="form-inline">
<select class="form-control form-group">
<option>Spock</option>
<option>Kirk</option>
</select>
<select class="form-control form-group">
<option>Picard</option>
<option>Riker</option>
</select>
</form>
</div>
<div class="col-md-8">
</div>
</div>
</div>