* {
box-sizing: border-box;
}
Hasn't helped also
http://codepen.io/samducker/pen/YpQejY
Can't for the life of me find out why I have a tiny bit of white space on the right. Have tried removing stylesheets one by one and going through margin and padding and have still had no luck.
Please help me!
You have to add container-fluid class to the section with class="header". See the following piece of code:
<section class="header container-fluid">
<div class="row">
<div class="col-md-12"><img class="img-responsive center-block" src="http://thehedonistproject.com/launch/img/team.png" alt=""></div>
</div>
</section>
The problem is that bootstrap require that each element with class row has to be contained inside an element that have a container or container-fluid class to assign the right margins and paddings.
Or just get rid of the annoying margin on .row
.row {
margin:0 !important;
}
Related
I'm trying to set even left and right margins on a container using the Bootstrap spacing property mx-#, but this causes the container alignment to go crazy - see image attached. I want to apply margins to large, medium, and small breakpoints, but have the container stay centered. I've applied my own custom css of max-width to the container. Also, I already tried turning box-sizing: border-box on and off, but this didn't seem to help either. Any ideas how to fix this?
* {
box-sizing: border-box;
}
.container {
max-width: 960px;
}
<div class="container bg-white text-dark px-4 my-lg-5 my-md-4 my-3 mx-3">
<!--mx-lg-5 mx-md-3 mx-sm-0 // px-lg-4 px-md-3 px-sm-0 px-0-->
<div class='row'>
<div class='col-12'>
<h3>About me</h3>
<hr>
</div>
</div>
</div>
Try giving these css properties as well, width:100%. also could you paste the code, it will be helpful to debug
I'm new to CSS-frameworks.
Normally I start my markup within the body by adding a div with the class "wrap". The purpose of that, is to get the content horizontally centered. And for having a top-, bottom-margin.
Now with Foundation I would like to keep that approach. But I'm not sure where to put the "wrap"-div.
That's what I got currently:
.wrap {
margin: 10px auto;
}
<div class="wrap">
<div class="row">
<div class="small-12 columns">
<div class="callout">
<h1>Lorem Ipsum</h1>
</div>
</div>
</div>
</div>
Demo with Foundation added on CodePen: http://codepen.io/mizech/pen/LWBOvQ
I mean: It works but I'm not sure if I do it right.
Shall I keep it the way it is? Or should I put the "wrap"-div somewhere else?
Should I perhaps leave the "wrap"-div at all (when using Foundation) and doing something else instead?
You don't need a wrap div. Foundation has a maximum width set on the .row so anything inside it will conform to that grid. If you need you can add a class with vertical margins or padding to that row. If you need a full width row you just add the class .expanded to it.
This issue has been fixed thanks to Manoj Kumar
I can't for the life of me fix the root cause of whitespace on the right side of a site I'm currently building, causing the dreaded 'accidental horizontal scrollbar.' It's especially noticeable on mobile.
http://bradfordkolumbic.com/ma/v2/
I've tried every trick I can think of. Using overflow-x: hidden on the body somewhat fixes the issue but I'm not at all about band-aid fixes - I'm attempting to find the full solution.
You have two problems, each with your markup and style sheet.
First you need to remove this:
.info-box {
padding: 20px 0 40px;
}
The above code is overriding the default padding of the col-* classes which was by default added to compensate for the negative margins provided by row classes.
and then in the below code:
<div class="row">
<div class="col-lg-12 text-center">
<div class="row">
<div class="container-fluid text-center partners"></div>
</div>
</div>
You have wrapped a container-fluid element within a row element, while you need to do the reverse.
Bootstrap grid documentation
Rows must be placed within a .container (fixed-width) or
.container-fluid (full-width) for proper alignment and padding.
Output:
I have a Bootstrap 3 grid.
I need to add a header image that's 960 pixels wide.
However, if I add it to a row, the usual padding of 10px on a column "offsets" my image since it no longer "fits":
I know how to force this to work, but I was wondering if I am missing some modifier class in BS3 to make this work.
And, yes, I know I could use a css background-image but the client wants an image there.
Add a class to your CSS that removes the margin to make full-width image within the column and then add that class after the column.
.bosom-none {
margin-right: -15px; // Removes the right gap
margin-left: -15px; // Removes the left gap
}
<div class="container">
<div class="row">
<div class="colum-md-6 bosom-none">
<img src="your-image.jpg">
</div>
</div>
</div>
You probably have something else messing it up because as you can see, a container, row and then a img gives you no margins.
<div class="container" style="background:green">
<div class="row">
<img src="http://www.placehold.it/150x150">
</div>
</div>
http://jsfiddle.net/dBNwq/1
Here's the whole page
<!DOCTYPE html>
<html>
<head>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container" style="background:green;">
<div class="row">
<img src="http://www.placehold.it/960x150">
</div>
<div class="row" style="background:red;">
Some other content
</div>
</div>
</body>
</html>
This is a problem I've encountered many times with Bootstrap. You basically have three options:
If you're placing the image inside a column (e.g. .col-sm-12) which is inside a .row, you'll have to apply a negative margin to the image or a parent container equal to the column's padding: http://codepen.io/anon/pen/xEGkaQ
You could also instead make the image (or a wrapping div) a direct child of the .row but Bootstrap discouraged use to do this.
You can move the image outside the .col/.row all together, give it it's own .container and rid of that container's padding: http://codepen.io/anon/pen/WGvAap.
I usually go for option #1.
Please note that this does not answer your question. It meant to write this for future reference for other people encountering the same problem and do not know how to force this to work.
The actual answer to your question: no, Bootstrap does not offer such a modifier class.
Simply replace div class="container" with div class="container-fluid"
and that's it !
You can also create a class that will cover the container it is in...
.heroLg {
size:cover;
-webkit-size: cover;
-moz-size: cover;
-o-size: cover;
}
Then add the class to your image.
put the image into a span12
<div class="row">
<div class="span12">
<img src="image.jpg" />
</div>
</div>
I am creating my first site using bootstrap, and as its a joomla site its version 2.3
I am having some problems getting going
here is the code so far:
<body>
<div class="container">
<div class="row logobar">
<div class="span12">
<div class="logoholder">
<img src="templates/<?php echo $this->template ?>/images/open-plan-design-logo.jpg" alt="Open Plan Design Logo " />
</div>
</div>
<!-- row --></div>....
and the css
body {
background:#231f21;
background-color:#DCDBDB;
color:#fff;
}
.container {
background-color:yellow;
}
.logoholder{
width:499px;
margin:0 auto;
}
.logobar {
margin-bottom:20px;
background-color:green;
}
At reduced screen widths everything looks fine - the image is centered, and reduces in size
However, at full width the image is not exactly centered, and there is an odd bit of green (from .logobar) sticking out at the left. If I take out the .row then the green disappears but of course nothing is resonsive
I guess I am doing something wrong...
you can see what I mean here www.opd.ee-web.co.uk
You need to change your row to row-fluid which will remove this negative margin.
<div class="row-fluid logobar">
Documentation [1].
More info [1].
The elements with .row have a negative margin applied to ensure and contained .span elements are correctly aligned.
You can remove this negative margin with some custom css, but that is likely to cause more problems.
The ideal solution is to simple move the logobar to the span level.
<div class="span12 logobar">
Add following code in your custom css file
body .row{
margin-left:0 !important;
}