I have a Bootstrap 5 form with floating labels in input and select elements. The Track select lines up perfectly with the Location name input above it but the Product select is slightly too far to the left of the Track select. It also has a slightly narrower width than the row above.
Here's the html for the fields.
<div class="row">
<div class="col-sm-6 offset-sm-3 mb-2">
<div class="form-floating">
<input id="clear-name" name="LocationName[]" type="text" class="form-control" placeholder="x" value="">
<label class="text-muted">Location name</label>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3 offset-sm-3 mb-2">
<div class="form-floating">
<select id="track-length" name="LocationTrackLength" class="form-select text-center" required>
<option></option>
<option value="7">7 ft</option>
<option value="9">9 ft</option>
<option value="10">10 ft</option>
<option value="11">11 ft</option>
<option value="13">13 ft</option>
<option value="15">15 ft</option>
<option value="21">21 ft</option>
<option value="custom-length">Custom…</option>
</select>
<label>Track</label>
</div>
</div>
<div class="col-sm-3 mb-2">
<div class="form-floating">
<select id="ceiling-height" name="LocationCeilingHeight" class="form-select text-center" required>
<option></option>
<option value="8">8 ft</option>
<option value="8.5">8.5 ft</option>
<option value="9">9 ft</option>
<option value="9.5">9.5 ft</option>
<option value="custom-height">Custom…</option>
</select>
<label>Ceiling</label>
</div>
</div>
<div class="row mb-2">
<div class="col-sm-6 offset-sm-3">
<div class="form-floating">
<select id="location-product" name="LocationProducts.HospitalProductID" class="form-select text-center" required>
<option selected></option>
<optgroup label="Textile">
<option value="227" data-defaultprotocol="">96 x 36 Blue Stripe Textile</option>
<option value="228" data-defaultprotocol="1182">96 x 36 Green stripes</option>
</optgroup>
<optgroup label="Poly">
<option value="223" data-defaultprotocol="1183">Transparence Snap on 96in x 72in</option>
<option value="222" data-defaultprotocol="1182">Transparence Snap on 96in x 65in</option>
<option value="224" data-defaultprotocol="1181">Yellow Stripes Poly 92 x 36 92in x 36in</option>
</optgroup>
</select>
<label>Product</label>
</div>
</div>
</div>
</div>
</div>
The Location name field and the Product field both have the same offset and column widths (col-sm-6 offset-sm-3) so I can't figure out why they are displayed differently and how to fix the issue.
Any ideas?
Related
I want to have 5 inputs in 1 row on a page with a custom width, for example: the amount input should be smaller and the offer input should be bigger I am trying but I do not understand how to do this. I tried adding 5 columns and then added col-lg-2 class to the inputs I want small and col-lg-4 to the ones I want bigger, it looks good but the submit button is not shown in the same row. any ideas? how to do this?
Here's the code I use
<div class="container-fluid">
<div class="row">
<div class="col-lg-2">
<div class="form-group">
<input class="search-form-amount form-control" name="amount" placeholder="Amount" type="text">
</div>
</div>
<div class="col-lg-2">
<div class="form-group">
<select class="search-form-currency form-control">
<option value="AED">AED</option>
<option value="AFN">AFN</option>
<option value="ALL">ALL</option>
<option value="AMD">AMD</option>
<option value="ANG">ANG</option>
<option value="AOA">AOA</option>
<option value="ARS">ARS</option>
<option value="AUD">AUD</option>
<option value="AWG">AWG</option>
<option value="AZN">AZN</option>
<option value="BAM">BAM</option>
</select>
</div>
</div>
<div class="col-lg-4">
<div class="form-group">
<select class="search-form-currency form-control">
<option value="BQ">Bonaire, Sint Eustatius and Saba</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AS">American Samoa</option>
<option value="AD">Andorra</option>
<option value="AO">Angola</option>
<option value="AI">Anguilla</option>
<option value="AQ">Antarctica</option>
<option value="AG">Antigua and Barbuda</option>
</select>
</div>
</div>
<div class="col-lg-4">
<div class="form-group">
<select class="search-form-currency form-control">
<optgroup label="All payment methods">
<option value="ALL_ONLINE">All online offers</option>
<option value="NATIONAL_BANK">National bank transfer</option>
<option value="SEPA">SEPA (EU) bank transfer</option>
<option value="SPECIFIC_BANK">Transfers with specific bank</option>
<option value="INTERNATIONAL_WIRE_SWIFT">International Wire (SWIFT)</option>
<option value="OTHER">Other online payment</option>
<option value="CASH_DEPOSIT">Cash deposit</option>
<option value="ECOCASH">EcoCash</option>
</optgroup>
</select>
</div>
</div>
<div class="col-lg-2">
<div class="form-group">
<input type="submit" name="find-offers" value="Search" class="btn btn-primary">
</div>
</div>
</div>
</div>
The Result I'm getting:
What I'm trying to achieve:
I would do 3 things to improve the spacing/sizing...
Remove gutter from the row using no-gutters
Add flex-lg-nowrap to the row to prevent wrapping on lg (and wider)
Use the auto-layout grid sizing on the right-most 2 columns
Codeply demo
<div class="container-fluid">
<div class="row no-gutters flex-lg-nowrap">
<div class="col-lg-2">
<div class="form-group">
<input class="search-form-amount form-control" name="amount" placeholder="Amount" type="text">
</div>
</div>
<div class="col-lg-2 pl-lg-1">
<div class="form-group">
<select class="search-form-currency form-control">
...
</select>
</div>
</div>
<div class="col-lg-4 pl-lg-1">
<div class="form-group">
<select class="search-form-currency form-control">
...
</select>
</div>
</div>
<div class="col-lg pl-lg-1">
<div class="form-group">
<select class="search-form-currency form-control">
..
</select>
</div>
</div>
<div class="col-lg-auto pl-lg-1">
<div class="form-group">
<input type="submit" name="find-offers" value="Search" class="btn btn-primary">
</div>
</div>
</div>
</div>
Bootstrap has 12 cols in a row. What you have now is col-lg-2 2 4 4 2, which adds up to 14. So if you want to make all of them into one row, you have to adjust your total col size below 12.
In term of responsive design, you might also want to create col- , even col-sm, col-md so it would layout nicely in smaller screen size.
I'm building a web application using html, java, javascript and css with bootstrap. Here is one section of that application which gives me troubles:
What I'm trying to accomplish here is to move this input field bellow the first row to be just bellow the first selection field. Something like this:
By the way new rows are added dinamically when user clicks on + button. And now here is that section written in html:
<div class="row">
<div class="form-group col-xs-5 formular-element-width-fix">
<label class="control-label formular-element-label" for="element<%=elementNumber%>">Element
<%=elementNumber %>:</label>
<div class="input-group">
<input type="text" class="form-control width100" id="element<%=elementNumber%>" name="element<%=elementNumber%>" placeholder="Enter a label">
</div>
</div>
<div class="form-group col-xs-2">
<select class="form-control width100" onchange="changeValidations(this); showRadioLabels(this)">
<option value="Textbox" selected>Textbox</option>
<option value="Checkbox">Checkbox</option>
<option value="Radio buttons">Radio buttons</option>
</select>
</div>
<div class="form-group col-xs-1 radio-number-hide">
<select class="form-control width100" onchange="changeRadioLabels(this)">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
<div class="form-group col-xs-2">
<select class="form-control width100">
<option value="None" selected>None</option>
<option value="Mandatory">Mandatory</option>
<option value="Numeric">Numeric</option>
<option value="Email">Email</option>
<option value="Date">Date</option>
</select>
</div>
<div class="form-group btn-group">
<button class="btn btn-add-element" onclick="addElement()">+</button>
</div>
<div class="form-group col-xs-5 formular-element-width-fix radio-input radio-input-hidden">
<div class="input-group">
<input type="text" class="form-control width100" id="new-element-input" name="new-element-input" placeholder="Enter a label">
</div>
</div>
</div>
By default, bootstrap takes 12 columns in one row, and if you try to use more than 12 columns, it automatically places the extra content in next row. Below is the snippet to achieve the result:
<div class="row">
<div class="form-group col-xs-5 formular-element-width-fix">
<label class="control-label formular-element-label" for="element<%=elementNumber%>">Element
<%=elementNumber %>:</label>
<div class="input-group">
<input type="text" class="form-control width100" id="element<%=elementNumber%>" name="element<%=elementNumber%>" placeholder="Enter a label">
</div>
</div>
<div class="form-group col-xs-2">
<select class="form-control width100" onchange="changeValidations(this); showRadioLabels(this)">
<option value="Textbox" selected>Textbox</option>
<option value="Checkbox">Checkbox</option>
<option value="Radio buttons">Radio buttons</option>
</select>
</div>
<div class="form-group col-xs-1 radio-number-hide">
<select class="form-control width100" onchange="changeRadioLabels(this)">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
<div class="form-group col-xs-2">
<select class="form-control width100">
<option value="None" selected>None</option>
<option value="Mandatory">Mandatory</option>
<option value="Numeric">Numeric</option>
<option value="Email">Email</option>
<option value="Date">Date</option>
</select>
</div>
<!--here completing 12 columns of first row-->
<div class="col-xs-2 form-group btn-group">
<button class="btn btn-add-element" onclick="addElement()">+</button>
</div>
<!--for next row, leave first 5 columns blank, which correspond to label and
textfield, Added css here-->
<div class="form-group col-xs-5 formular-element-width-fix"> </div>
<div class="form-group col-xs-5 formular-element-width-fix radio-input radio-input-hidden">
<div class="input-group">
<input type="text" class="form-control width100" id="new-element-input" name="new-element-input" placeholder="Enter a label">
</div>
</div>
</div>
Im trying to have a layout where there are some list items, each one have a title like "Item 0", a <small> below the title, in this example with the text "Description Item 0", and then at right of this text "Item 0" and "Item 0 Description" I want a select menu and at right of this select menu another select menu, like:
Item 0 select menu select menu
Description Item 0
And this elements should be vertically aligned. Im not achieving this layout with the code below do you know how to fix?
working example:
http://jsfiddle.net/fne5xLfv/1/
The "Description Item 0" is not below "Item 0", the select menu is below the text not at the right and the elements are not vertically aligned.
Html:
<div class="container py-5">
<div class="row no-gutters">
<div class="col-12 col-lg-8">
<div class="card">
<div class="card-header">
<h5 class="text-heading-blue mb-0 font-weight-semi-bold">Title</h5>
</div>
<div class="card-body">
<ul class="list-group">
<li class="list-group-item">
<span>Item 0</span>
<span>Description Item 0</span>
<form>
<select class="custom-select form-control">
<option selected="">0</option>
<option>1</option>
<option>2</option>
</select>
</form>
<form>
<select class="custom-select form-control">
<option selected="">0</option>
<option>1</option>
<option>2</option>
</select>
</form>
</li>
<li class="list-group-item">
<span>Item 1</span>
<span>Description Item 1</span>
<form>
<select class="custom-select form-control">
<option selected="">0</option>
<option>1</option>
<option>2</option>
</select>
</form>
<form>
<select class="custom-select form-control">
<option selected="">0</option>
<option>1</option>
<option>2</option>
</select>
</form>
</li>
<li class="list-group-item">
<span>Item 2</span>
<span>Description Item 2</span>
<form>
<select class="custom-select form-control">
<option selected="">0</option>
<option>1</option>
<option>2</option>
</select>
</form>
<form>
<select class="custom-select form-control">
<option selected="">0</option>
<option>1</option>
<option>2</option>
</select>
</form>
</ul>
</div>
<div class="card-footer">
<button type="button" class="float-right btn">Next</button>
</div>
</div>
</div>
Is something like this what you need? If not, please provide more info and also your html and CSS tries...
.list-group-item{
list-style-type: none;
}
<div class="col-12 col-lg-8">
<div class="card">
<div class="card-header">
<h5 class="text-heading-blue mb-0 font-weight-semi-bold">Title</h5>
</div>
<div class="card-body">
<ul class="list-group">
<li class="list-group-item">
<form>
<label style="display:inline-block; width:150px">Item 0</label>
<select class="custom-select form-control" style="display:inline-block;width:200px">
<option selected="">0</option>
<option>1</option>
<option>2</option>
</select>
</form>
<form>
<label style="display:inline-block; width:150px">Description Item 0</label>
<select class="custom-select form-control" style="display:inline-block;width:200px">
<option selected="">0</option>
<option>1</option>
<option>2</option>
</select>
</form>
</li>
<br>
<li class="list-group-item">
<form>
<label style="display:inline-block; width:150px">Item 1</label>
<select class="custom-select form-control" style="display:inline-block;width:200px">
<option selected="">0</option>
<option>1</option>
<option>2</option>
</select>
</form>
<form>
<label style="display:inline-block; width:150px">Description Item 1</label>
<select class="custom-select form-control" style="display:inline-block;width:200px">
<option selected="">0</option>
<option>1</option>
<option>2</option>
</select>
</form>
</li>
</ul>
</div>
</div>
</div>
What I did:
Moved the Span inside the form, changed it to Label, added some inline style to Label and to Select, fixing the width and making it become inline aligned
hi i think i understand what you want, check this.
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css">
</head>
<body>
<div class="container py-5">
<div class="row">
<div class="col-sm-4">
<div>item 0</div>
<div>description item 0</div>
</div>
<div class="col-sm-4">
<div>
<select name="" id="">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
<div class="col-sm-4">
<div>
<select name="" id="">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
</div>
<div class="row ">
<div class="col-sm-4">
<div>item 1</div>
<div>description item 1</div>
</div>
<div class="col-sm-4">
<div>
<select name="" id="">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
<div class="col-sm-4">
<div>
<select name="" id="">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div>item 2</div>
<div>description item 2</div>
</div>
<div class="col-sm-4">
<div>
<select name="" id="">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
<div class="col-sm-4">
<div>
<select name="" id="">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
</div>
</div>
</body>
</html>
so bootstrap divide your screen into 12 columns, when you say <div class="col-sm-4"></div> this means you are giving 4 columns out of 12 to this div.
<body onload="initialize()">
<div id="map" style="width:300px; height:300px; display:block;">
<div id="map_canvas" style="width:300px; height:300px;"></div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-3"><br>
MY11
</div>
<div class="col-md-2">
MY11
<select onChange="window.location.href=this.value">
<option disabled="disabled" selected="selected" value=""></option>
<option value="{{ url_for('detail', site='MY1', days=2) }}">48 hours</option>
<option value="{{ url_for('detail', site='MY1', days=3) }}">72 hours</option>
<option value="{{ url_for('detail', site='MY1', days=5) }}">5 days</option>
<option value="{{ url_for('detail', site='MY1', days=7) }}">7 days</option>
</select>
</div>
<div class="col-md-7 text-right">
<form>
<select name="mapchange" onchange="updateMap(this.options[this.selectedIndex].value)">
<option value="school1">school 1</option>
<option value="school2">school 2</option>
</select>
</form>
<div>
</div>
</div>
</body>
</html>
I am using the above HTML code and I want to position my google maps image on the right-hand side of the page. I am using Bootstrap css styling which should have a default of 12 units, so would have thought the map should be set to the right of the page by the following code:
<div class="col-md-7"><br>
This is the rendered output:
What do I need to do or change to position it on the right?
Add .col-md-offset-5 as an additional class to that element to move it to the right (by 5 grid units):
<div class="col-md-7 col-md-offset-5 text-right">
<div class="container-fluid">
<div class="row">
<div id="map" class="col-md-7 col-md-offset-5 text-right">
<div id="map_canvas" style="width:100%; height:300px;"></div>
</div>
<div class="col-md-3"><br>
MY11
</div>
<div class="col-md-2">
MY11
<select onChange="window.location.href=this.value">
<option disabled="disabled" selected="selected" value=""></option>
<option value="{{ url_for('detail', site='MY1', days=2) }}">48 hours</option>
<option value="{{ url_for('detail', site='MY1', days=3) }}">72 hours</option>
<option value="{{ url_for('detail', site='MY1', days=5) }}">5 days</option>
<option value="{{ url_for('detail', site='MY1', days=7) }}">7 days</option>
</select>
</div>
<div class="col-md-7 text-right">
<form>
<select name="mapchange" onchange="updateMap(this.options[this.selectedIndex].value)">
<option value="school1">school 1</option>
<option value="school2">school 2</option>
</select>
</form>
<div>
</div>
</div>
I am using Twitter Bootstrap (version 3) and in the form, I am trying to put these fields two per line, but i cant figure it out how to do it.. Here you can see it in bootply what i have done..
<div class="col-md-10">
<div class="form-group">
<legend>1st sth</legend>
<div class="col-md-2">
<select class="form-control" id="select">
<option value="1">1</option>
<option value="1">1</option>
<option value="1">1</option>
</select>
</div>
<div class="col-md-3">
<input type="text" class="form-control" id="inputName" placeholder="name">
</div>
<div class="col-md-2">
<select class="form-control" id="select">
<option value="1">1</option>
<option value="1">1</option>
<option value="1">1</option>
</select>
</div>
<div class="col-md-3">
<input type="text" class="form-control" id="inputName" placeholder="name">
</div>
<div class="col-md-2">
<select class="form-control" id="select">
<option value="1">1</option>
<option value="1">1</option>
<option value="1">1</option>
</select>
</div>
<div class="col-md-3">
<input type="text" class="form-control" id="inputName" placeholder="name">
</div>
</div>
</div>
You have to include the rows in a div. <div class="rows">.
<div class="col-md-10">
<div class="form-group">
<legend>1st sth</legend>
<div class="row">
<div class="col-md-2">
<select class="form-control" id="select">
<option value="1">1</option>
<option value="1">1</option>
<option value="1">1</option>
</select>
</div>
<div class="col-md-3">
<input type="text" class="form-control" id="inputName" placeholder="name">
</div>
</div>
<div class="row">
<div class="col-md-2">
<select class="form-control" id="select">
<option value="1">1</option>
<option value="1">1</option>
<option value="1">1</option>
</select>
</div>
<div class="col-md-3">
<input type="text" class="form-control" id="inputName" placeholder="name">
</div>
</div>
<div class="row">
<div class="col-md-2">
<select class="form-control" id="select">
<option value="1">1</option>
<option value="1">1</option>
<option value="1">1</option>
</select>
</div>
<div class="col-md-3">
<input type="text" class="form-control" id="inputName" placeholder="name">
</div>
</div>
</div>
</div>
bootply demo