Hi how i can change my text in option to a bit higher using css as is not in centre line
<div class="form-row">
<div class="col">
<label for="select-price-mode" class="col-form-label">Price Mode</label>
<select class="select-price-mode custom-select-sm col-10" id="select-price-mode" required>
<option selected disabled value="" >Select ....</option>
</select>
<div class="invalid-feedback">
Please select a valid price mode.
</div>
</div>
<div class="col">
<label for="select-payment-frequency" class="col-form-label">Payment Frequency</label>
<select class="select-payment-frequency custom-select-sm col-10" id="select-payment-frequency" required>
<option selected disabled value="">Select ....</option>
</select>
<div class="invalid-feedback">
Please select a valid payment frequency.
</div>
</div>
select{font-size: 30px;}
<div class="form-row">
<div class="col">
<label for="select-price-mode" class="col-form-label">Price Mode</label>
<select class="select-price-mode custom-select-sm col-10" id="select-price-mode" required>
<option selected disabled value="" >Select ....</option>
</select>
<div class="invalid-feedback">
Please select a valid price mode.
</div>
</div>
<div class="col">
<label for="select-payment-frequency" class="col-form-label">Payment Frequency</label>
<select class="select-payment-frequency custom-select-sm col-10" id="select-payment-frequency" required>
<option selected disabled value="">Select ....</option>
</select>
<div class="invalid-feedback">
Please select a valid payment frequency.
</div>
</div>
Related
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>
I have the following selection boxes that are working with select2 js:
<!-- Selections for the table -->
<div class="form-group row">
<div class="col-xs-2">
<label for="month" class="control-label">Year</label>
<select class="form-control select2" id="year" name="year" data-placeholder="Select a year">
<option value="2015">
xxx
</option>
...
</select>
</div>
<div class="col-xs-2">
<label for="manager" class="control-label">Manager</label>
<select class="form-control select2" id="manager" name="manager" data-placeholder="Select a manager" multiple="multiple">
<option value="2">
xxx
</option>
...
</select>
</div>
<div class="col-xs-2">
<label for="user" class="control-label">User</label>
<select class="form-control select2" id="user" name="user" data-placeholder="Select a user" multiple="multiple">
<option value="87">
xxx
</option>
...
</select>
</div>
</div>
I am using bootstrap 3 and it is strange, when I get a smaller window, the boxes overlap :(. You can see this in the image below.
How can I have bootstrap to make the different select get below each other when there is not enough space and in a line if there is enough space horizontally?
Use below CSS:
.select2{width:100%}
if this not working then you can use:
.select2{width:100% !important}
I have form with many input fields. To save users from scrolling on the medium and large screens I would like to place some of the input fields side by side. Not all the fields have to be side by side and that's why I'm not using inline form. Here is example of what I have:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form name="frmDemo" id="frmDemo">
<div class="form-group required">
<label class="control-label" for="last"><span class="label label-primary">Last Name:</span></label>
<input type="text" class="form-control" name="frmDemo_last" id="frmDemo_last" placeholder="Enter Last Name" maxlength="50" required>
</div>
<div class="form-group required">
<label class="control-label" for="first"><span class="label label-primary">First Name:</span></label>
<input type="text" class="form-control" name="frmDemo_first" id="frmDemo_first" placeholder="Enter First Name" maxlength="50" required>
</div>
<div class="form-group">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<label class="control-label" for="plan"><span class="label label-primary">Plan:</span></label>
<select class="form-control" name="frmDemo_plan" id="frmDemo_plan">
<option value="">--Choose Plan--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<label class="control-label" for="plantext"><span class="label label-primary">Plan Text:</span></label>
<input type="text" class="form-control" name="frmDemo_plantext" id="frmDemo_plantext" placeholder="Enter Plan Text" maxlength="50">
</div>
</div>
</div>
<div class="row">
<div class="form-group col-xs-12 col-sm-6 col-md-6 col-lg-6">
<label class="control-label" for="gender"><span class="label label-primary">Gender:</span></label>
<select class="form-control" name="frmDemo_gender" id="frmDemo_gender" required>
<option value="">--Choose Gender--</option>
<option value="F">Female</option>
<option value="M">Male</option>
</select>
</div>
<div class="form-group col-xs-12 col-sm-6 col-md-6 col-lg-6">
<label class="control-label" for="gender"><span class="label label-primary">Grade:</span></label>
<select class="form-control" name="frmDemo_grade" id="frmDemo_grade" required>
<option value="">--Choose Grade--</option>
<option value="PK">PK</option>
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
</select>
</div>
</div>
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<button type="submit" name="frmDemo_submit" id="frmDemo_submit" class="btn btn-primary">Submit</button>
</div>
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div id="frmDemo_message" class="alert message-submit"></div>
</div>
</div>
</form>
As you can see I was able to achieve that and place the fields side by side. My question is what is the proper way to do that? My first set of fields for the Plan input use form-group div then row div and then col- div. The second set of input fields for Grade and Gender use row div and then form-group col-. Both ways work but which one is valid according to Bootstrap rules? If anyone can explain or give me suggestions I would appreciate that. Thank you.
That's alright. But if you want some other ways without using Bootstrap rows and columns you can target specific .form-group to style in your CSS. Personally I do these since it is much more cleaner than having many nested rows and columns. I would only use rows and columns for other purposes.
HTML:
<div class="form-group required">
<label class="control-label" for="last"><span class="label label-primary">Last Name:</span></label>
<input type="text" class="form-control" name="frmDemo_last" id="frmDemo_last" placeholder="Enter Last Name" maxlength="50" required>
</div>
<div class="form-group required">
<label class="control-label" for="first"><span class="label label-primary">First Name:</span></label>
<input type="text" class="form-control" name="frmDemo_first" id="frmDemo_first" placeholder="Enter First Name" maxlength="50" required>
</div>
<div class="form-group">
<label class="control-label" for="plan"><span class="label label-primary">Plan:</span></label>
<select class="form-control" name="frmDemo_plan" id="frmDemo_plan">
<option value="">--Choose Plan--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="form-group">
<label class="control-label" for="plantext"><span class="label label-primary">Plan Text:</span></label>
<input type="text" class="form-control" name="frmDemo_plantext" id="frmDemo_plantext" placeholder="Enter Plan Text" maxlength="50">
</div>
<div class="form-group">
<label class="control-label" for="gender"><span class="label label-primary">Gender:</span></label>
<select class="form-control" name="frmDemo_gender" id="frmDemo_gender" required>
<option value="">--Choose Gender--</option>
<option value="F">Female</option>
<option value="M">Male</option>
</select>
</div>
<div class="form-group">
<label class="control-label" for="gender"><span class="label label-primary">Grade:</span></label>
<select class="form-control" name="frmDemo_grade" id="frmDemo_grade" required>
<option value="">--Choose Grade--</option>
<option value="PK">PK</option>
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
</select>
</div>
<div class="form-group">
<button type="submit" name="frmDemo_submit" id="frmDemo_submit" class="btn btn-primary">Submit</button>
</div>
<div class="form-group">
<div id="frmDemo_message" class="alert message-submit"></div>
</div>
CSS:
/* I used nth-child(n+number) pseudoclass selector since you wanted to start from the 3rd div with .form-group class to be side by side with each other. */
.form-group:nth-child(n+3) {
width:50%;
float:left;
}
.form-group:nth-child(n+3) input, .form-group:nth-child(n+3) select {
width:95%;
}
I have a Bootstrap form to which I've applied form-inline and have several elements there. I've read that, until 768px, the elements are kept inline. But I found this to not be the case, if I assign input-lg to some elements, the last elements breaks at a new line even above 768px.
An alternative would be to make these elements SMALLER until 768px. Is there a way to do this?
Code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form class="form-inline">
<div class="form-group">
<input type="text" class="form-control input-lg" placeholder="Your Title">
</div>
<div class="form-group">
<input type="text" class="form-control input-lg" placeholder="Your Description">
</div>
</form>
<form class="form-horizontal">
<div class="row">
<div class="form-group col-sm-6">
<input type="text" class="form-control input-lg" placeholder="Your Title">
</div>
<div class="form-group col-sm-6">
<input type="text" class="form-control input-lg" placeholder="Your Description">
</div>
</div>
</form>
Use this to keep them on the same line above 768px.
If you want to keep the horizontal under 768px just change "col-sm-6" class to "col-xs-6" like this:
<form class="form-horizontal">
<div class="row">
<div class="form-group col-xs-6">
<input type="text" class="form-control input-lg" placeholder="Your Title">
</div>
<div class="form-group col-xs-6">
<input type="text" class="form-control input-lg" placeholder="Your Description">
</div>
</div>
</form>
Try to limit the width of the field with the max-width property.
Add the float: left; property to them so that they remain on one line.
Use the overflow: hidden; property to make the form a container of floating elements.
Please check te result: http://www.bootply.com/JXslxuh3qX
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.form-2-groups-on-one-line,
.form-4-groups-on-one-line {
clear: left;
overflow: hidden;
}
.form-2-groups-on-one-line .form-group {
float: left;
max-width: 50%;
}
.form-4-groups-on-one-line .form-group {
float: left;
max-width: 25%;
}
.form-2-groups-on-one-line input,
.form-2-groups-on-one-line select,
.form-4-groups-on-one-line input,
.form-4-groups-on-one-line select {
max-width: 100%;
}
<form class="form-inline form-2-groups-on-one-line">
<div class="form-group">
<input type="text" class="form-control input-lg" placeholder="Your Title">
</div>
<div class="form-group">
<input type="text" class="form-control input-lg" placeholder="Your Description">
</div>
</form>
<form class="form-inline form-4-groups-on-one-line">
<div class="form-group">
<input type="text" class="form-control input-lg" placeholder="Your Title">
</div>
<div class="form-group">
<select class="form-control input-lg">
<option value="0" selected="" disabled="">Choose Assignment Type</option>
<option value="1">Essay</option>
<option value="18">Admission / Scholarship Essay</option>
<option value="12">Research Paper</option>
<option value="26">Research Proposal</option>
<option value="4">Coursework</option>
<option value="2">Term paper</option>
<option value="5">Article</option>
<option value="22">Literature / Movie review</option>
<option value="9">Reports</option>
<option value="3">Dissertation</option>
<option value="29">Thesis</option>
<option value="30">Thesis Proposal</option>
<option value="13">Creative Writing</option>
<option value="11">Business Plan</option>
<option value="15">Speech / Presentation</option>
<option value="7">Outline</option>
<option value="14">Annotated Bibliography</option>
<option value="6">Dissertation Proposal</option>
<option value="17">Proofreading</option>
<option value="25">Paraphrasing</option>
<option value="28">PowerPoint Presentation</option>
<option value="27">Personal Statement</option>
<option value="24">Non-word Assignments</option>
<option value="23">Math Assignment</option>
<option value="21">Lab Report</option>
<option value="20">Code</option>
<option value="19">Case Study</option>
<option value="16">Other types</option>
</select>
</div>
<div class="form-group">
<input type="text" class="form-control input-lg mg-up1" placeholder="Your Email Address">
</div>
<div class="form-group mg-up">
<button type="submit" class="form-control input-lg">Check The Price</button>
</div>
</form>
Please see my updated example: http://www.bootply.com/paPWbTuwAL
I added bootstrap column classes to each of your form items so you have better control over their sizing, and added a little custom CSS
Hope this helps!
CSS
.custom-form .form-control{
width:100%;
}
HTML
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1 class="margin-bottom-30">Get Instant Essay Writing / Editing Help</h1>
</div> <!-- end col-xs-12 -->
</div> <!-- end row -->
<div class="row">
<form class="form-inline custom-form">
<div class="form-group col-xs-2">
<input type="text" class="form-control input-sm " placeholder="Your Title">
</div>
<div class="form-group col-xs-4">
<select class="form-control input-sm">
<option value="0" selected="" disabled="">Choose Assignment Type</option>
<option value="1">Essay</option>
<option value="18">Admission / Scholarship Essay</option>
<option value="12">Research Paper</option>
<option value="26">Research Proposal</option>
<option value="4">Coursework</option>
<option value="2">Term paper</option>
<option value="5">Article</option>
<option value="22">Literature / Movie review</option>
<option value="9">Reports</option>
<option value="3">Dissertation</option>
<option value="29">Thesis</option>
<option value="30">Thesis Proposal</option>
<option value="13">Creative Writing</option>
<option value="11">Business Plan</option>
<option value="15">Speech / Presentation</option>
<option value="7">Outline</option>
<option value="14">Annotated Bibliography</option>
<option value="6">Dissertation Proposal</option>
<option value="17">Proofreading</option>
<option value="25">Paraphrasing</option>
<option value="28">PowerPoint Presentation</option>
<option value="27">Personal Statement</option>
<option value="24">Non-word Assignments</option>
<option value="23">Math Assignment</option>
<option value="21">Lab Report</option>
<option value="20">Code</option>
<option value="19">Case Study</option>
<option value="16">Other types</option>
</select>
</div>
<div class="form-group col-xs-3">
<input type="text" class="form-control input-sm mg-up1 col-xs-3" placeholder="Your Email Address">
</div>
<div class="form-group col-xs-2 mg-up">
<button type="submit" class="form-control input-sm col-xs-3">Check The Price</button>
</div>
</form></div>
<div class="row">
<h3 class="margin-top-30">Over 7000 Writers and Editors Available 24/7 To Help You Out.</h3>
</div>
</div>
I have this form:
<form style="margin-top:20px">
<div class="row form-group">
<div class="col-lg-3">
<label for="exampleInputEmail1">Original Amount</label>
<div class="input-group">
<div class="input-group-addon" id="OriginalAmountAddon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
</div>
</div>
<div class="col-lg-3">
<label for="exampleInputEmail1">Billing Amount</label>
<div class="input-group">
<div class="input-group-addon" id="BillingAmountAddon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
</div>
</div>
</div>
<div class="row form-group">
<div class="col-lg-3">
<label for="exampleInputEmail1">Original Currency Code</label>
<div class="input-group">
<div class="input-group-addon" id="OriginalCurrencyAddon">$</div>
<select class="form-control" id="OriginalCurrencySelect">
<option value="$">USD</option>
<option value="€">EUR</option>
<option value="£">GBP</option>
<option value="₪">ILS</option>
</select>
</div>
</div>
<div class="col-lg-3">
<label for="exampleInputEmail1">Billing Currency Code</label>
<div class="input-group">
<div class="input-group-addon" id="BillingCurrencyAddon">$</div>
<select class="form-control" id="BillingCurrencySelect">
<option value="$">USD</option>
<option value="€">EUR</option>
<option value="£">GBP</option>
<option value="₪">ILS</option>
</select>
</div>
</div>
</div></form>
It looks like this:
I want the whole form in the center, how to? Do I need to center each row separately? And another question, I want for example, the "Supllier Account" field, to be in the same lenght of the two fields above, how to?
This is basically a duplicate of a question that's already been asked many times..
Center a column using Twitter Bootstrap 3
To specifically center your form you can use column offsets like this, but there are several different methods for centering:
<div class="container">
<div class="row">
<div class="col-md-9 col-md-offset-3 col-sm-10 col-sm-offset-1">
<form style="margin-top:20px">
<div class="row form-group">
<div class="col-md-4">
<label for="exampleInputEmail1">Original Amount</label>
<div class="input-group">
<div class="input-group-addon" id="OriginalAmountAddon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
</div>
</div>
<div class="col-md-4">
<label for="exampleInputEmail1">Billing Amount</label>
<div class="input-group">
<div class="input-group-addon" id="BillingAmountAddon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
</div>
</div>
</div>
<div class="row form-group">
<div class="col-md-4">
<label for="exampleInputEmail1">Original Currency Code</label>
<div class="input-group">
<div class="input-group-addon" id="OriginalCurrencyAddon">$</div>
<select class="form-control" id="OriginalCurrencySelect">
<option value="$">USD</option>
<option value="€">EUR</option>
<option value="£">GBP</option>
<option value="₪">ILS</option>
</select>
</div>
</div>
<div class="col-md-4">
<label for="exampleInputEmail1">Billing Currency Code</label>
<div class="input-group">
<div class="input-group-addon" id="BillingCurrencyAddon">$</div>
<select class="form-control" id="BillingCurrencySelect">
<option value="$">USD</option>
<option value="€">EUR</option>
<option value="£">GBP</option>
<option value="₪">ILS</option>
</select>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
http://www.codeply.com/go/sRbuCfloDX
When i want to do it, margin: 0 auto; works quite fine