How do I selectively stack columns with twitter bootstrap - javascript

I have a template based on fluid example here:
http://twitter.github.io/bootstrap/examples/fluid.html
I have the latest files from here, the only customizations being colors:
http://twitter.github.io/bootstrap/customize.html
The basic markup is
<div class="container-fluid">
<div class="row-fluid">
<div class="span3">
<div class="well sidebar-nav">
Column 1
</div><!--/.well -->
</div><!--/span-->
<div class="span9">
Column 2
</div><!--/span-->
</div><!--/row-->
</div>
Column 2 falls under column 1 on mobile devices, which is what I want sometimes. But in some cases (specific pages) I want the 2 columns to remain side by side. My question is how do I achieve this with the same js/css files?

Here's one possibility: http://jsfiddle.net/panchroma/RMPMA/
You will see that the columns don't drop on the row with class = double-col
CSS
#media (max-width: 767px){
.double-col.row-fluid [class*="span"] {
float: left;
width: 50%;
}
}
Since this resets the width of each col to 50% on viewpoints 767px and below, this will work with rows having two columns. For other combinations, simply play with the width setting. You might also want refine the padding and other styling, but easy enough now.
Hope this helps!

Related

Framework7 grid layout to include desktop view

I know that framework7 is designed for phones and tablet but is there a way to include or somehow tweak the css to make it compatible for desktop?my scenario is i have two div elements that i want to view side by side on desktop.
<div class="row">
<div class="col-50">panel-1</div>
<div class="col-50">panel-2</div>
</div>
But on tablet/phone view i want it to view both as 100%
<div class="row">
<div class="tablet-100">panel-1</div>
<div class="tablet-100">panel-2</div>
</div>
I tried below but the documentation said tablet class is for window width >= 768px, so the width is 100% even on desktop view.
<div class="row">
<div class="col-50 tablet-100">panel-1</div>
<div class="col-50 tablet-100">panel-2</div>
</div>
I am thinking of adding a custom css like desktop-XX, but how can i add it and overwrite the current grid system? Any suggestion would be great thanks in advance!
#media (min-width:768px){
.col-50{
width:50%;
}
}
this should work

Bootstrap 3x3 grid with Ionic

I am making an Ionic 3 by 3 even grid that fit to the screen without scrolling horizontally and vertically. I want to use bootstrap's div class.
<div class="container-fluid">
<div class="row">
<div class="col-xs-4"><img src="/img/pic.jpg></div>
<div class="col-xs-4"><img src="/img/pic.jpg></div>
<div class="col-xs-4"><img src="/img/pic.jpg></div>
</div>
</div>
I can divide the column into three sections. I don't know how to control the rows? I only want 3 rows.
col-xs is only for Extra Small screens (<768px).
You can read more about Grid options here: http://getbootstrap.com/css/#grid-options
You can simply change your div classes into the "col-lg-4" and you will be good I think, if your screen is bigger than 1200 px.
There is so many ways to control these divs.
.container-fluid .row div
.col-xs-4
You can add another class like "mydiv" and you will be able to control it with .mydiv selector in CSS.
There is alot more ways to control these divs, so do some research, read the bootstrap website and you will be good :)

How do I get my images to responsively resize with shuffle.js?

