Is there a way to ignore the order class on larger screens?
I have two inputs with a label that goes like this;
<div class="row">
<div class="col-12 col-md-5 order-first order-md-5"><label class="form-label">Label for 1st input <small>(Explanation for first input)</small></label></div>
<div class="col-12 col-md-5 offset-md-2 order-last order-md-10"><label class="form-label">Label for 2n input<small>( Explanation for second input )</small></label></div>
<div class="col-12 col-md-5 order-first order-md-5">
<div class="form-group mt-2">
<input autocomplete="off" type="text" class="form-control" placeholder="">
</div>
</div>
<div class="col-12 col-md-2 align-self-center">
<p class="form-group text-center mt-3">and/or</p>
</div>
<div class="col-12 col-md-5 order-last order-md-10">
<div class="form-group mt-2">
<input autocomplete="off" type="text" class="form-control" placeholder="">
</div>
</div>
</div>
They work just as I want them to on mobile, however, I need them to look like they were as before I have added the order classes which look like
<div class="row">
<div class="col-12 col-md-5"><label class="form-label">Label for 1st input <small>(Explanation for first input)</small></label></div>
<div class="col-12 col-md-5 offset-md-2"><label class="form-label">Label for 2n input<small>( Explanation for second input )</small></label></div>
<div class="col-12 col-md-5">
<div class="form-group mt-2">
<input autocomplete="off" type="text" class="form-control" placeholder="">
</div>
</div>
<div class="col-12 col-md-2 align-self-center">
<p class="form-group text-center mt-3">and/or</p>
</div>
<div class="col-12 col-md-5">
<div class="form-group mt-2">
<input autocomplete="off" type="text" class="form-control" placeholder="">
</div>
</div>
</div>
Ordering is correct on mobile and just as I want, but it breaks the desktop order. Ordering without the order classes is perfect on the desktop for me, but it breaks the mobile order. Is there a way to activate the order classes on mobile only?
Try to add class like .order-1 insted of order-first and all related classes hope that work for you.
Related
I have two Bootstrap columns in my row, one is wide and tall and the others are short and narrow
However, on mobile devices (which I am targeting as anything below lg) I want to change the order of these columns, effectively splitting into three
Photo Consent
Organisation Details
Images
However, as the Photo Consent and Images are in the same column, I can't get this layout right - I either end up with both Photo Consent and Images above the Organisation, or I can get the right mobile layout but then Images ends up on a new row below on desktop.
Is there a way to achieve the desired layout in Bootstrap?
Here's the relevant markup for these columns:
<div class="row">
<!-- first column - Organisation Details -->
<div class="col-12 col-lg-7">
<div class="card card-body mb-3">
<h3 class="text-center">Organisation Details</h3>
<div class="row">
<div class="col-12 col-lg-6">
<div class="form-group mb-3">
<label class="form-label" for="name">Name</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Name" maxlength="255" required />
</div>
</div>
<div class="col-12 col-lg-6">
<div class="form-group mb-3">
<label class="form-label" for="slug">URL Slug</label>
<input type="text" class="form-control" id="slug" name="slug" placeholder="URL Slug" maxlength="300" />
</div>
</div>
<div class="col-12 col-lg-6">
<colour-picker title="Primary Colour" name="primary" value="#000000">
</colour-picker>
</div>
<div class="col-12 col-lg-6">
<colour-picker title="Secondary Colour" name="secondary" value="#FFFFFF"></colour-picker>
</div>
</div>
<div class="form-group mb-3">
<label class="form-label" for="description">Description</label>
<textarea rows="7" id="description" class="form-control" name="description" placeholder="Description" ></textarea>
</div>
</div>
</div>
<!-- second column - photo consent and images -->
<!-- on mobile, would prefer to split this column in two and have Photo Consent show above Org Details -->
<div class="col-12 col-lg-5">
<div class="card card-body mb-3">
<h3 class="text-center">Photo Consent</h3>
<div class="form-group mb-3">
<label for="consent">Can we take photos and videos of this organisation?</label>
<select class="form-control style-by-value" name="consent" id="consent" required>
<option value="">-- Please Select --</option>
<option value="1">No</option>
<option value="2">Yes, but...</option>
<option value="3">Yes</option>
</select>
</div>
<small>Consent type updated from web order</small>
</div>
<div class="card card-body mb-3">
<h3 class="text-center">Images</h3>
<div class="alert alert-danger text-center">File uploads are currently unavailable</div>
</div>
</div>
</div>
The only other thing I could think was to duplicate the columns and use a combination of d-none / d-none-lg to show/hide the relevant layout depending on the screen - but this is all wrapped in a form and I have concerns it could get a bit messy (besides the messiness of duplicated columns!!)
Hi Luke Reafactored your code.
added comments near each section please go through.
adding clearfix d-flex flex-wrap on the row
we are making the child elements inside the row to float, so adding clearfix will solve the issue of float elements.
d-flex flex-wrap setting the display to flex, and flex-wrap makes child elements wrap to next line when there is no enough space.
adding float-start order-2 on organisation block
float-start makes the block to float:left, order-2 - because we made the parent row to display as flex using d-flex , order class controls the position of the block when it is displayed as flex
rest of the blocks are floated to right using float-end, and following the same order concept, we are ordering the blocks.
i suggest you refer order concept in flex-box which helps to solve these issues.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap.min.css" integrity="sha512-SbiR/eusphKoMVVXysTKG/7VseWii+Y3FdHrt0EpKgpToZeemhqHeZeLWLhJutz/2ut2Vw1uQEj2MbRF+TVBUA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="container-fluid">
<!-- added clearfix and display classes -->
<div class="row clearfix d-flex flex-wrap d-lg-block">
<!-- first column - Organisation Details -->
<!-- added order classes and float classes -->
<div class="col-12 col-lg-7 float-start order-2">
<div class="card card-body mb-3">
<h3 class="text-center">Organisation Details</h3>
<div class="row">
<div class="col-12 col-lg-6">
<div class="form-group mb-3">
<label class="form-label" for="name">Name</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Name" maxlength="255" required />
</div>
</div>
<div class="col-12 col-lg-6">
<div class="form-group mb-3">
<label class="form-label" for="slug">URL Slug</label>
<input type="text" class="form-control" id="slug" name="slug" placeholder="URL Slug" maxlength="300" />
</div>
</div>
<div class="col-12 col-lg-6">
<colour-picker title="Primary Colour" name="primary" value="#000000">
</colour-picker>
</div>
<div class="col-12 col-lg-6">
<colour-picker title="Secondary Colour" name="secondary" value="#FFFFFF"></colour-picker>
</div>
</div>
<div class="form-group mb-3">
<label class="form-label" for="description">Description</label>
<textarea rows="7" id="description" class="form-control" name="description" placeholder="Description"></textarea>
</div>
</div>
</div>
<!-- second column - photo consent -->
<!-- added order classes and float classes -->
<div class="col-12 col-lg-5 float-end order-1">
<div class="card card-body mb-3">
<h3 class="text-center">Photo Consent</h3>
<div class="form-group mb-3">
<label for="consent">Can we take photos and videos of this organisation?</label
>
<select
class="form-control style-by-value"
name="consent"
id="consent"
required
>
<option value="">-- Please Select --</option>
<option value="1">No</option>
<option value="2">Yes, but...</option>
<option value="3">Yes</option>
</select>
</div>
<small>Consent type updated from web order</small>
</div>
</div>
<!-- moved images out of the above div and made it seperate -->
<!-- images -->
<!-- added order classes and float classes -->
<div class="col-12 col-lg-5 float-end order-3">
<div class="card card-body mb-3">
<h3 class="text-center">Images</h3>
<div class="alert alert-danger text-center">
File uploads are currently unavailable
</div>
</div>
</div>
</div>
</div>
I know how to do a POST html form. However, I have a weird input system right now, and I am confused on how to switch to an HTML Post form.
Here is the HTML code:
<div class="container-fluid" id='room-create' hidden>
<div class="row">
<div class="col-12 h2 mt-5 text-center">Create Room</div>
</div>
<div class="row mt-2">
<div class="col-12 text-center">
<span class="form-text small text-danger" id='err-msg'></span>
</div>
<div class="col-12 col-md-4 offset-md-4 mb-3">
<label for="room-name">Room Name</label>
<input type="text" id='room-name' class="form-control rounded-0" placeholder="Room Name">
</div>
<div class="col-12 col-md-4 offset-md-4 mb-3">
<label for="your-name">Your Name</label>
<input type="text" id='your-name' class="form-control rounded-0" placeholder="Your Name">
</div>
<div class="col-12 col-md-4 offset-md-4 mb-3">
<button id='create-room' class="btn btn-block rounded-0 btn-info">Create Room</button>
</div>
<div class="col-12 col-md-4 offset-md-4 mb-3" id='room-created'></div>
</div>
</div>
I already tried switching the first div to a form, but to no avail. How would I make the switch to have this post data to my server ("/")?
What I already tried:
<form action="/" method="post" class="container-fluid" id='room-create' hidden>
<!--- other code here ---->
</div>
(I also did the same switch in the second div, the div with `class="row mt-2"`)
Any help is appreciated!
Thanks so much
I ended up wrapping the entire collection of elements (including the outer divs) in a form. However, it was actually the id of the submit button that was messing it up. I am still not sure why this happened, but for some odd reason, when I remove the id it works.
Just wrap the relevant divs who contain the inputs and the button with form tags. And add type attribute with submit value to the button .
<form action="/" method="post">
<div class="col-12 col-md-4 offset-md-4 mb-3">
<label for="room-name">Room Name</label>
<input type="text" id='room-name' class="form-control rounded-0" placeholder="Room Name">
</div>
<div class="col-12 col-md-4 offset-md-4 mb-3">
<label for="your-name">Your Name</label>
<input type="text" id='your-name' class="form-control rounded-0" placeholder="Your Name">
</div>
<div class="col-12 col-md-4 offset-md-4 mb-3">
<button type="submit" id='create-room' class="btn btn-block rounded-0 btn-info">Create Room</button>
</div>
</form>
I have this row using horizontal form to show the label on the left side. On Mobile i want the label to occupy one row, and I want the 3 textboxes to remain on the same row, how to acheive this? They will stack on top of each other still
<div class="row">
<div class="col-sm-12">
<div class="form-group row">
<label for="dobDay" class="col-sm-12 col-md-3 col-form-label">Date Of Birth</label>
<div class="col-sm-4 col-md-3">
<input type="number" class="form-control" id="dobDay" placeholder="DD">
</div>
<div class="col-sm-4 col-md-3">
<input type="number" class="form-control" id="dobMonth" placeholder="MM">
</div>
<div class="col-sm-4 col-md-3">
<input type="number" class="form-control" id="dobYear" placeholder="AAAA">
</div>
</div>
</div>
</div>
You can utilize the equal-width class .col:
<div class="form-group row">
<label for="dobDay" class="col-12 col-md col-form-label" />
<div class="col">
<input />
</div>
<div class="col">
<input />
</div>
<div class="col">
<input />
</div>
</div>
You set col-12 on Date of Birth label so that it would occupy a row for extra small devices (less than 576px). Since other 3 columns are set with col, they will take up equal width on their own row. That would give you the col-sm-4 effect.
On medium devices and up, the Date of Birth label, with col-md, will join the equal-width group as well. That would give you the col-md-3 effect.
demo: https://jsfiddle.net/davidliang2008/yr5gp6kq/8/
That stacking was because you didn't mention breakpoints for xs devices.
<div class="row">
<div class="col-sm-12">
<div class="form-group row">
<label for="dobDay" class="col-xs-12 col-sm-12 col-md-3 col-form-label">Date Of Birth</label>
<div class="col-xs-4 col-sm-4 col-md-3">
<input type="number" class="form-control" id="dobDay" placeholder="DD">
</div>
<div class="col-xs-4 col-sm-4 col-md-3">
<input type="number" class="form-control" id="dobMonth" placeholder="MM">
</div>
<div class="col-xs-4 col-sm-4 col-md-3">
<input type="number" class="form-control" id="dobYear" placeholder="AAAA">
</div>
</div>
</div>
</div>
I have a form that uses Bootstrap 3. My layout should follow the below:
On small screens, Display 1 input per row with the label stacked above the input
On medium devices, Display 2 input per row with the label to the left of each input
On large devices, Display 3 inputs per rom with the label to the left of each input
Rows that contain a textarea, should always be displayed with one input per row
I have this almost working with one small quirk. Everything works well with all of the elements lining up like the below on all bootstrap breakpoints up to md like this:
However, when I hit the lg breakpoint, the text area and it's label no longer line up with the other element like this:
Looking at the grid I've set up I can see why this happens but I cant seem to find a pattern that fits my needs without causing this issue. I know I can start hacking away with CSS like negative margins to force the layout but I feel like there is a better way.
How can I fix this?
Here is a jsFiddle showing the issue
And the relevant HTML:
<form class="form-horizontal" role="form">
<div class="row">
<div class="col-sm-12 input-row clone-icon text-right">
<div class="form-group">
<div class="col-md-2 col-lg-2 left-on-mobile">
<label for="" class="control-label ">Textarea</label>
</div>
<div class="col-md-10 col-lg-10">
<textarea class="form-control form-input"></textarea>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4 input-row clone-icon text-right">
<div class="form-group">
<div class="col-md-4 col-lg-5 left-on-mobile">
<label for="" class="control-label ">Input Field</label>
</div>
<div class="col-md-8 col-lg-7">
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4 input-row clone-icon text-right">
<div class="form-group">
<div class="col-md-4 col-lg-5 left-on-mobile">
<label for="" class="control-label ">Input Field</label>
</div>
<div class="col-md-8 col-lg-7">
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4 input-row clone-icon text-right">
<div class="form-group">
<div class="col-md-4 col-lg-5 left-on-mobile">
<label for="" class="control-label ">Input Field</label>
</div>
<div class="col-md-8 col-lg-7">
<input type="text" class="form-control">
</div>
</div>
</div>
</div>
</form>
For the first Input field change the col-lg-* classes from 5 and 7 to 6 and 6. That will make its <label> tag to align with the one in the previous row.
<div class="col-sm-6 col-lg-4 input-row clone-icon text-right">
<div class="form-group">
<div class="col-md-4 col-lg-6 left-on-mobile">
<label for="" class="control-label ">Input Field</label>
</div>
<div class="col-md-8 col-lg-6">
<input type="text" class="form-control">
</div>
</div>
</div>
Demo link here
I am designing a form using Bootstrap but my labels are of variable size which are causing my form to get distorted as marked in the screenshot.
I have used clearfix class & vertical-align style as well.
I don't want fixed height for my labels as they can of varying size. (e.g. 2, 3, 4 or even of more lines).
This is my code.
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
<div class="form-group">
<label> Label 1 </label>
<input class="form-control" type="text">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
<div class="form-group">
<label> Label 2 In fact the bigger label than all </label>
<input class="form-control" type="text">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
<div class="form-group">
<label> Label 3 </label>
<input class="form-control" type="text">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
<div class="form-group">
<label> Label 4 </label>
<input class="form-control" type="text">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
<div class="form-group">
<label> Label 5 </label>
<input class="form-control" type="text">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
<div class="form-group">
<label> Label 6 </label>
<input class="form-control" type="text">
</div>
</div>
</div>
This is how I do it when forced to use bootstrap
Within your input 'row' you have an 'input-label' and 'input-element' which are col-6. This ensures that they take up 50% of the available space. The col-xs-12 ensures that they then stack at smaller browser widths (mobile).
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="col-md-6 col-sm-6 col-xs-12 input-label">
<label for="xxx">Input label</label>
</div>
<div class="col-md-6 col-sm-6 col-xs-12 input-element">
<input type="text" name="xxx" id="xxx" class="col-md-12 col-sm-12 col-xs-12" />
</div>
</div>
</div>