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;
}
Related
I want to center vertically the divs inside the container but the columns take the height of the document and not of main (whom height equals the one of its content) Hereby my code:
<main class="col-lg-12">
<div class="col-lg-1 col-md-0"></div>
<div class="col-lg-4 col-md-6 col-xs-12">
<img src={{image}}>
</div>
<div class="col-lg-1 col-md-0" ></div>
<div class="col-lg-4 col-md-6 col-xs-12">
<div class="title">{{title}}</div>
<div class="text">{{text1}}</div>
</div>
<div class="col-lg-1 col-md-0"></div>
</main>
main div{
height: 100%;
}
I can see in Developer Tools that the div takes 100% of the doc not of main... How could I fix this in order to vertically align the image?
Thank you!
first bootstrap .col should be in .row container
you might need one in your main col to nest columns inside
then, don’t write css to set height:100% on columns, you dont need that.
If I’m right .col have display: flex, so you can use align-items-stretch class to make you column taking the height of their wrapper, being the missing .row
I suppose you will need a height:100% on the row. to do that add it a class h-100
I was looking to make a striped business theme, similar to the one created by W3Schools. The theme can be found here. It is characterized by horizontal sections, separated by different background colors.
The one issue I had with it was that the columns in Services, Portfolio and Pricing, spanned pretty much the full width of the page, which I did not think looked great, particularly for the three pricing boxes, which i feel should be much narrower and still centered. Let's take those pricing boxes as the example for the purpose of the questions.
So, I embarked upon the task of squeezing these three pricing boxes into a narrower shape, centered on the page, while still maintaining the full-width alternating background color. I came up with three ways to do it:
1) Place a Container inside a Container-Fluid:
<div id="pricing" class="container-fluid">
<div class="container">
<div class="row">
<div class="col-sm-4 col-xs-12">
BlaBlaBla
</div>
...
</div>
</div>
</div>
2) Make the following additions/changes to the css and html:
.fixed-width {
display: inline-block;
float: none;
width: 300px;
}
.row-centered {
text-align: center;
}
-
<div id="pricing" class="container-fluid">
<div class="row row-centered">
<div class="col-sm-4 col-xs-12 fixed-width">
BlaBlaBla
</div>
...
</div>
</div>
3) 3x col-sm-2, with empty columns on each side
Keep the container-fluid layout, but instead of having three col-sm-4, I have an empty col-sm-3, three col-sm-2, and finally an empty col-sm-3 (for a total of 12 columns).
4) 3x col-sm-2, with offset-3 to center
Instead of having three col-sm-4, I have one col-sm-2 col-sm-offset-3, then two col-sm-2 (this does not add to 12, but i center with offset).**
The problem with both (3) and (4) is that once i shrink the browser window, the boxes become too small before they wrap to the next line (i.e. the text flows out of the box). In (4) it seems if i use container (as opposed to container-fluid), the boxes become too narrow in full-screen even.
What is the correct way of doing this? I assume this is an issue almost everyone making business websites stumbles across, yet I was not able to find the answer online having worked on it for hours.
Thanks in advance,
Magnus
Below follows what I think is the best way to solve this. I will divide it up in whether or not it is a background image or color we are looking to apply accross the full width.
CSS (formatting for illustration purposes and fixed width)
.content{
padding:20px;
border: 1px solid #269abc;
background:#d6ec94;
}
[class*="col-"] {
padding-top:10px; /* 15px side paddings automatically applied */
padding-bottom:10px;
border: 1px solid grey;
background: transparent;
}
.fixed-width {
display:inline-block;
float:none;
width: 300px;
}
The key here is the fixed-width class, and follows your approach (2). The other styles are just so you can try it and easily see how it works.
CSS (background image)
#one {
background-image: url([insert-url]);
background-repeat: no-repeat;
background-size: contain;
height:500px;
}
The key here is the background-size: contain element. As long as the width/height ratio of your background image is larger than the section's ratio, the image will fill the full background.
CSS (background color)
#two {
background-color: grey;
height:500px;
}
background-color works without any tweaks.
HTML
<section id="one">
<div class="container">
<div class="row text-center">
<div class="col-sm-4 fixed-width">
<div class="content">HERE</div>
</div>
<div class="col-sm-4 fixed-width">
<div class="content">HERE</div>
</div>
<div class="col-sm-4 fixed-width">
<div class="content">HER</div>
</div>
</div>
</div>
</section>
As seen, by adding a <section> around the container, you can apply the background image or color to the full width of the page.
IN Bootstrap,
Col-lg is large screen,
Col-sm is small screen,
Col-md is medium devices,
Col-xs is Small screen.
According to the browser ,we can use the all classes.In my experience we can use the col-lg-offset-3 for large screen,Remaining screen we should use without offset,like us,
UL list format:
<style>
ul{
margin:0;padding:0;
text-align:center;
}
ul li
{
display:inline-block;
text-align:center;
width:300px;
}
</style>
<ul>
<li>box1</li>
<li>box2</li>
<li>box3</li>
</ul>
whatever screen all list will come in center position of screen.
other format:
<div class="container">
<div class="row text-center">
<div class="col-lg-offset-3 col-lg-2 col-sm-4 col-md-4 col-xs-12">contenbox..</div>
<div class="col-lg-2 col-sm-4 col-md-4 col-xs-12">contenbox..</div>
<div class="col-lg-2 col-sm-4 col-md-4 col-xs-12">contenbox..</div>
</div>
</div>
we should use all classes to our business requirement.if we can alter-ate the various offset class for col-sm-offset-,col-md-offset.,
<div class="col-sm-4 col-xs-12">
Is the important line. The col-sm-4 is saying on small screens and above, take up 4 of 12 bootstrap columns. So, try decreasing this to 3 of 12 bootstrap columns, i.e. col-sm-3. Here it is within the example source code:
<div class="col-sm-3 col-xs-12">
<div class="panel panel-default text-center">
<div class="panel-heading">
<h1>Basic</h1>
</div>
<div class="panel-body">
<p><strong>20</strong> Lorem</p>
<p><strong>15</strong> Ipsum</p>
<p><strong>5</strong> Dolor</p>
<p><strong>2</strong> Sit</p>
<p><strong>Endless</strong> Amet</p>
</div>
<div class="panel-footer plan">
<h3>$19</h3>
<h4>per month</h4>
<button class="btn btn-lg">Sign Up</button>
</div>
</div>
I have the following structure:
<div class="footer col-md-12">
<div class="social col-md-3 col-sm-4 col-sm-offset-0 col-xs-8 col-xs-offset-4">
<div id="fb"></div>
<div id="linkedin"></div>
<div id="gplus"></div>
</div>
</div>
There is also a div with copyright text, that I can't post. it is before the "social" div. On mobile devices, I am removing the copyright text(via display: none;), and I want to center the social icons, but I am unable to do so. I manage to do it, with margins and percentages, but on a specific resolution only, all other mobile resolutions are broken. Can someone assist me?
Note: I tried changing the xs column width and offset, but no combination managed to center the icons. I am posting the one, that was closest, that I centered with adding some margins.
i think that you just need to use class names in html and css as below
HTML
<div class="footer col-md-12">
<div class="copyright col-md-9 col-sm-8">
copyright information
</div>
<div class="social col-md-3 col-sm-4 col-xs-12">
Facebook -
Twitter -
Linkedin
</div>
</div>
CSS
.social{
background:aqua;
text-align: center;
}
.copyright{
background:silver;
}
#media screen and (max-width: 767px) {
.copyright {
display: none !important;
}
}
and this is the sample : https://jsfiddle.net/Tanbi/asohog47/1/
PS: For understanding clearly i used css background colors.
Have you tried:
.social {
display: block;
margin: 0 auto;
}
I find this works for me in most responsive centering dilemmas (with bootstrap in past times too I believe).
Let us know if this helps?
I have a LOOP that places div's that contain images.
The idea is to place in each row 3 images,
I don't know how many images the user will insert.
but i do know that a the images/div's needs to be centered(!) inside the bootstrap grid.
like that:
_ _
I tried using list but with no success.
Thanks...
you can play with "col-md-X" and "col-md-offset", the first one tell you the div's space and the second one the space in the left.
As far as I know this can't be done using default Bootstrap but no worries, you just need to add this:
<div class="container">
<div class="row row-centered">
<div class="col-xs-6 col-centered"></div>
<div class="col-xs-6 col-centered"></div>
<div class="col-xs-3 col-centered"></div>
<div class="col-xs-3 col-centered"></div>
<div class="col-xs-3 col-centered"></div>
</div>
</div>
/* centered columns styles */
.row-centered {
text-align:center;
}
.col-centered {
display:inline-block;
float:none;
/* reset the text-align */
text-align:left;
/* inline-block space fix */
margin-right:-4px;
}
See more here
I have a layout with a left and right column within a row. After researching, I was able to make the image responsive and the right column is indeed on top, however in the full screen view the left column wants to remain under the right.
Here is the code and css
<div class="row">
<div class="col-lg-8 col-md-8 col-sm-12 col-xs-12 main pull-right rightslide">
<img src="images/slideright.jpg"
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 pull-left leftslide">
<div class="lefttext">
Full Service Marketing and Advertising Solutions with <strong>Guaranteed Results</strong>
</div>
</div>
</div>
and the css for the right and left slide
.rightslide {
display:block;
max-width:100%;
float:right;
}
.rightslide img {
width:100%;
}
.leftslide {
display:block;
float:left;
}
.lefttext {
font-size:52px;
}
.The url
It is because one element is inside to another
use inspect element and also you forgot close image tag
Just close the image tag and it will work
<img src="images/slideright.jpg" />
it makes the bug and write one element inside another