I am trying to setup a div with bootstrap.
My problem is that I need to have a set margin on the left and right of the div. By using col-md-10 doesn't get me the margin I need. It's more than 10px if the screen is wide.
For example:
<div class="col-md-offset-1 col-md-10">
//contents...
</div>
-------------------------------------
| --------- div --------------
|10px margin 10px margin
| | |
| | |
| -------------------------------
-------------------------------------
Does anyone have an idea of how to fix it? Thanks a lot!
If I understand you want always a margin value of 10px at each side. You can create a custom class and use calc(), try this:
<div class="col-md-offset-1 col-md-10 margin">
//contents...
</div>
.margin {
margin:0 10px;
width:calc(100% - 20px);
}
Check this BootplyDemo
Another Option could be a custom class on the container and use padding. Try:
<div class="container margin">
<div class="col-xs-12">
//contents...
</div>
</div>
.margin {
width:100%;
padding:0 10px;
}
Another BootplyDemo
You should be using the container-fluid class on your main content div.
<div class="container-fluid">
<!-- Contents -->
</div>
What this does is creates a full-width container with a bit of padding on the right and left, top and bottom that responsively resizes based on the width of your browser.
Hope this helps!
Related
I have a grid with multiple columns. All columns are in one row and the number of columns may vary.
Since I needed some vertical space between columns, I added margin-bottom on columns.
However, I want equal space between wrapper and the columns so I need to remove margin-bottom on last few columns in the row.
See sample here: https://jsfiddle.net/aucovic/rhhyu6h2/6/
How would I dynamically remove bottom-margin on those last few columns?
<style>
.wrapper {
background:#000;
padding:10px;
}
.box {
background: #fff;
}
.mb {
margin-bottom:10px;
}
</style>
<div class="wrapper">
<div class="row">
<div class="col-md-4 col-xs-6 mb">
<div class="box">
Box 1
</div>
</div>
<div class="col-md-4 col-xs-6 mb">
<div class="box">
Box 2
</div>
</div>
<div class="col-md-4 col-xs-6 mb">
<div class="box">
Box 3
</div>
</div>
<div class="col-md-4 col-xs-6 mb">
<div class="box">
Box 4
</div>
</div>
<div class="col-md-4 col-xs-6 mb">
<div class="box">
Box 5
</div>
</div>
</div>
</div>
Well, in case you want the wrapper to have some padding, a super quick-fix would be to set the bottom padding to be equal (initial padding - margin bottom of columns). On your example it's just gonna be padding-bottom: 0 for your wrapper. This is definitely not an ultimate fix, but is super simple and works in described case.
Here's a fiddle: https://jsfiddle.net/kLr8sog6/
Assuming you don't change the number of columns, nth child selectors could help:
//mobile and tablet view
#media(max-width:992px) {
.mb:nth-last-child(-n+2) {
margin-bottom:0px;
}
}
//wider views
#media(min-width:993px) {
.mb:nth-last-child(-n+3) {
margin-bottom:0px;
}
}
EDIT: Updated your fiddled to show this in effect: https://jsfiddle.net/rhhyu6h2/8/
Again, only for this specific layout. For variable columns layouts, you have to solve in a wrapper or through JS.
EDIT2: from reading your other comments, you could use a wrapper adjustment class on selective rows: https://jsfiddle.net/rhhyu6h2/9/
This doesn't require any new HTML.
#Antonio, in order to remove the bottom-margin dynamically you gotta use jQuery/JavaScript. On appropriate event add the class which has margin-bottom:0px.
Example:
CSS Code:
.removeBottomPadding{
margin-bottom:0px !important;
}
JavaScript Code: [Ensure to add an id to the wrapper]
window.onload = function() {
document.getElementById('wrapper').className = 'removeBottomPadding';
};
OR
jQuery Code:
$(function() {
$('.wrapper').addClass('removeBottomPadding');
});
That's all.
Good luck & hope that helps.
I have HTML like this:
<div class="container-fluid">
<div class="row">
<div id="product-spotlight" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="product-spotlight-inner">
The CSS for product-spotlight-inner simply contains a background-image.
The problem is, bootstrap-3 puts padding of padding-left: 15px; padding-right: 15px on the col. So the background image does not extend to the end. I could put up with it but it looks bad on mobile.
I'm I doing it wrong? is this a known issue? something else?
EDIT: I am starting to think the container-fluid is adding the 15px (in addition)
EDIT2: I added a new id called product-spotlight and gave it 0 padding and that fixed it. Is that just a hack?
Try by doing margin:0 -15px:
.product-spotlight-inner{
background:url("http://www.ihdwallpapers.me/wp-content/uploads/2014/09/Paris-Eiffel-tower-hd-wallpapers.jpg") no-repeat center;
background-size:cover;
display:block;
margin:0 -15px;
padding:0 15px;
height:400px;
}
http://jsfiddle.net/2hcz2wrv/
For sure you can get negative margins to work, though you have to be careful to check for unwanted results at different viewports or layout suprises when you add extra elements to the div.
You could apply the background to the row instead .. nice and simple and no surprises.
http://jsfiddle.net/panchroma/rfrzvey1/
HTML
<div class="container-fluid">
<div class="row product-highlight">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="product-spotlight-inner">product highlight div</div>
</div>
</div>
</div>
CSS
.product-highlight{
background-color:pink;
}
I have 3 divs in a horizontal row in my footer. I'm using the bootstrap grid.
<div class="col-xs-6 col-sm-4 div1">
<div class="col-xs-6 col-sm-4 div2">
<div class="col-xs-6 col-sm-4 div3">
So that they appear in this sequence
+------+------+------+
| div1 | div2 | div3 |
+------+------+------+
When the browser width decreases to a certain width suppose 600px, I want the 3 divs to stack vertically in a single column in the following sequence.
+------+
| div1 |
+------+
| div3 |
+------+
| div2 |
+------+
How can I achieve that using CSS?
You can use push and pull method. Also remove the col-xs-6 class to achieve the single column layout on mobile views.
<div class="container">
<div class="col-sm-4">div1</div>
<div class="col-sm-4 col-sm-push-4">div3</div>
<div class="col-sm-4 col-sm-pull-4">div2</div>
</div>
The class col-xs- applies to screen widths <768px.
If the divs need to stack vertically for mobile views, change this class to 'col-xs-12'
This will make them take 100% width and align vertically one below the other.
you can change it using CSS like this.
say on full screen the css will be
.div1, .div2, .div3{
float: left;
width : 33%;
}
using css media query
#media (max-width: 600px) {
.div1, .div2, .div3{
width : 100%;
}
}
now at 600px width or less the divs will be width 100% and they will be shown vertically
in bootsrap you do not need anything, this option is included by default you just need to remove col-xs-6 class from divs
Is there a way in Bootstrap 3 to right align a div?
I am aware of the offsetting possibilitys but I want to align a formatted div to the right of its container while it should be centered in a fullwidth mobile view. The class 'pull-right' is not working anymore. Did they forgot to replace it or am I missing something obvious?
<div class="row">
<div class="container">
<div class="col-md-4">
left content
</div>
<div class="col-md-4 col-md-offset-4">
<!-- The next div has a background color and its own paddings and should be aligned right-->
<!-- It is now in the right column but aligned left in that column -->
<div class="yellow_background">right content</div>
</div>
</div>
</div>
Shure I know how to do this in CSS, but can it be done in pure bootstrap 3?
The class pull-right is still there in Bootstrap 3
See the 'helper classes' here
pull-right is defined by
.pull-right {
float: right !important;
}
without more info on styles and content, it's difficult to say.
It definitely pulls right in this JSBIN
when the page is wider than 990px - which is when the col-md styling kicks in,
Bootstrap 3 being mobile first and all.
Bootstrap 4
Note that for Bootstrap 4 .pull-right has been replaced with .float-right
https://www.geeksforgeeks.org/pull-left-and-pull-right-classes-in-bootstrap-4/#:~:text=pull%2Dright%20classes%20have%20been,based%20on%20the%20Bootstrap%20Grid.
Do you mean something like this:
HTML
<div class="row">
<div class="container">
<div class="col-md-4">
left content
</div>
<div class="col-md-4 col-md-offset-4">
<div class="yellow-background">
text
<div class="pull-right">right content</div>
</div>
</div>
</div>
</div>
CSS
.yellow-background {
background: blue;
}
.pull-right {
background: yellow;
}
A full example can be found on Codepen.
i think you try to align the content to the right within the div, the div with offset already push itself to the right, here some code and LIVE sample:
FYI: .pull-right only push the div to the right, but not the content inside the div.
HTML:
<div class="row">
<div class="container">
<div class="col-md-4 someclass">
left content
</div>
<div class="col-md-4 col-md-offset-4 someclass">
<div class="yellow_background totheright">right content</div>
</div>
</div>
</div>
CSS:
.someclass{ /*this class for testing purpose only*/
border:1px solid blue;
line-height:2em;
}
.totheright{ /*this will align the text to the right*/
text-align:right;
}
.yellow_background{
background-color:yellow;
}
Another modification:
...
<div class="yellow_background totheright">
<span>right content</span>
<br/>image also align-right<br/>
<img width="15%" src="https://www.google.com/images/srpr/logo11w.png"/>
</div>
...
hope it will clear your problem
Bootstrap 4+ has made changes to the utility classes for this. From the documentation:
Added .float-{sm,md,lg,xl}-{left,right,none} classes for responsive floats and removed .pull-left and .pull-right since they’re redundant to .float-left and .float-right.
So use the .float-right (or a size equivalent such as .float-lg-right) instead of .pull-right for your right alignment if you're using a newer Bootstrap version.
Add offset8 to your class, for example:
<div class="offset8">aligns to the right</div>
If I have a div layout like this:
<div id="stretchyheader"></div>
<div id="fixedwidthwide"><div>
<div id="fixednarrow></div>
<div id="footer"></div>
Which makes something like this:
-----------------------------------------------------
| stretchyheader |
-----------------------------------------------------
| | |
| | |
| fixedwidthwide | fixednarrow |
| | |
| | |
| | --------------
| |
| |
| | patterned
| | background
-----------------------
- footer -
How do I ensure that both columns are the same height as the deepest column? The column heights are flexible according to the amount of content and have a white background.
A very simple, common way to do this is using Faux Columns.
You would have a structure that looked something like this:
<div id="stretchyheader"></div>
<div id="container">
<div id="fixedwidthwide"></div>
<div id="fixednarrow></div>
</div>
<div id="footer"></div>
And you actually apply a background image to #container to add any background colors, borders, etc. to each of the 2 columns.
There are CSS techniques to do this without faking it, but they are much more complex:
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
http://matthewjamestaylor.com/blog/ultimate-2-column-right-menu-pixels.htm
http://www.socialgeek.be/blog/read/flexible-equal-height-columns
Adapted from here:
Create a container around the two fixed columns, and have css something like this:
#container {
float:left;
width:[sum of the two columns width];
}
#fixedwidthwide {
float:left;
width:[whatever];
}
#fixednarrow {
float:left;
width:[whatever];
}
Note that this is only necessary if the columns need to be of equal height for some reason. If not, you can just follow philfreo's suggestion and use faux columns.
There are a number of solutions for this problem, including OneTrueLayout Technique, Faux Columns Technique and CSS Tabular Display Technique.
The best solution for equally height-ed columns is the CSS Tabular Display Technique that means to use the display:table feature.
It works for Firefox 2+, Safari 3+, Opera 9+ and IE8.
The code for the CSS Tabular Display:
The HTML
<div id="container">
<div id="rowWraper" class="row">
<div id="col1" class="col">
Column 1<br />Lorem ipsum<br />ipsum lorem
</div>
<div id="col2" class="col">
Column 2<br />Eco cologna duo est!
</div>
<div id="col3" class="col">
Column 3
</div>
</div>
</div>
The CSS
<style>
#container{
display:table;
background-color:#CCC;
margin:0 auto;
}
.row{
display:table-row;
}
.col{
display: table-cell;
}
#col1{
background-color:#0CC;
width:200px;
}
#col2{
background-color:#9F9;
width:300px;
}
#col3{
background-color:#699;
width:200px;
}
</style>
Even if there is a problem with the auto-expanding of the width of the table-cell it can be resolved easy by inserting another div withing the table-cell and giving it a fixed width. Anyway, the over-expanding of the width happens in the case of using extremely long words (which I doubt anyone would use a, let's say, 600px long word) or some div's who's width is greater than the table-cell's width.
The Faux Column Technique could be a solution to this problem, but it has some drawbacks such as, you have to resize the background tiled image if you want to resize the columns and it is also not an elegant solution.
The OneTrueLayout Technique consists of creating a padding-bottom of an extreme big height and cut it out by bringing the real border position to the "normal logical position" by applying a negative margin-bottom of the same huge value and hiding the extent created by the padding with overflow:hidden applied to the content wraper. A simplified example would be:
The HTML file:
<html><head>
<style>
.wraper{
background-color:#CCC;
overflow:hidden;
}
.floatLeft{
float:left;
}
.block{
padding-bottom:30000px;
margin-bottom:-30000px;
width:100px;
background-color:#06F;
border:#000 1px solid;
}
</style>
</head>
<body>
<div class="wraper">
<div class="block floatLeft">first col</div>
<div class="block floatLeft">
Second col<br />Break Line
</div>
<div class="block floatLeft">Third col</div>
</div>
</body>
</html>
In my opinion the unimplemented 100% height within an automated height container is a major drawback and the W3C should consider revising this attribute.
Other resources: link1, link2, link3, link4, link5 (important)