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;
}
Related
JSFiddle: https://jsfiddle.net/yL9b2ewu/1/
In this fiddle I have 3 DIVs using Bootstrap 3.3.7 that are next to each other; each DIV is col-sm-3.
Each DIV contains a fixed-size button, then there should be a small amount of space under the button, and then optional explanatory text. Each DIV should end with a border at the same level as the lowest available DIV regardless of whether it has text or not.
One solution is to hard-code some <BR>s for the explanation section. In the 3rd DIV I could put in 4 fixed <BR>s. But this hackery doesn't seem right to me, there should be something dynamic and robust.
<div class="col-md-12 col-sm-12 col-xs-12" style="margin-top:10px; margin-bottom: 10px; font-family:'Source Sans Pro', sans-serif; font-size: 14px">
<div class="col-sm-4 cardstyle">
<button type="button" class="btn btn-success btnSubmitWizard"><b>Submit Recall Now<br><br></b></button>
<br><br>No changes can be made after the recall is submitted.
<!-- Can Insert <BR> here but wrong approach -->
</div>
<div class="col-sm-4 cardstyle">
<button type="button" class="btn btn-primary btnSubmitWizard"><b>Review and Edit<br><br></b></button>
<br><br>Review or edit timeline before submitting.
<!-- Can Insert <BR> here but wrong approach -->
</div>
<div class="col-sm-4 cardstyle">
<button type="button" class="btn btn-primary btnSubmitWizard"><b>Logout and<br>Submit Later </b></button>
<br><br>
<!-- Can Insert <BR> here but wrong approach -->
</div>
</div>
I think that you could select only the last div using :last-child and add to it a bigger padding-bottom.
Give a class for the parent of the columns. Something like .colsParent.
Then, for the same breakpoint of Bootstrap #media, you set flexbox for this element.
#media (min-width: 768px) {
.colsParent {
display: flex;
}
}
By default, it fills the full height of the entire column.
Do not set display: flex inline, because it will affect the layout for devices smaller than the breakpoint above.
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.
I am using Bootstrap and I came across the following error in displaying some buttons:
The HTML code is the following:
<div class="row" style="margin-top: 20px">
<div class="col-lg-6 text-left">
<button class="btn btn-primary profile-button">Save</button>
</div>
<div class="col-lg-6 text-right">
<button class="btn btn-primary profile-button">Reset</button>
</div>
</div>
The CSS for the custom class is:
.profile-button {
min-width: 125px;
}
The error only occurs when I am resizing the browser width. The screenshot attached is when the browser has half the width of the monitor (so 540px, given my resolution). I believe the display error starts at the 768px width value. The resolution I am currently using is 1920x1080.
I've tried wrapping the row inside a container div and also inside of a div that had both container and container-fluid classes.
Just add col-xs-6 class to both div
<div class="row" style="margin-top: 20px">
<div class="col-lg-6 col-xs-6 text-left">
<button class="btn btn-primary profile-button">Save</button>
</div>
<div class="col-lg-6 col-xs-6 text-right">
<button class="btn btn-primary profile-button">Reset</button>
</div>
</div>
DEMO
Bootstrap Grid
Bootstrap puts columns one under the other on smaller devices... It's likely that your columns are becoming full width and stacking, instead of staying at half the size. This is the standard behaviour.
If the buttons must remain side by side, I would recommend using your own classes and floating them, ensuring the max-width is 50%
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 have tried using the row class but it was not solving the problem. I am just trying to take two divs and put them next to each other using only bootstrap and not css. (It's a corner case where I can't add any css) Is there a way to do this?
Basically I have this:
<div class="OuterMostClass row">
<div class="outerClass">
<button class="btn">button1</button>
</div>
<div class="outerClass2">
<button class="btn">button2</button>
</div>
</div>
And I want the two buttons to be next to each other and due to limitations I can't add any css other than bootstrap. Is this possible?
Your code sample doesn't show a parent div with the container or container-fluid class and your columns are missing size classes.
Try this:
<div class="container">
<div class="OuterMostClass row">
<div class="outerClass col-xs-6">
<button class="btn">button1</button>
</div>
<div class="outerClass2 col-xs-6">
<button class="btn">button2</button>
</div>
</div>
</div>
The answer is to add the pull-left class to the buttons but as Matthew points out adding a container makes it easier to take care of other spacing