I am using shuffle.js on my homepage and I am trying to get my images to responsively resize like in this demo the developer posted here.
Right now I am just using media queries as a workaround, but the results are far from ideal.
Note: the grid is already responsive, what I would like to see is for the images themselves to resize as well.
You must use a CSS Grid to have a nice responsive combined with Shuttle.
Note the classes .span3 and .m-span3 on element
The example of your link is using Bootstrap v2.3.2.
You can use the Twitter Bootstrap 3 which has better semantic as well, or any other grid system.
http://getbootstrap.com/examples/grid/
If you use Bootstrap 3, add the class xs-col-12 and col-4 like so:
<div id="grid" class="shuffle">
<div onclick="window.location.href = 'IEMA.html'" class="xs-col-12 col-4 item Aston shuffle-item filtered ">
<div id="overlay">ASTON</div>
</div>
<div onclick="window.location.href = 'Aston.html'" class="xs-col-12 col-4 item Aston shuffle-item filtered">
<div id="overlay">IEMA</div>
</div>
</div>
If you don't want to include Bootstrap, you can add http://996grid.com/ with same way, using class .grid_4 shoud be fine.
Update
I can make some adjusts for your page have a better grid with shuffle changing for this style for your items when lower than 690px:
#media only screen and (max-width: 690px)
.item {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 223px;
width: 100%;
}
}
To clarify my question: I'm not looking to resize the grid, that already works.
You have already a responsive class attached to the image's container,
I want the images themselves to resize.
then you only need to add max-width:100% to the img element.
In my case :
<figure class="xs-col-12 col-4 picture-item" data-title="The Magic Box">
<div class="aspect aspect--16x9">
<div class="aspect__inner">
<img style="max-width:100%" src="/the-magic-box.png" />
</div>
</div>
<figcaption>The Magic Box</figcaption>
</figure>

To know the accurate key breakpoint in bootstrap grid system

I am using bootstrap for my home page layout. I have got one column of 9 units for my content and one 3 units column for my sidebar. The div inside the sidebar is position:fixed. For smaller screens bootstrap send my side bar to the bottom, that is ok. However, at that moment I need my sidebar position relative.
I am using JavaScript to check the width of the screen to change the position property, but I am guessing that bootstrap is going to send my sidebar to the bottom when the screen is lesser than 972px. How can I really know the accurate width which bootstrap will send my sidebar to the bottom? Appreciate any help? Thanks. Other approaches are welcome.
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-9">
<div class="content"></div>
</div>
<div class="col-md-3">
<div class="sidebar"></div>
</div>
</div>
</div>
</div>
The script:
$(document).ready(function () {
if ($(window).width() > 972) {
$('.sidebar').css('position', 'fixed');
}
});
On the Bootstrap front page it has the info for this.
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
#media (min-width: #screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
#media (min-width: #screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
#media (min-width: #screen-lg-min) { ... }
There is also the xs which is < 768px.
To get full control use all lg, md, sm and xs, and set what you want for each device/screen size.
Just using one like lg will allow things to change when resized.
Adding a Fiddle to help re your second question.
I have set up a full screen Fiddle for you, resize the window and see how the two areas stay side by side when you resize.
That is controlling it as you want I think.
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-10 bg-success block">
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 bg-primary block">
</div>
Added
Hit F12
The bootstrap breakpoint you are using is md (Medium devices).
So when the screen width is >= 992px it will be side-by-side with your main content div. When it is <= 991px it will drop below.
http://getbootstrap.com/css/#grid

Zurb Foundation Using the space either side of a 12 column layout

I have developed a site using Zurb Foundation which is of course 12 columns wide.
I want to be able to put adverts either side of my content if it is wide enough, else show it below. I can figure out the last bit, of moving it elsewhere if there is not enough room.
An example is like so: Zurb Template
I have tried floated divs before the container (under the header etc.), however these are always butted right up against the browser window. I'd like it to float left, then float right within this, so it is next to the content so I can apply padding/margin to keep them a set distance from the content.
Thoughts?
Thanks.
There might be a "cleaner" way, but I'd just solve this by using absolute positioning.
Some quick pseudo code to show how you could do it.
HTML
<div class="row">
<div style="position: relative;">
<div id="adsL-container">L ads here</div>
<div id="adsR-container">R ads here</div>
</div>
</div>
CSS
.row #adsL-container, .row #adsR-container {
position: absolute;
top: 0;
width: 300px;
}
.row #adsL-container {
left: -300px;
}
.row #adsR-container {
right: -300px;
}
<div class="row">
<div class="large-2 columns hide-for-small ads">
...
</div>
<div class="large-8 columns small-12 columns">
..
</div>
<div class="large-2 columns hide-for-small ads">
...
</div>
</div>
<div class="small-12 columns show-for-small ads">
...
</div>
<div class="small-12 columns show-for-small ads">
...
</div>
use class="hide-for-small" to hide div for larger screens

Categories

Resources