Please note I have inherited an project and MUST use Bootstrap 2.
I have the following code that displays the site logo in the top-left of the page, for some reason this image is being "pushed" to the right due to the gutter when using the grid system - how do I remove this gap for this single row?
<div class="row">
<div class="span12">
<img src="/img/logo.png">
</div>
</div><!-- end row -->
Any advice would be appreciated and please note this is using Bootstrap 2 rather than the newer improved Bootstrap 3.
Add a new class, and set to margin 0
.nogutter {
margin: 0px !important;
}
<div class="row nogutter">
<div class="span12">
<img src="/img/logo.png">
</div>
</div>
<!-- end row -->
Related
I am currently using bootstrap 4. In my code, gap between two item (.items) is 30px due to bootstrap two columns padding. But container has padding 15px. I think if gap between two items is 15px which is equal to container padding would be better looking. How can I do that?
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel = 'stylesheet' href = 'https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css'/>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class = 'col-sm'>
<div class = 'bg-primary items'>A</div>
</div>
<div class = 'col-sm'>
<div class = 'bg-success items'>B</div>
</div>
<div class = 'col-sm'>
<div class = 'bg-info items'>C</div>
</div>
</div>
</div>
</body>
30px padding means it will be divided as 15px left and 15px right padding for div. So what is happening is, it is adding 15px padding from first(right side padding) and second div(left side padding) at center. So here is the solution:
div class="container-fluid">
<div class="row">
<div class = 'col-sm'>
<div class = 'bg-primary items'>A</div>
</div>
<div class = 'pl-0 col-sm'>
<div class = ' bg-success items'>B</div>
</div>
<div class = ' pl-0 col-sm'>
<div class = ' bg-info items'>C</div>
</div>
</div>
</div>
This is what I changed:
Added "pl-0" bootstrap class to second and third div. Hope it works!
You could simply remove padding from the middle column using px-0...
<div class="container-fluid border">
<div class="row">
<div class="col-sm">
<div class="bg-primary items">A</div>
</div>
<div class="col-sm px-0">
<div class="bg-success items">B</div>
</div>
<div class="col-sm">
<div class="bg-info items">C</div>
</div>
</div>
</div>
Or, use a special CSS class to override Bootstrap's gutter (=7.5px) ...
.p-row-sm {
margin-left: -7.5px;
margin-right: -7.5px;
}
.p-row-sm > div[class^="col"] {
padding-left: 7.5px;
padding-right: 7.5px;
}
Demo: https://www.codeply.com/go/SZcY3X4hTY
You can use Bootstrap utility classes to tackle this. Here's an example from my project:
<div class="row">
<div class="col-lg-6 pr-lg-2">...</div>
<div class="col-lg-6 pl-lg-2">...</div>
</div>
The idea is very simple: I apply half-gutters when my screen is big enough to show both columns.
Please note that I use 1rem gutters and pr-lg-2/pl-lg-2 gives me .5rem padding. You might want to use different values according to your Bootstrap config e.g. pr-lg-1 or pr-lg-3.
There are several issues at play with the issue described above. When viewing a BS grid layout on mobile (col or xs) the container padding is removed. As a result, the combined left and right inner padding of a two-column layout make it look out of balance (too much padding between columns).
The solution, in theory, is straight forward. remove the left or right padding globally. However, this will result in other imbalances, and if you are working and a layout that has a variable number of items difficult to predict. The solution is to remove half of the right padding on the odd column elements and half the left padding on the even column elements using the :nth-child(even/odd) selector. see the solution here BS4 Reduce Padding Between 2-Up Grid Cards on Mobile
I am working on a mini project to recreate a website using bootstrap 4. I am on a part where I need to have three images in a grid format two on the top and one on the bottom. The top two should be even by height (not width the image on the right is larger) like the image below:
Notice how on the bottom (they are even at the top) they are perfectly even.
Now here is how mine looks:
See how the image on the left looks it is slightly higher then the one on the right.
Here is my code for that portion:
<div class="row justify-content-center">
<div class="col-md-4">
<img src="assets/home_seasonal_1.jpg" class="img-fluid" alt="Responsive image" >
</div>
<div class="col-md-6">
<img src="assets/home_seasonal_2.jpg" class="img-fluid" alt="Responsive image">
</div>
</div>
<br>
<div class="row justify-content-center">
<div class="col-md-10">
<img src="assets/home_seasonal_3.jpg" class="img-fluid" alt="Responsive image">
</div>
</div>
I have tried different variations of the columns and nothing has worked so far. The goal is to do this without modifying the css and only using bootstrap.
Here is the bootstrap version I am using:
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css
I just need some guidance on how I can make this happen.
Here are the images:
If you look at .img-fluid, it sets the max width to 100% and the height auto. That means, if the box that contains the image is narrow, the image might be scaled down and so is the height.
Also I realize, from your expected image, the top 2 pictures are shown from the bottom up while the last 1 is shown from top down.
Those points make me want to use those images as the background of those columns instead.
Structure
<div class="container">
<div class="row justify-content-center">
<!-- assets/home_seasonal_1.jpg -->
<div class="col-md-4" style="background: url('https://i.stack.imgur.com/A5PIq.jpg') center bottom /cover no-repeat"></div>
<!-- assets/home_seasonal_2.jpg -->
<div class="col-md-6" style="background: url('https://i.stack.imgur.com/zVUvf.jpg') center bottom/cover no-repeat"></div>
</div>
<div class="row justify-content-center">
<!-- assets/home_seasonal_3.jpg -->
<div class="col-md-10" style="background: url('https://i.stack.imgur.com/xhMX6.jpg') center top/cover no-repeat"></div>
</div>
</div>
Style
I am being lazy here to style them this way, but you can do inline css to set different styles for those columns. And I used white borders here to do the trick.
.row {
height: 12rem;
}
[class*="col-md"] {
border: 2px solid #fff;
}
Result
LOL it almost looks the same as your expected outcome!
fiddle: http://jsfiddle.net/aq9Laaew/144953/
I'm trying to set some divs to width: 100% on Twitter Bootstrap 3 (including no paddings or margins).
JSfiddle: http://jsfiddle.net/rq9ycjcx/
HTML:
<div class="container">
<header>
<div class="row">
<div class="col-md-2">
<img src="http://placehold.it/150x50">
</div>
<div class="col-md-10">Menu</div>
</div>
<div class="row gray">
<div class="col-md-6">
<h1>Page Title</h1>
</div>
<div class="col-md-6">
<div class="breadcrumbs">Main page > page </div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<img src="http://placehold.it/350x150" />
</div>
</div>
</header>
<footer>
<div class="row">
<div class="col-md-12">Content</div>
</div>
<div class="row dark">
<div class="col-md-3">Footer 1</div>
<div class="col-md-3">Footer 2</div>
<div class="col-md-3">Footer 3</div>
<div class="col-md-3">Footer 4</div>
</div>
</footer>
</div>
What is the right way to get image http://placehold.it/350x150 width: 100%, including no paddings or margins?
Page title and breadcrumbs height is 80px.
If I resize window to smaller screen (e.g. mobile), text Main page > page disappears (it's somewhere but not on own row).
How to fix it?
Use <div class="container-fluid">. As per Bootstrap Docs: Use .container-fluid for a full width container, spanning the entire width of your viewport.
There is 0 padding on container-fluid.
In your code you have what appears to be body content in your header and you also have a div class="container" outside of your header and footer. This is not correct, you should have your container/container-fluid inside of your body. Also for your header you should use <nav="nav navbar-nav">.
Updated Fiddle
As suggested above, you can create a helper class
.padding-0 {
padding: 0;
}
and apply it to any HTML elements for which you need a padding reset. So in your case, it would look like this:
<div class="row">
<div class="col-md-12 padding-0">
<img src="http://placehold.it/350x150" />
</div>
</div>
For the second problem, set height of .gray class to auto :
#media () {
.gray {
height: auto;
}
}
Note: You could also remove line-height: 80px, it's optional :)
http://jsfiddle.net/rq9ycjcx/8/
There is no "right" way to do that in Bootstrap 3. It means you have to reset padding for the exact column.
You can create a class such as this one:
.col-md-12.resetPadding { padding:0px }
About Main page > page disappearing, I don't see this problem on my browsers (tested on Chrome and FF), but you have line-height: 80px there and as you said your breadcrumbs div has height: 80px;, so try to reduce line-height property and see how it works.
A simple way would be to remove the <div class="col-md-12">...</div> and add your content directly inside the row tag. The row tag removes the left & right gutters, whereas the cold-md-12 essentially adds the gutters back in.
The Bootstrap 3 documentation says that for single full width items you don't need any markup, eg just wrap it in <p> tags. However this will show the 15px gutters due to the page markup. So by simply adding in the row tag and placing your content directly inside this you will get 100% width content and be compliant with the BS3 documentation.
Done this a whole bunch of times, but now it's acting out for some reason. Though I'll probably feel very dumb, after somebody points out the mistake.
Live link:
http://soloveich.com/project6
I'm trying to build a header, but getting quite a few problems at the same time
1) Background images for class header and #soc don't show
2) that image with large text does not align to center
3) I get the post on the right side of the header, while it has to be under it.
css is properly connected (tried changing body background color)
header code
<div class="header">
<header>
<div class="row-fluid">
<div class="col-lg-3"><div class="pull-right"><img src="wp-content/themes/greendream/images/logo.png"> </div></div>
<div class="col-lg-6"><div id="text"><img src="wp-content/themes/greendream/images/text.png"></div></div>
<div class="col-lg-3"><div id="soc"></div></div>
</div>
</header>
</div>
css
.header {
background-image: url(images/hdbg.jpg);
}
#text {
width: 578px;
margin:o auto;
}
#soc {
background-image: url(images/soc.png);
}
You need to start by studying how the grid system in Bootstrap 3 works.
Basically, if you want your content centered, you need to place it in a container. Then you set up your rows and columns.
Something like this:
<body>
<div class="container">
<div class="row">
<div class="col-md-3">
<img src="wp-content/themes/greendream/images/logo.png">
</div>
<div class="col-md-6">
<img src="wp-content/themes/greendream/images/text.png">
</div>
</div>
</div>
</body>
Note: There is no row-fluid in Bootstrap 3. A lot of what you're trying to do will only work in Bootstrap 2.
I'm new to Bootstrap and loving it so far but have a couple of simple questions to do with the grid - can't seem to find the answers anywhere...
<div class="container">
<div class="row" style="background-color: #ccc;"> <!-- 1. How do I get this background colour to exclude the left 20px gutter? -->
<div class="span5">
Left Col
<div class="row">
<div class="span5">
<input class="span5" type="text"/> <!-- 2. How do I stop this input from shifting right 20px in IE7? -->
</div>
</div>
</div>
<div class="span7">
Right Col
<div class="input-prepend">
<!-- This lines up correctly, even in IE7 - my star hack will break this -->
<span class="add-on">+</span><input type="text" placeholder="Add..." class="span6">
</div>
</div>
</div>
</div>
Having inspected the bootstrap css I can see that .row starts by pulling back the margin-left by 20px, so that each time a .spanX is created, it has a 20px gutter to the left. This makes sense, but how can I apply style to the whole row (e.g. a background colour) and have this apply to all columns within that row (the span5 and span7 in my example) but without including the left hand 20px gutter?
Secondly, what is the best way to set the widths of elements within a column? In my example I have tried to size a textbox to fill the width of the left hand column by placing it in a nested row with span5. This doesn't work in IE7 - instead it moves to the right by 20px and I lose the right hand gutter.
To see this, check out http://jsfiddle.net/jRcJG/ in IE7 vs good browsers.
The closest I've got is to put together an IE hack to shift the inputs back again, but this causes other problems such as squashing up the input-prepend in the right column:
http://jsfiddle.net/JsBpV/
Unfortunately the project I'm working on must support IE7 so I don't have the luxury of ignoring these users.
Thanks for any help!
A simple but not necessarily elegant solution for #2 is to add an IE star hack inside a class:
input.ie-fix-left, textarea.ie-fix-left {
*margin-left: -20px;
}
which requires you to put a class on each input element that is affected by this problem:
<div class="row">
<div class="span6">
<input type="text" class="span6 ie-fix-left"/>
</div>
</div>
Create a div with .span12 and include another level of row/span with your .span5 and span7
jQuery