Basically I have a bunch of rows with a check box and a label taking up 2 column spaces. Some of the labels are longer then others so when you resize the browser or are viewing on a mobile device the columns with longer labels will collapse to a second row and the shorter ones stay beside their check box. It looks like crap.
HTML:
<div class = "row">
<div class="col-lg-2">
<div class="input-group">
<input type="checkbox">
Small Label
</div>
</div>
<div class="col-lg-2">
<div class="input-group">
<input type="checkbox">
Big Label that collapses first
</div>
</div>
</div>
Is there a way to make it so that if one of them collapses then the whole row does?
Even better would be to have a dynamic font that worked like an image and just grew and shrank taking up a maximum of 100% as necessary to not cause a collapse at all. I could just use images but I have a lot of these these labels and it will take forever to make an image for each.
Bootstrap provides four classes for different screen :
xs for extra small
sm for small
md for medium
lg for large screen
In your following code should work, you can customize as per your screen needs :
<div class = "row">
<div class="col-xs-12 col-sm-12 col-lg-2">
<div class="input-group">
<input type="checkbox">
Small Label
</div>
</div>
<div class="col-xs-12 col-sm-12 col-lg-2">
<div class="input-group">
<input type="checkbox">
Big Label that collapses first
</div>
</div>
</div>
You can add a custom CSS to your bootstrap style and define some simple CSS rules as you would like to force the style to behave...
CSS Example:
.input-group {
display: inline;
}
I think the right HTML element for this is a list..
although, If you are going to edit the CSS... It's good to know that you can add a custom css file to your project and use a CSS class with your bootstrap style like this:
CSS:
.checkbox-inline {
display: inline;
}
HTML:
<div class="input-group checkbox-inline">
<input type="checkbox">
Small Label
</div>
There are many possible answers...
maybe, you will also find this question useful.
Related
I have the following markup in a form.
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="control-label">
States
<img id="clear-selection" src="~/images/delete.png" title="Clear Selection" />
</label>
<select class="form-control"></select>
</div>
</div>
</div>
The control label (States) is followed by an icon. But I would really like the icon to be aligned to the right.
Instead of this:
I want this:
Is there any way to do this within the intended framework of Twitter Bootstrap? I'm not really clear about what sort of Bootstrap styles are considered acceptable within a <label> tag.
You can solve this simply by moving the image above and outside of the label and giving it a class of float-right.
This will float the image to right.
I am new to web development, particularly CSS and Bootstrap. I am struggling to center the set of 5 items in a Bootstrap row. Here is what I have:
<div class="container-fluid">
<div class="row text-center" style="border:2px solid green">
<div style="display:inline-block;float:none;vertical-align:top;margin-top:8px">My Label</div>
<div class="col-xs-2 col-sm-2 col-md-1"style="display:inline-block;float:none">
<input class="form-control" type="number"></input>
</div>
<div style="width:2%;display:inline-block;float:none"></div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-1"style="display:inline-block;float:none">
<button class="btn btn-default btn-block" role="button">Button1</button>
</div>
<div class="col-xs-3 col-sm-3 col-md-2"style="display:inline-block;float:none">
<input class="form-control" type="number"></input>
</div>
<div style="width:2%;display:inline-block;float:none"></div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-1"style="display:inline-block;float:none">
<button class="btn btn-default btn-block" role="button">Button2</button>
</div>
</div>
</div>
For the most part, it gives me the result I want in Firefox and Chrome. The controls are spaced a little and it is responsive -- the white space shrinks while the controls grow (in % of screen) as the screen gets smaller. Control widths are controlled via Bootstrap col-*-# classes. Though, IE seems to align the buttons at the bottom of the row for some reason. I'm not sure why.
Aside from defining custom CSS classes instead of style attributes, is this the correct/best way to achieve the result that I want? Or, is there a better way to do this in CSS or Bootstrap? It seems hackish to have to use vertical-align and margin to get the label to line up. Also, I started out using form elements and classes. But, that kept making things worse. What is the benefit of using the form element or downside to not using it?
I read numerous similar posts. But they all seemed to have something different enough that the solutions seemed to not fit what I am doing. I have a set of controls that I want centered as a unit. I do not want to simply snap them to the 12-column Bootstrap grid.
JSFiddle
You still can use a custom class when you need it :
.classname {
display: inline-block;
vertical-align: middle;
float: none;
}
I use AngularJs, Bootstrap, NodeWebkit.
I'm trying to create my pages' header like this :
So here is my code :
<div class="row">
<img class="col-md-offset-1 col-xs-1 col-sm-1 col-md-1 col-lg-1 img-rounded image-module-pd " src="{{titreImage}}"></img>
<h3 class="col-xs-5 col-sm-5 col-md-5 col-lg-5 text-left titre-module">{{ titreLocalization | translate }}</h3>
<div class="input-group text-right">
<span id="basic-addon1" class="input-group-addon glyphicon glyphicon-search" ></span>
<input class="form-control" ng-model="recherche_texte" Name="recherche_input" placeholder="{{ 'RECHERCHE_TITRE' | translate }}" type="text" style="width:250px;"/>
</div>
</div>
This is what I get :
There are a few issues : My glyphicon is not fully vertically alignated with the input, why ? I've just pasted the example from bootstrap's documentation.
My input + glyphicon are not on the right
My input + glyphicon are not vertically alignated with my title.
I hope my images are big enough so you can understand my problems.
Thank you
There are minor mistakes against important Bootstrap 3 rules:
First:
Content should be placed within columns, and only columns may be immediate children of rows
Second:
If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
Third:
Icon classes cannot be directly combined with other components. They should not be used along with other classes on the same element. Instead, add a nested <span> and apply the icon classes to the <span>
So, place your image, title and search components into separate div with col classes and use offset where needed, but be sure that your column count doesn't add up over 12, otherwise these contents will wrap onto the next line.
This following is a working example, available at Bootply to play around with the code:
<div class="row">
<div class="col-xs-offset-1 col-xs-1">
<img class="img-rounded image-module-pd" src="http://placehold.it/100x60">
</div>
<div class="col-xs-5">
<h3 class="text-left titre-module">Title</h3>
</div>
<div class="col-xs-offset-2 col-xs-2">
<div class="input-group text-right">
<span id="basic-addon1" class="input-group-addon">
<span class="glyphicon glyphicon-search"></span>
</span>
<input class="form-control" ng-model="recherche_texte" name="recherche_input" placeholder="Search" type="text">
</div>
</div>
</div>
Note that you may omit col-sm, col-md and col-lg classes if a col-xs class is present and you don't need other breakpoints on larger screen widths:
Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, e.g. applying any .col-md-* class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg-* class is not present.
To solve your problem to vertically align the search component read on this other posts that cover this issue:
vertical-align with bootstrap 3
How to center align vertically the container in bootstrap
I am using the grid system of bootstrap.
My HTML looks as follows (jade syntax)
form.form-horizontal(role='form', name='containerForm', id='containerForm', novalidate)
fieldset
.form-group
label.col-lg-2.control-label(for='ContType')
.col-lg-4
select.form-control(ng-model="data.ContainerType", id='ContType', name='ContType', ng-options='translate(s.name) for s in containerTypeList')
.form-group
(and so on)
The 'form-control' CSS class is taking 100% width of parent DIV (e.g. col-lg-4, these col-lg classes are effectively "table cells"):
.form-control {
display: block;
width: 100%;
}
I need however to display some HTML right before the SELECT above (or, alternatively, after). I need that HTML to be in the same line as the SELECT. If I simply enter something after the SELECT now, it goes to next line, due to width=100% of that SELECT.
How I can possibly achieve my goal while keeping bootstrap classes in place?
You could place both in a row, then put each item in it's own column. For example:
<div class="row col-sm-12">
<div class="col-sm-6">
<input type="text" class="form-control">
</div>
<div class="col-sm-6">
<button class="btn btn-primary">Demo</button>
</div>
Alternatively, you could use an input-group, for example:
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default">Demo</button>
</span>
</div>
By using http://twitter.github.com/bootstrap/assets/css/bootstrap.css,
when I make a stack of labels, they are rendered in one column.
<label>..</label>
<label>..</label>
<label>..</label>
My goal is to put them in several columns depending by the width of the screen.
Here is my demo http://jsfiddle.net/D2RLR/2557/
Any hints?
Something like that?
<div class="row">
<div class="span3"><label>...</label> </div>
<div class="span3"><label>...</label> </div>
<div class="span3"><label>...</label> </div>
<div class="span3"><label>...</label> </div>
</div>
Your code was almost correct. You left a couple of <div>s unclosed, but you also had the .controls and .control-groups nested incorrectly.
Here is an updated fiddle with your code fixed as well as an example with 3 columns (I also updated the javascript and added buttons for toggling the checkboxes. If you want to still use a checkbox for toggling you can modify the code pretty easily):
http://jsfiddle.net/D2RLR/2624/
(make sure you scroll down in the html section of the fiddle to see the second example, in case you have a small screen)
This example uses columns and will add more columns across as the screen size will allow. This is purely css and html.
This script will size the columns based on the width of the container they are in. Simply specify the number of columns. This way all columns will always fit perfectly in a row. This uses jquery to resize the column widths.
You could float the labels with css.
<div class="column">
<label class="float"></label>
<input type="checkbox" value="2"> Monday
</div>
<div class="column">
<label class="float"></label>
<input type="checkbox" value="3"> Tuesday
</div>
...
<div class="clear"></div>
CSS
.column {
width: 200px;
float: left;
}
.clear {
clear: both;
}