<form class="container">
<div class="row">
<div class="col-md-1">
<label for="vol" class="control-label">Analysis Volume</label>
</div>
<div class="col-md-3">
<div id="volume">
<div class="control">
<span class="knob"></span>
</div>
</div>
</div>
<div class="col-md-1">
<label for="username" class="control-label vol-box">50% usage</label>
</div>
</div>
</form>
I have been trying to arrange these three items in a row like this in image, but i am not sure what class to apply and also in smaller devices i need to disable the column completely.
<!-- HTML --->
<div class="module-wrap">
<form class="container-fluid">
<div class="row hidden-xs">
<div class="col-md-3">
<label for="vol" class="control-label">Analysis Volume</label>
</div>
<div class="col-md-6">
<div id="volume">
<div class="control">
<span class="knob"></span>
</div>
</div>
</div>
<div class="col-md-3">
<label for="username" class="control-label vol-box">50% usage</label>
</div>
</div>
</form>
</div>
/** CSS **/
.module-wrap {
width: 200px;
margin: 0 auto;
}
I added the class "hidden-xs" to the row, this will hide the div and everything in it on small devices. Also the columns must add up to a total of twelve.
You will need to wrap everything in a div to limit the total width.
I hope this solves your problem.
Related
I want to different order on Desktop and on mobile,
Currently this is the order
On Med+ :
On small:
Desktop is good. This is the right position.
On mobile I want the picture to come below the button and the test.
I have tried order-sm-fist and order-sm-last and also order-1 until order-2 but nothing seems to change. Not sure what I am doing wrong:
<section class="feature section">
<div class="container">
<div class="row">
<div class="heading">
<h2>Try it now!</h2>
</div>
<div class="col-md-5 order-md-last">
<img src="The image url is here"
class="" id="generated-monKey" alt="">
</div>
<div class="col md-2 order-md-1">
<br>
</div>
<div class="col-md-5 order-md-first text-center">
<p>Enter a Banano wallet address and press the "Generate monKey" button.</p>
<br>
<p>If you do not have a Banano wallet you can create one in BananoVault or simply generate a random Banano
wallet address.</p>
<br>
<div class="container">
<input type="text" class="form-control form-rounded" placeholder="Banano Address" maxlength="64" size="65">
<br>
<div class="container">
<div class="row">
<form>
<div class="checkbox col-md-6">
<label>
<input type="checkbox" value="" checked>Accessories</label>
</div>
<div class="checkbox col-md-6">
<label>
<input type="checkbox" value="" checked>Background</label>
</div>
</form>
</div>
</div>
</div>
<br>
<button type="button" class="btn btn-lg btn-success form-rounded" border>Generate monKey</button>
<br>
<br> Monkeys are perfect for avatars. Click on the monKey image in order to download it.
</div>
</div>
</div>
</section>
In this example I changed the md to first and last which means even on Desktop I should see the image on the right and the text on the left and yet nothing changes.
Your HTML structure is so messy. Here are my 2 cents:
No nested container
cols should come right after row.
What's up with the missing - on col md-2? And why do you need a column wrapping a <br>?
Cleaned up HTML structure
<section class="feature section">
<div class="container">
<div class="heading"></div>
<div class="row">
<div class="col-md-6">
<form />
</div>
<div class="col-md-6 order-md-first">
<img />
</div>
</div>
</div>
</section>
fiddle: http://jsfiddle.net/aq9Laaew/144878/
I am trying to use bootstrap 4, I have a simple div contains a text box. I want the text box to take the div width. I thought in Bootstrap the input, by default, take the full width?
What is really bugging me is that the code ran correctly here in the snippet??
Here is the sample code:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md" style="background-color: blue;">
<!-- this is the left side -->
<input type="text" class="form-control" placeholder="Email address">
</div>
<div class="col-md" style="background-color: red;">
<!-- this is the right side -->
</div>
</div>
</div>
The above code is exactly what I have. I am not sure this is the right way to do this?
I don't know if this can help, I am using this code inside a view (MVC project).
So the this is how it looks inside visual studio:
Layout:
<div class="container">
<div class="row">
<div class="col-md">
#RenderBody()
</div>
<div class="col-md d-none d-md-block">
<!------>
</div>
</div>
<footer>
<p>© #DateTime.Now.Year - My Project</p>
</footer>
</div>
And this is the view:
<input type="text" class="form-control" placeholder="Email address">
This is how it looks when I render the view (there are other CSS related to background color, etc.. that I didn't add here)
Columns have padding of 15px on both sides. To remove the padding you can...
Use p-0 for padding:0 on the column with input:
<div class="container">
<div class="row">
<div class="col-md p-0" style="background-color: blue;">
<!-- this is the left side -->
<input type="text" class="form-control" placeholder="Email address">
</div>
<div class="col-md" style="background-color: red;">
<!-- this is the right side -->
</div>
</div>
</div>
Or, you can use no-gutters to remove padding from all cols in the row. This will also remove the negative margins from the row which will effect alignment with the sides of the viewport on smaller screens...
<div class="container">
<div class="row no-gutters">
<div class="col-md" style="background-color: blue;">
<!-- this is the left side -->
<input type="text" class="form-control" placeholder="Email address">
</div>
<div class="col-md" style="background-color: red;">
<!-- this is the right side -->
</div>
</div>
</div>
Demo: https://www.codeply.com/go/d4AOm39YD3
When the content is wide enough to have this all on the same row without line breaking (probably need to go full page with the snippet), the right label text is aligned slightly higher than the left label text. I'm trying to get the text of the two labels aligned to the same baseline.
I've tried to use vertical align in various ways, tried to set the height the same as the left on the right group, but I can't get anything to work.
Of course I could just set a fixed margin, but is there a responsive way to do this?
.main {
margin-top: 20px;
}
#left-input {
width: 100px;
}
.vmiddle {
/* does nothing ? */
vertical-align: middle;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container main">
<div class="row">
<div class="col-xs-6 ">
<div class="form-inline">
<div class="form-group">
<label>Left Label:</label>
<input id="left-input" type="text" class="form-control" value="Some Value" />
</div>
</div>
</div>
<div class="col-xs-6 vmiddle">
<div class="form-inline">
<div class="form-group">
<label>Right Label: Higher</label>
</div>
</div>
</div>
</div>
</div>
Since the second one is technically not a label, you can use Bootstrap's Static form control instead. It's designed to align with form-control and .btn elements.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container main">
<div class="row">
<div class="col-xs-6 ">
<div class="form-inline">
<div class="form-group">
<label>Left Label:</label>
<input id="left-input" type="text" class="form-control" value="Some Value" />
</div>
</div>
</div>
<div class="col-xs-6 vmiddle">
<div class="form-inline">
<div class="form-group">
<p class="form-control-static"><strong>Right Label</strong></p>
</div>
</div>
</div>
</div>
</div>
Add a margin utility class that's half the height of Bootstrap's padding.
<style>
.m-t-7 {
margin-top: 7.5px;
}
</style>
<div class="col-xs-6">
<div class="form-inline">
<div class="form-group">
<label class="m-t-7">Right Label: Higher</label>
</div>
</div>
</div>
Yup.
First, give the right label an id so you can select it individually.
<label id="right">Right Label: Higher</label>
then, in your css add:
#right{
padding-top:2px; /*Insert your own value for paddin*/
}
and to make it dynamic, remove the padding when the left label stacks. Find the pixel width of the browser when this happens, and then create a media query for the event:
#media(max-width:300px){
#right{
padding-top:0;
}
}
Another idea which may not be possible in your layout, would be to limit the width of the content so it never gets wide enough for this.
Yes. Just try to remove the margin bottom of the <label>Right Label: Higher</label>. Please leave a comment if this wont work.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container main">
<div class="row">
<div class="col-xs-6 ">
<div class="form-inline">
<div class="form-group">
<label>Left Label:</label>
<input id="left-input" type="text" class="form-control" value="Some Value" />
</div>
</div>
</div>
<div class="col-xs-6 vmiddle">
<div class="form-inline">
<div class="form-group">
<label style="margin-bottom: 0;">Right Label: Higher</label>
</div>
</div>
</div>
</div>
</div>
I have two input boxes that I am trying to get side by side on the row but I'd like there still to be a gap between the boxes but flush to the sides of the container.
Is there a way using just Bootstrap to do this? The container is a replication of a mobile device.
<div class="group col-sm-12">
<div class="row">
<div class="col-sm-6">
<div class="row">
<input type="text" name="first-name" ng-model="user.firstname" />
</div>
</div>
<div class="col-sm-6">
<div class="row">
<input type="text" name="last-name" ng-model="user.surname" />
</div>
</div>
</div>
</div>
plunkr example
Bootstrap has a few different grid classes. col-<size>-<num> where <size> can be xs, sm, md, or lg, and <num> can be an integer between (and including) 1-12.
For mobile devices, you'll want to use xs. If you don't specify any of the larger sizes, then they'll use the same widths as the smaller one. If you change col-sm-12 to col-xs-12 and col-sm-6 to col-xs-6 I think you'll get the result you're looking for.
It also helps your inputs look more consistent and more easily themed if you give them the form-control class.
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="group col-xs-12">
<div class="row">
<div class="col-xs-6">
<div class="row">
<input class="form-control" type="text" name="first-name" />
</div>
</div>
<div class="col-xs-6">
<div class="row">
<input class="form-control" type="text" name="last-name" />
</div>
</div>
</div>
</div>
I'm not familiar with Bootstrap, but one way to achieve it would be to add this to your CSS:
.col-sm-6, .col-sm-6 .row, .col-sm-6 .row input {
display: inline-block;
}
I am not sure if I understand your question correctly. You need a space between the text box side by side right? if so try this code. You could also use col-xs-offset-1 for space between grid. This will allow you to push 1 grid away. example http://www.bootply.com/U6vlrIktq2
<div class="col-md-4">
<input type="text" class="form-control">
</div>
<div class="col-md-4 ">
<input type="text" class="form-control"><br>
</div>
<!-- for more spacing between boxes-->
<div class="col-xs-5">
<input type="text" class="form-control">
</div>
<div class="col-xs-5 col-xs-offset-1">
<input type="text" class="form-control">
</div>
I am strugling with a layout in bootstrap.
On normal desktop environment I have this layout
________col1________________col2_________
|firstname + input | Email + input |
|lastname + input | Telephone + input|
|etc | |
-----------------------------------------
When the page is viewed on mobile, I would like column 2 to drop under column 1. At the moment email gets pushed under firstname. The order becomes firstname, email, lastname, telephone, etc
Here is the html I have so far. It's probably simple to solve this, but so far no luck. In the below code my rows are of course a problem, but wrapping it in two col-xx-6 columns doesn't work somehow
<div class="row">
<div class="col-sm-2">
<label class="control-label">Bedrijfsnaam</label>
</div>
<div class="col-sm-4">
<span data-bind="text: name"></span>
</div>
<div class="col-sm-2">
<label class="control-label">Straat</label>
</div>
<div class="col-sm-4" data-bind="with: address">
<span data-bind="text: street"></span>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<label class="control-label">E-mailadres</label>
</div>
<div class="col-sm-4">
<span data-bind="text: email"></span>
</div>
<div class="col-sm-2">
<label class="control-label">Nummer</label>
</div>
<div class="col-sm-4" data-bind="with: address">
<span data-bind="text: number"></span>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<label class="control-label">Website</label>
</div>
<div class="col-sm-4">
<span data-bind="text: website"></span>
</div>
<div class="col-sm-2">
<label class="control-label">Achtervoegsel</label>
</div>
<div class="col-sm-4" data-bind="with: address">
<span data-bind="text: numberext"></span>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<label class="control-label">KvK nummer</label>
</div>
<div class="col-sm-4">
<span data-bind="text: coCnumber"></span>
</div>
<div class="col-sm-2">
<label class="control-label">Postcode</label>
</div>
<div class="col-sm-4" data-bind="with: address">
<span data-bind="text: postalcode"></span>
</div>
</div>
This is easily accomplished with Bootstrap's Grid System. The following will work for you
<div class="row">
<div class="col-sm-6">
<!-- column 1 stuff here -->
</div>
<div class="col-sm-6">
<!-- column 2 stuff here -->
</div>
</div>
What the above does is create two columns that will be floated next to each other on larger displays but will collapse to rows when the resolution becomes less than 750px (the breakpoint Bootstrap has chosen for col-sm-*.
Don't forget that Bootstrap requires you to wrap your content within a .container class. More info here http://getbootstrap.com/css/#overview-container