In the following code: I want to add columns dynamically. And thus the row can have none, single or at max four col-sm-3 columns in the row. No matter how many columns are there, the content should always appear in the middle.
<div class="row">
<div class="col col-sm-3 col-xs-6">
<div class="servicesContent">
<img src="a.jpg" class="img-responsive" />
<p class="servicesContentTitle">lorem ipsum</p>
</div>
</div>
</div>
To achieve it, I have used the code below:
.row{
text-align:center;
}
.col{
float:none;
display:inline-block;
}
This does the job for three columns but when I have four col-sm-3 then it breaks down as you can see below:
What will be the correct css to align it perfectly at the center for any possible number of columns in the row.
You will have to set max-width for the columns. See below for an example
#media(min-width: 992px){
.col{
float:none;
display:inline-block;
max-width: 250px;
}
}
#media(min-width: 320px) and (max-width: 992px){
.col{
float:none;
display:inline-block;
max-width: 100%;
}
}
This could be because the four objects are filling up the entire row (when the margins and padding is added). If you change the padding and/or margins of the columns you 'should' be able to remedy this issue.
Related
I'm a backend guy and trying to figure out a few details for a project we have that's using Bootstrap 4.
Simply put, we want to create the layout that's executed here:
https://codepen.io/mediumandmessage/pen/xVeXop
(this example and the code below is from the original Bootstrap 3 example I found, not Bootstrap 4)
HTML:
.somesection {margin-top:50px!important;}
body {
font-size:17px;
font-family:Helvetica Neue;
}
img {max-width:100%;}
.overlay-text {
font-size:3.5vw;
float:right;
width:65%; /*important*/
bottom:21vw; /*important*/
padding: 25px;
background:#f7f7f7;
}
<div class="container somesection">
<div class="row col-xs-6">
<img src="https://images.unsplash.com/photo-1459664018906-085c36f472af?format=auto&auto=compress&dpr=1&crop=entropy&fit=crop&w=1087&h=725&q=80">
</div>
<div class="col-xs-3 col-sm-offset-4 overlay-text">
This is some text that should partially overlay.
</div>
</div>
However, that example uses Bootstrap 3 and breaks in Bootstrap 4 (the text displays horizontally below the image) and also does not stack the divs responsively.
I've tried screwing around with absolute and relative positioning, etc. it became a lot of code to execute cleanly and make responsive and I was hoping someone out there may have some insight into implementing in pure Bootstrap4...
If anyone out there can share any expertise here, I'd greatly appreciate it!
You could add a transform to your overlay column (you may need to cancel this with a media query for your smaller screens).
Please note in the html below, I have fixed your code to work with boostrap 4 - columns have to be inside a row (they cannot be on a row) and I don't think there is a -xs class any more
.overlay-text {
/* these two are needed - the align self makes the column not stretch the whole height of the image column and the translate moves the column over the image */
align-self: flex-start;
transform: translateX(-20%);
/* the following are for example only */
background-color: #ffffff;
padding:20px;
}
<div class="container somesection">
<div class="row">
<div class="col col-sm-6">
<img src="https://images.unsplash.com/photo-1459664018906-085c36f472af?format=auto&auto=compress&dpr=1&crop=entropy&fit=crop&w=1087&h=725&q=80" class="w-100">
</div>
<div class="col col-sm-3 col-sm-offset-4 overlay-text">
This is some text that should partially overlay.
</div>
</div>
</div>
Example bootply
Just add position:relative; to the .overlay-text
You can also adjust the value of bottom
.somesection {margin-top:50px!important;}
body {
font-size:17px;
font-family:Helvetica Neue;
}
img {max-width:100%;}
.overlay-text {
font-size:3.5vw;
float:right;
width:65%; /*important*/
bottom:21vw; /*important*/
padding: 25px;
background:#f7f7f7;
position:relative;
}
<div class="container somesection">
<div class="row col-xs-6">
<img src="https://images.unsplash.com/photo-1459664018906-085c36f472af?format=auto&auto=compress&dpr=1&crop=entropy&fit=crop&w=1087&h=725&q=80">
</div>
<div class="col-xs-3 col-sm-offset-4 overlay-text">
This is some text that should partially overlay.
</div>
</div>
Though this question has been asked a lot before, all answers suggestion that to span a column, place the other columns into an inner row, like so:
<div class="row">
<div class="col-12 col-md-4">logo</div>
<div class="col-12 col-md-8">
<div class="row">
<div class="col-12">top nav</div>
<div class="col-12">bottom nav</div>
</div>
</div>
</div>
The result would look like so on a desktop:
And, on mobile it would look like this:
However, the required result would be to place the logo between the two navigation, like below:
My best bet so far, is two place two logos, then hide and show them at different viewport sizes. Which works, but isn't really a neat solution.
Using custom grid layout is my first suggestion. (Or maybe bootstrap has some shortcuts to that, but I don't know of them) You can play with order-X classes of bootstrap. But that will not help you to get logo div, in between nav divs in different wrapper
.special {
display: grid;
}
div {border: 1px solid grey;}
/* for tablets and desktops*/
#media screen and (min-width: 600px) {
.special {
grid-template-columns: 1fr 2fr;
grid-template-rows: 50px 50px;
}
.logo {grid-area: 1/1/3/2;}
}
<div class="special">
<div class="topNav">top nav</div>
<div class="logo">logo</div>
<div class="bottomNav">bottom nav</div>
</div>
Using this markup...
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div style="background-color:gray">1</div>
</div>
<div class="col-md-6">
<div style="background-color:gray">2</div>
</div>
<div class="col-md-3">
<div style="background-color:gray">3</div>
</div>
</div>
</div>
Here's a jsfiddle (run it in full screen):
http://jsfiddle.net/MojoDK/swKyX/
Here's a screenshot:
The spacing between the divs at the red arrows are double of the space of the divs at the orange arrows.
How can I make the div space at the red arrow the same space (10px) as at the orange arrows and still maintain aligned divs/blocks when the three divs wraps as the browser window becomes smaller?
.row > div:not(:first-child):not(:last-child) {
padding: 0;
}
#media screen and (max-width: 768px) {
.row > div:not(:first-child):not(:last-child) {
padding: 0 15px;
}
}
This will work fine in a three columned layout.
A few ways to do this, but here's one:
#media (min-width: 992px){
.container-fluid{
margin-left:15px;
margin-right:15px;
}
}
Here is a fiddle (note you can import the bootstrap CSS for future reference):
http://jsfiddle.net/swKyX/5/
I am having lots of problems on positioning three column inside a .row using .span Can you please take a look at THIS LINK and let me know what I am doing wrong! on here?
if you check the page in iPhone 5 landscape orientation you will see that all there spans will line up under each other but I would like to keep two first at the first line. Here is what happening:
and this is what I would like to have:
also in big screens the third span is not fitting at the right end part:
or in iPhone 5 portrait view I woud like to center the image but it looks like:
Thanks for your time
Bootstrap makes all spanX elements display as block in small screens, so you can try adding a new class to make your spans float on small screens too, also I suggest you use the .row-fluid class and float your .social-wrap to make it align to the right
HTML
<div class="row-fluid">
<div class="span2 floatSmall">
<img />
</div>
<div class="span4 floatSmall">
<!--YOUR .span4 CONTENT-->
</div>
<div class="span6">
<div class="footer-body">
<div class="social-wrap">
<ul id="social-networking">
<!--YOUR SOCIAL LINKS-->
</ul>
</div>
</div>
</div>
</div>
CSS
.social-wrap {
float: right;
/*remove the width you have set*/
}
#media (max-width: 767px){
.floatSmall {
width: auto!important;
float: left!important;
}
}
I'm using a fluid Twitter Bootstrap layout for my design and am about to make it responsive. Consider a grid such as this:
<div class="row-fluid">
<div class="span4"></div>
<div class="span8"></div>
</div>
What is the best way to hide span4 and let span8 take up the entire width, to be used when the screen gets smaller?
With bootstrap 2.0.2 and up you can:
Change the html to:
<div class="row-fluid">
<div class="span4 hidden-phone hidden-tablet"></div>
<div class="span8 span12-tablet"></div>
</div>
(I interpreted 'smaller' with tablet and phone sizes, use your own definitions for other sizes)
.hidden-phone and .hidden-tablet hide the span4 for smaller screens.
To reclaim that space and re-span the span8, add this to your css:
#media (max-width: 979px) {
.span12-tablet {
width: 91.48936170212765% !important;
*width: 91.43617021276594% !important;
}
}
If you happen to be using less you can use bootstrap's grid mixins:
.span12-tablet {
#media (max-width: 979px) {
#grid > .fluid > .span(12) !important;
}
}
Using a media query with whatever min/max width set .span4 to display: none;
Then, add .span8 to the rule for .span12 for everything below whatever width you hide .span4 as all that work is already done for you by bootstrap, so no need to duplicate. It will look something like this:
#media (min-width: 320px){
.span12,
.span8 {
width: 300px;
}
}
(That last bit of code is just an example, but there will be something like it in bootstraps scaffolding.)
Hope that helps :)
EDIT:
This could work, I tested it using dev tools on the bootstrap site and it seemed to work. Again, in a media query:
#media (min-width: 320px){
#special .span4 {
display: none;
}
#special .span8 {
float: none;
width: auto;
}
}
If using bootstrap 2.2.1 you can:
Change the html to:
<div class="row-fluid">
<div class="span4 hidden-phone hidden-tablet"></div>
<div class="span8"></div>
</div>
Now add this to your css overrides:
#media (min-width: 768px) and (max-width: 979px)
{
[class*="span"],
.row-fluid [class*="span"] {
display: block;
float: none;
width: 100%;
margin-left: 0;
}
}
This will also work for any other span widths you have specified in your html.
the effect of these changes makes all span widths 100% causing the iPad to always use 1 column fluid mode in portrait mode.
This would be the best option to keep it dynamic. In my example I have width set to 6 columns next to fluidGridColumnWidth
[class*="span"] {
width: 100%;
.row-fluid {
[class*="span"] {
width: (#fluidGridColumnWidth * 6) + (#fluidGridGutterWidth * (6 - 1)) - (.5 / #gridRowWidth * 100 * 1%);
float: left;
margin-left: #fluidGridGutterWidth;
&:first-child {
margin-left: 0;
}
}
}
}
Write Like this
in phone device this div will hide<div class="span4 hidden-phone"></div>
and this div will show <div class="span8 visible-phone"></div>
Update
Previous Answer for Bootstrap 2.3
Now bootstrap 3 come in market..
so i update my answer for new user → bootstrap3
in phone device this div will hide<div class="col-md-4 hidden-xs"></div>
and this div will show <div class="col-xs-4 visible-xs"></div>
TLDR: Use the 2nd code snippet
Bootstrap is a mobile first framework so I'll explain from the smallest screen-size up. The layout is always 12 columns wide regardless of breakpoints/screen-size.
Starting from the smallest breakpoint (xs - extra small), the span4 is hidden and the span8 takes all of the width (all 12 columns)
<div class="row-fluid">
<div class="span4 hidden-xs"></div>
<div class="span8 col-xs-12"></div>
</div>
We are not quite done yet as we haven't defined behavior when the next breakpoint up is hit (sm/small/screen width is over 767px), so we'll make span4 take a third of the width (12 columns/3 = 4 columns) and the span8 will take the rest of the width (12-4= 8 columns)
<div class="row-fluid">
<div class="span4 hidden-xs col-sm-4"></div>
<div class="span8 col-xs-12 col-sm-8"></div>
</div>
The above assumes you wanted the change to happen on the change between the xs - sm breakpoints.
Further reading:
If you wanted the change between sm-md (md = medium) then I might use the visible-md class which will show the span4 on breakpoints medium and up (>992px)
<div class="row-fluid">
<div class="span4 visible-md col-md-4"></div>
<div class="span8 col-xs-12 col-md-8"></div>
</div>
I came up with a small variation of that.
Add stack-tablet class to a row-fluid to make the spans stack on tablet width, not only on phone width (bootstrap default):
#media (max-width: 979px) {
.row-fluid.stack-tablet [class*="span"] {
width: 100%;
display: block;
float: none;
margin-left: 0;
}
}
Can be used together with the display- and hidden- classes.
just:
<div class="row-fluid">
<div class="span4 hidden-desktop"></div>
<div class="span8"></div>
</div>