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.
Related
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?
I want to align input fields and I was asked to not use any css at all. My code:
<!DOCTYPE html>
<html>
<body>
<h1>Travel Reservation Form</h1>
<h3>* denotes mandatory </h3>
<hr>
<form>
<input name="passengername" placeholder="Name">
<input type="tel" placeholder="*Mobile Number" name="mobile" required>
<br>
<input name="mailid" placeholder="*Email ID" type="email" required>
<select name="travelmonth">
<option value="Month of Travel">Month of Travel</option>
<option value="Aug2018">Aug2018</option>
<option value="Sep2018">Sep2018</option>
<option value="Oct2018">Oct2018</option>
<option value="Nov2018">Nov2018</option>
<option value="Dec2018">Dec2018</option>
<option value="Jan2019">Jan2019</option>
<option value="Feb2019">Feb2019</option>
<option value="Mar2019">Mar2019</option>
<option value="Apr2019">Apr2019</option>
</select>
<br>
<select name="package" required>
<option value="*Origin">*Origin</option>
<option value="GOA">GOA</option>
<option value="MUMBAI">MUMBAI</option>
<option value="KERALA">KERALA</option>
<option value="TAMILNADU">TAMILNADU</option>
<option value="KOLKATA">KOLKATA</option>
</select>
<input name="destination" placeholder="Destination">
<br>
<input name=submit type="submit" value="Get A Call">
<input name="clear" type="reset" value="Clear">
</form>
</body>
</html>
The output this code is giving
The output I'm required to get:
How do I align the two input tags such that it looks the same as the posted image?
Just in case you actually can use styles to set the style of a page (because the content, a.k.a the HTML, is the same. And there is no behavior, a.k.a JavaScipt)
Example with bootstrap 5:
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
</head>
<body>
<h1 class="d-flex justify-content-center text-uppercase">Travel Reservation Form</h1>
<h3 class="d-flex justify-content-center">* denotes mandatory </h3>
<hr>
<form class="container">
<div class="row mb-2">
<div class="col-6">
<input name="passengername" placeholder="Name" class="form-control">
</div>
<div class="col-6">
<input type="tel" placeholder="*Mobile Number" name="mobile" required class="form-control">
</div>
</div>
<div class="row mb-2">
<div class="col-6">
<input name="mailid" placeholder="*Email ID" type="email" required class="form-control">
</div>
<div class="col-6">
<select name="travelmonth" class="form-select">
<option value="Month of Travel">Month of Travel</option>
<option value="Aug2018">Aug2018</option>
<option value="Sep2018">Sep2018</option>
<option value="Oct2018">Oct2018</option>
<option value="Nov2018">Nov2018</option>
<option value="Dec2018">Dec2018</option>
<option value="Jan2019">Jan2019</option>
<option value="Feb2019">Feb2019</option>
<option value="Mar2019">Mar2019</option>
<option value="Apr2019">Apr2019</option>
</select>
</div>
</div>
<div class="row mb-2">
<div class="col-6">
<select name="package" required class="form-select">
<option value="*Origin">*Origin</option>
<option value="GOA">GOA</option>
<option value="MUMBAI">MUMBAI</option>
<option value="KERALA">KERALA</option>
<option value="TAMILNADU">TAMILNADU</option>
<option value="KOLKATA">KOLKATA</option>
</select>
</div>
<div class="col-6">
<input name="destination" placeholder="Destination" class="form-control">
</div>
</div>
<div class="row mb-2">
<div class="col-6">
<input name=submit type="submit" value="Get A Call" class="btn btn-primary">
</div>
<div class="col-6">
<input name="clear" type="reset" value="Clear" class="btn btn-secondary">
</div>
</div>
</form>
</body>
</html>
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>
I have this problem:
And this is my code:
<form class="form-horizontal">
<div class="row">
<div class="col-sm-2">
<div class="form-group">
<label class="control-label">Select list:</label>
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label class="control-label" style="display: inline-block;">Select list:</label>
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label class="control-label">Select list:</label>
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label class="control-label">Select list:</label>
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<button class="btn btn-default">Filtra</button>
</div>
</div>
</div>
</form>
how can I get the label side by side the select?
I have tried with the form-horizontal but doesn't work.
Thanks
use form-inline instead of form-horizontal and you can also use this link for your references http://getbootstrap.com/css/#forms
Add form-inline class to your <form> tag
Like so:
<form class="form-inline">