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
Related
I want to create a call-to-action box with centered content
The box is contains two rows
the first row has the title and the second a variable amount of images, with a maximum of 12 (if greater than, then it will be three or more rows).
The text get perfectly centered using .text-center.
However i cannot create a div with the width of the content.
What i have now:
<div class="container">
<div class="row">
<div class="col-md-12" style=" padding: 10px 0 0;">
<div class="row text-center">
<div class="col-md-12 animated fadeInLeft">
<span class="color-green">Title</span>
</div>
</div>
<div class="row text-center">
<div class="col-md-9 center-block">
<!-- Content / Images-->
</div>
</div>
</div>
</div>
</div>
I tried multiple setups but the center-block doesn't seem to place the col-md-9 in the middle. (even though it does apply margin: 0 auto;)
What can i do to create equal width images in the center of their container, with variable amount. I'm using Unify Template which is based on Twitter Bootstrap 3
Since text-center affects on inline-level elements(children) only, you need to make them inline. It's clear. So all you need is to make <div class="col-md-9 center-block"> inline. Do it:
.center-block {
display: inline-block;
float: none;
}
If you want to push not more than 12 images in one line without javascript, I think there's the only way:
.center-block img {
width: 8.2%;
}
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 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 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
I have this html code that uses bootstrap:
<div class="row">
<div class="col-sm-12 col-xs-6"><h1>DIV1</h1></div>
<div class="col-xs-12"><h1>DIV2</h1></div>
<div class="col-sm-12 col-xs-6"><h1>DIV3</h1></div>
<div>
It is working fine for all devices except xs. On extra small devices I want DIV1 and DIV3 on same row (on first row).
I want to maintain the layout as it is for all other devices.
You may have to add additional styling to achieve this as the divs will generally follow after each other. You could set positioning to absolute and with additional bottom margins for the other two place the middle one below.
I managed it via css and bootstrap classes:
<div class="row">
<div class="col-sm-12 col-xs-6"><h1>DIV1</h1></div>
<div class="col-xs-12"><h1>DIV2</h1></div>
<div class="col-sm-12 col-sm-offset-0 col-xs-6 col-xs-offset-6" id="div3"><h1>DIV3</h1></div>
</div>
And the css for third div:
#media (max-width: 767px) {
#div3{
position:absolute;
top:0px;
}
}