I'm trying to make a table more mobile-responsive, and running into an issue with columns titles.
Right now, the column titles on desktop are 'Display Color,' 'Up' and 'Down.' Ideally, when it switches to mobile, 'up' and 'down' would move to the rows so that instead of the rows saying "A:" for example, it would say "A: Up" and then the next row would be "A: Down" or something like that. Is there a built-in way to do something like this in bootstrap?
here is a jsbin- you can see what I mean by adjusting the width. Currently, when you adjust to mobile-sized (aka smaller) it's not clear which of the dropdowns is for 'Up' and which is for 'Down'
Here's the code:
<!-- views/profile.ejs -->
<!doctype html>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="/stylesheets/main.css" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<style>
body { padding-top:80px; word-wrap:break-word; }
</style>
<script>
<link rel="stylesheet" type="text/css" href="/js/scripts.js" />
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 text-left">
<strong>Display Color</strong>
</div>
<div class="col-md-4 text-left">
<strong>Up</strong>
</div>
<div class="col-md-4 text-left">
<strong>Down</strong>
</div>
</div>
<div class="row">
<div class="col-md-4 text-left">
<strong>A:</strong>
</div>
<div class="col-md-4 text-left">
<select class="bootstrap-select btn col-md-12" name="color1U" autocomplete="off">
<option name="name0" value="0"
>white<span class="colorRectangle"></span>
</option>
<option name="name1" value="1"
>red<span class="colorRectangle"></span>
</option>
<option name="name2" value="2"
>orange<span class="colorRectangle"></span>
</option>
</select>
</div>
<div class="col-md-4 text-left">
<select class="bootstrap-select btn col-md-12" name="color1D" autocomplete="off">
<option name="name0" value="0"
>white</option>
<option name="name1" value="1"
>red</option>
<option name="name2" value="2"
>orange</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-4 text-left">
<strong>B: </strong>
</div>
<div class="col-md-4 text-left">
<select class="bootstrap-select btn col-md-12" name="color2U" autocomplete="off">
<option name="name0" value="0"
>white<span class="colorRectangle"></span>
</option>
<option name="name1" value="1"
selected="selected" >red<span class="colorRectangle"></span>
</option>
<option name="name2" value="2"
>orange<span class="colorRectangle"></span>
</option>
<option name="name3" value="3"
>yellow<span class="colorRectangle"></span>
</option>
</select>
</div>
<div class="col-md-4 text-left">
<select class="bootstrap-select btn col-md-12" name="color2D" autocomplete="off">
<option name="name0" value="0"
>white</option>
<option name="name1" value="1"
selected="selected">red</option>
<option name="name2" value="2"
>orange</option>
</select>
</div>
</div>
<input type="submit" value="Save"/>
</form>
</div>
</body>
</html>
See this fiddle, and let me know if you want this or not?
<h1>
Resize Window
</h1>
<table>
<thead>
<tr>
<th>#</th>
<th>Company</th>
<th>Name</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td data-th="Sr. No.">1</td>
<td data-th="Company">quality designs</td>
<td data-th="Name">Eugene silinda</td>
<td data-th="Country">South Africa</td>
</tr>
</tbody>
</table>
https://jsfiddle.net/wLdvcs06/
You can try this code
<div class="container">
<div class="row">
<div class="col-md-4 text-left">
<h4>Display Color</h4>
<p>A:</p>
<p>B:</p>
</div>
<div class="col-md-4 text-left">
<h4>Up</h4>
<select class="bootstrap-select btn col-md-12" name="color1U" autocomplete="off">
<option name="name0" value="0">white<span class="colorRectangle"></span></option>
<option name="name1" value="1">red<span class="colorRectangle"></span></option>
<option name="name2" value="2">orange<span class="colorRectangle"></span></option>
</select>
<select class="bootstrap-select btn col-md-12" name="color1U" autocomplete="off">
<option name="name0" value="0">white<span class="colorRectangle"></span></option>
<option name="name1" value="1">red<span class="colorRectangle"></span></option>
<option name="name2" value="2">orange<span class="colorRectangle"></span></option>
</select>
</div>
<div class="col-md-4 text-left">
<h4>Down</h4>
<select class="bootstrap-select btn col-md-12" name="color1U" autocomplete="off">
<option name="name0" value="0">white<span class="colorRectangle"></span></option>
<option name="name1" value="1">red<span class="colorRectangle"></span></option>
<option name="name2" value="2">orange<span class="colorRectangle"></span></option>
</select>
<select class="bootstrap-select btn col-md-12" name="color1U" autocomplete="off">
<option name="name0" value="0">white<span class="colorRectangle"></span></option>
<option name="name1" value="1">red<span class="colorRectangle"></span></option>
<option name="name2" value="2">orange<span class="colorRectangle"></span></option>
</select>
</div>
</div>
Related
I have something like this
<div class="d-flex">
<div class="d-flex flex-column">
<label>ID</label>
<input class="form-control form-control-sm" style="width: 13rem;" />
</div>
<select class="form-control" style="width: 13rem;">
<option value="0">Select...</option>
<option value="1">Other 1</option>
<option value="2">Other 2</option>
</select>
</div>
The select that I have is aligning with the ID label instead of the input. Is there any way I can align it with the input without having to put a label on top of the select?
You can add align-items-end to the flex container (first-example).
If you want them to properly line up you will need to make the select element form-control-sm as well (second example).
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex align-items-end">
<div class="d-flex flex-column">
<label>ID</label>
<input class="form-control form-control-sm" style="width: 13rem;" />
</div>
<select class="form-control" style="width: 13rem;">
<option value="0">Select...</option>
<option value="1">Other 1</option>
<option value="2">Other 2</option>
</select>
</div>
<hr />
<div class="d-flex align-items-end">
<div class="d-flex flex-column">
<label>ID</label>
<input class="form-control form-control-sm" style="width: 13rem;" />
</div>
<select class="form-control form-control-sm" style="width: 13rem;">
<option value="0">Select...</option>
<option value="1">Other 1</option>
<option value="2">Other 2</option>
</select>
</div>
I have edited your code and I think this is a good solution:
<div class="d-flex">
<div class="d-flex flex-column">
<label>ID</label>
<input class="form-control form-control-sm" style="width: 13rem;" />
</div>
<div class="d-flex flex-column">
<label style="color: transparent;">ID</label>
<select class="form-control" style="width: 13rem;">
<option value="0">Select...</option>
<option value="1">Other 1</option>
<option value="2">Other 2</option>
</select>
</div>
</div>
I think you are using bootstrap so I don't know if bootstrap will interfere with my code but try it out anyway.
I have a problem with sizing of input elements. When iam creating an input-group (with bootstrap 4.5) and then want them to be input-group-sm, only the custom select fields are in small size, the labels in front of them are in normal size.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<form>
<div class="input-group input-group-sm mb-2">
<div class="input-group-prepend">
<label class="input-group-text" for="newsAnzahl">Anzahl</label>
</div>
<select class="custom-select" id="newsAnzahl" name="newsAnzahl">
<option value="3" selected>3</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="50">50</option>
<option value="100">100</option>
<option value="200">200</option>
</select>
<div class="input-group-prepend">
<label class="input-group-text" for="newsSortierung">Sortierung</label>
</div>
<select class="custom-select" id="newsSortierung" name="newsSortierung">
<option value="ASC">Aufsteigend</option>
<option value="DESC" selected>Absteigend</option>
</select>
<button id="button_getnewslist" type="button" class="btn btn-primary">Liste aktualisieren</button>
</div>
</form>
Examples are taken from here at headlines "Sizing" and "Custom Select"
Thanks for help!
The problem is that you defined multiple elements inside your .input-group element.
Just add multiple .input-group's around your elements as shown in this fiddle:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<form>
<div class="input-group input-group-sm mb-2">
<div class="input-group-prepend">
<label class="input-group-text" for="newsAnzahl">Anzahl</label>
</div>
<select class="custom-select" id="newsAnzahl" name="newsAnzahl">
<option value="3" selected>3</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="50">50</option>
<option value="100">100</option>
<option value="200">200</option>
</select>
</div>
<div class="input-group input-group-sm mb-2">
<div class="input-group-prepend">
<label class="input-group-text" for="newsSortierung">Sortierung</label>
</div>
<select class="custom-select" id="newsSortierung" name="newsSortierung">
<option value="ASC">Aufsteigend</option>
<option value="DESC" selected>Absteigend</option>
</select>
</div>
<button id="button_getnewslist" type="button" class="btn btn-primary">Liste aktualisieren</button>
</form>
If you want to align it in one line, just use Bootstrap's grid system as shown in this fiddle:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<form class="row mt-2">
<div class="col">
<div class="input-group input-group-sm mb-2">
<div class="input-group-prepend">
<label class="input-group-text" for="newsAnzahl">Anzahl</label>
</div>
<select class="custom-select" id="newsAnzahl" name="newsAnzahl">
<option value="3" selected>3</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="50">50</option>
<option value="100">100</option>
<option value="200">200</option>
</select>
</div>
</div>
<div class="col">
<div class="input-group input-group-sm mb-2">
<div class="input-group-prepend">
<label class="input-group-text" for="newsSortierung">Sortierung</label>
</div>
<select class="custom-select" id="newsSortierung" name="newsSortierung">
<option value="ASC">Aufsteigend</option>
<option value="DESC" selected>Absteigend</option>
</select>
</div>
</div>
<div class="col-3">
<button id="button_getnewslist" type="button" class="btn btn-sm btn-primary">Liste aktualisieren</button>
</div>
</form>
Good luck!
I hope that helped.
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<div class="container">
<form>
<div class="input-group input-group-sm mb-2">
<div class="input-group-prepend">
<span class="input-group-text " for=" newsAnzahl ">Anzahl</span>
</div>
<select class=" custom-select " id=" newsAnzahl " name=" newsAnzahl ">
<option value=" 3 " selected>3</option>
<option value=" 10 ">10</option>
<option value=" 20 ">20</option>
<option value=" 50 ">50</option>
<option value=" 100 ">100</option>
<option value=" 200 ">200</option>
</select>
</div>
<div class="input-group input-group-sm ">
<div class=" input-group-prepend ">
<span class=" input-group-text " for=" newsSortierung ">Sortierung</span>
</div>
<select class=" custom-select " id=" newsSortierung " name=" newsSortierung ">
<option value=" ASC ">Aufsteigend</option>
<option value=" DESC " selected>Absteigend</option>
</select>
</div>
<button id=" button_getnewslist " type=" button " class=" btn btn-primary mt-3 ">Liste aktualisieren</button>
</form>
</div>
I am using bootstrap 4 and I need to add a checkbox and a dropdown menu inside a div inline. Checkbox first and then dropdown.
Here is an image example of what I need:
Example image:
How can I do this in Bootstrap 4?
You can use bootstrap Inline forms or Column Auto Sizing for that. Try following two example code.
With Inline forms:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class="form-inline">
<div class="custom-control custom-checkbox mr-sm-2">
<input id="workflow" name="workflow" class="custom-control-input" type="checkbox">
<label class="custom-control-label" for="workflow">Default Workflow</label>
</div>
<select id="dropdown" name="dropdown" class="custom-select" >
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Option 3">Option 3</option>
</select>
</div>
With Column Auto Sizing:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class="form-row align-items-center">
<div class="col-auto">
<div class="custom-control custom-checkbox">
<input id="workflow" name="workflow" class="custom-control-input" type="checkbox">
<label class="custom-control-label" for="workflow">Default Workflow</label>
</div>
</div>
<div class="col-auto">
<select id="dropdown" name="dropdown" class="custom-select">
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Option 3">Option 3</option>
</select>
</div>
</div>
No need for bootstrap classes
.input-wrapper {
display: flex;
}
label {
margin-right: 10px;
}
<div class="input-wrapper">
<input type="checkbox" name="checkbox" id="checkbox">
<label for="checkbox">Default workflow</label>
<select name="select" id="select">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
</select>
</div>
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'm having an issue with getting my 'Create' button to be right of my dropdownlist. Because the dropdown has a class form-control it makes the width 100% of the space available and so my button wraps underneath. If I remove the class the button sits next to the dropdown.
http://jsfiddle.net/2y39drrh/
Rather than writing a CSS class to override form-control's width, is there a better way? The forms.less file does say to use form-control with <select> elements...
<div class="form-group">
<label class="control-label col-md-1" for="Note_NoteTypeId">Type</label>
<div class="col-md-11">
<select class="form-control" data-val="true">
<option value="">Select...</option>
<option value="3">Option1</option>
<option value="2">Option2</option>
<option value="1">Option3</option>
</select>
<button class="btn btn-success" id="btnCreate" type="button">Create</button>
</div>
</div>
<div class="form-group">
<span class="field-validation-valid text-danger"></span>
</div>
I guess you want something like this?
Example 1
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="input-group">
<select class="form-control" data-val="true">
<option value="">Select...</option>
<option value="3">Option1</option>
<option value="2">Option2</option>
<option value="1">Option3</option>
</select>
<span class="input-group-btn">
<button class="btn btn-success" id="btnCreate" type="button">Create</button>
</span>
</div>
<div class="form-group">
<span class="field-validation-valid text-danger"></span>
</div>
Example 2
<div class="form-inline">
<select class="form-control" data-val="true">
<option value="">Select...</option>
<option value="3">Option1</option>
<option value="2">Option2</option>
<option value="1">Option3</option>
</select>
<input type="button" class="btn btn-success" value="Create">
</div>
I'm not sure why, the code I'm inserting to this post works weird on JSFiddle and SO editor. But it works fine on codepen.io
body {
max-width: 800px;
margin: 0 auto;
padding: 2em;
}
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-6">
<select id="vehicle" name="vehicle" class="form-control" data-dropupauto="false">
<option value=""> 1 </option>
<option value=""> 2 </option> <option value=""> 3 </option>
</select>
</div>
<div class="col-md-6">
<button class="btn btn-success" id="btnCreate" type="button">Create</button>
</div>
</div>
See the example in full page. I believe that's the reason why SO editor and JSFiddle shows different results.