I am currently using the bootstrap scaffolding/grid system as follows:
<div class="row-fluid">
<div id="insta-shop-filter" class="span2 visible-desktop">
</div>
<div id="insta-shop-grid" class="span10">
</div>
<div>
As you can see I added the visible-desktop to insta-shop-filter so that this will disappear on non-desktop. However what I wanted to do is that when this disappears I wanted insta-shop-grid to have a span12, so it takes the full width. Is there a way to do this without having to use javascript/jQuery and listening for window events?
You can use CSS3 media queries to toggle your styling on different devices. In this instance, you might consider writing a media query based on a 640px or 480px device width that does something like the following:
#media screen and (max-device-width:640px){
#insta-shop-filter{
display:none;
}
#insta-shop-grid{
width:640px!important;
}
}
One small note here, using !important is discouraged.
In bootstrap 2 (which it appears you are using) I don't think there is an easy way to do this without overriding the style with a custom CSS media query (like #Conqueror suggested) or adding/removing classes in javascript.
However I just want to point out that this is baked into Bootstrap3 by using col-SIZE-SPAN as documented here. In your case it would be.
<div class="row-fluid">
<div id="insta-shop-filter" class="col-md-2 hidden-sm">
</div>
<div id="insta-shop-grid" class="col-md-10 col-sm-12">
</div>
<div>
Related
i bought a responsive html5 layout and i installed it in www.cdauae.com/new
i am familiar with how the grid system works. for example in another website of mine that uses a different layout i said something like:-
<div class="row">
<div class="eight columns">xyz</div>
<div class="eight columns">xyz</div>
</div>
here there are sixteen columns in a row and i divided row into 2 parts and each part is 8 columns
however in the new layout it says things like col-md, col-lg and col-sm. i am unsure how to use them. i know that the new layout has 12 columns in a row
for example on the homepage they wanted to divide row into 3 parts and each part is 4 columns. they wrote:-
<div class="row">
<div class="col-md-10 col-lg-4">xyz</div>
<div class="col-md-10 col-lg-4">xyz</div>
<div class="col-md-10 col-lg-4">xyz</div>
</div>
i dont understand that. why did they combine both col-md and col-lg in the same line of code? there are also parts in which they combined col-md, col-lg and col-sm in the same line of code
i will get the same result if i say:-
<div class="row">
<div class="col-lg-4">xyz</div>
<div class="col-lg-4">xyz</div>
<div class="col-lg-4">xyz</div>
</div>
and if i say:-
<div class="row">
<div class="col-md-4">xyz</div>
<div class="col-md-4">xyz</div>
<div class="col-md-4">xyz</div>
</div>
that confused me. when do i combine? when do i use col-md by itself? when do i use col-lg by itself? when do i use col-sm by itself?
Adding col-lg-* , col-md-*, col-sm-* classes defines on the same line says which class will get applied based on screen resolution.
col-lg-* classes gets applied after a min-width: 992px of that framework.
col-md-* classes gets applied after a min-width: 768px of that framework.
Check the below image for example:
watch this video for the explanation: https://www.youtube.com/watch?v=xinn-BtAGpk
I know this has been answered above so I'm just added this for reference:
This is the standard bootstrap responsive design system:
https://getbootstrap.com/docs/4.0/examples/grid/
https://jsfiddle.net/jonathansh1115/oc75f0sr/
I read about many posts of the width would not be 100% and people always say
body {
margin=0;
padding=0;
}
will work but loooook at this!!
ps:i am using the bootstrap link there
Well, there are lots of issues with your code.
Firstly you are not using bootstrap properly. You have to add the CSS file also. Bootstrap will not work if you only include the js file. Once you include it then everything will work just fine.
The spacing around divs is because of the browser defaults. If you include Bootstrap they will just disappear. Also, you need to use bootstrap classes properly.
In my opinion, you should go through Bootstrap's documentation and then create your layout. http://getbootstrap.com/getting-started/
If I understand your problem you want that your 3 blocks have a 100% width. Here they have a 100% of 33.33% of your page because you have col-sm-4.
Try to replace by :
<div id="all">
<div class="row col-sm-12" id="hqllo"><h1>hqllo</h1></div>
<div class="row col-sm-12" id="nook"><h1>nooook</h1></div>
<div class="row col-sm-12" id="pro"><h1>pro</h1></div>
</div>
remove this in css
.row {
width:calc(100%/3);
}
jsfiddle
The code is linked below with JSFiddle.
The problem was when I decrease the screen size the div blocks should be in the same line with decreased width instead they are going one below the other. (once check it by increasing the screen width).
The other one I want to highlight is that the code for showing
read more option for text/paragraph when we decrease the block size. That is when we click on read more the block size should increase and show the remaining text. It would be very helpful if someone suggests code for this.
The code is
.center{
float: none;
padding:0px;
margin-left: auto;
margin-right: auto;
}
div.allign{
height:170px;
margin:15px;
text-align:center;
}
div.content{
height:200px;
background-color:#fff;
background-color:#F4F1EE;
}
<div class="container-fluid">
<div class="row-fluid content">
<div class="col-md-1 "></div>
<div class="col-md-3 allign">
<h3>Get Started</h3>
<p>How it works?</p>
<p>It's very easy and simple,just sign up for free and get started with your account.
It's easy to reserve or cancel a book from anywhere.</p>
</div>
<div class="col-md-3 allign">
<h3>About library</h3>
<p>location,Directions,Books info...</p>
<p>Total books:1124<br />journals:130<br />.</p>
</div>
<div class="col-md-3 allign">
<h3>No text books?</h3>
<p>Dont worry here we go...</p>
<p>Reserve your books from online by just one click.
Read online/offline by downloading pdf files.</p>
</div>
</div>
</div>
Click here for a JSFiddle example
https://jsfiddle.net/nvpqfxbj/6/
Thanks in advance.
You are using the "md" grid size on those elements so they will become full width below 991px. If you want to maintain the columns on all devices, then use the "xs" columns.
Instead of 'col-md-3' and 'col-md-1' use 'col-xs-3' and 'col-xs-1'. However, you don't need the empty first column because BS address it with offsetting columns.
Also, the margins set from .allign will override the margins BS uses on the columns and you'll have problems unless you remove it. If you need the margins, use another container div nested inside the col-* containers.
BOOTPLY EXAMPLE: http://www.bootply.com/EfOZtUQqcs
This is the basic principle all responsive grid systems are built upon and you're going to struggle unless you understand this basic concept. It's all covered in the BS3 documentation.
http://getbootstrap.com/css/#grid
As for your "read more" problem. The code you provided is not the culprit. There is something going on server-side or JS that is causing this and you've provided no server-side or JS code.
This works for me.
Bootstrap 5
<div class=".container-fluid">
Using bootstrap 2, what would be the simplest method of having a static width column on the left and have the right column be fluid. Something like this with 200 px width left column and the right to fill
the browser window.
======================
Hello
======================
A |
B | 100%
200px|
D |
E |
F |
I tried adding a min-width to a regular container layout but it have some weird behavior when resizing:
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">Hello</div>
</div>
<div class="row-fluid">
<div class="span2" style="min-width:200px">Left Column</div>
<div class="span10">Right Column</div>
</div>
</div>
Here is a JS fiddle as well though the quad layout of js fiddle itself seems to be adding its own behavior.
http://jsfiddle.net/BVmUL/882/
Short answer to your question is NO. Bootstrap 2 uses media queries and percentual measures to achieve their responsive grid layouts. Trying to make an hybrid approach using Bootstrap 2 is completely redundant.
You can try this approach. Use float:left; on the left column and give a padding-left:200px; to the right column and that's it. You've drawn your layout. Added clearfix at the bottom so you can use a footer in the future if you like. This way you keep support for most browsers.
Check JsFiddle Demo
HTML
<div class="container-fluid">
<div class="row-fluid">
<div class="span12 header">Hello</div>
</div>
<div class="row-fluid">
<div class="span2 left-col">Left Left Left Left Left Left Left</div>
<div class="span10 right-col">Right Right Right Right Right Right Right </div>
</div>
</div>
<div class="clearfix"></div>
CSS
.header{
background-color:#f00;
}
.left-col{
background-color:#0f0;
float:left;
width:200px;
height:400px;
}
.right-col{
background-color:#00f;
height:400px;
padding-left:200px;
}
After that you can use Javascript to dynamically adjust the left column width and the right column padding on window resize.
You may also want to consider the following alternatives:
1. Calc() (IE9+ only)
If you don't care about IE8- support this is the easiest way to achieve it. You can learn how here
2. Media Queries (IE9+ only)
You can use Media Queries just like Bootstrap does but you can't use percentual measures to achieve what you're looking for. You can use it to change css property values and make it responsive (with your custom limitations) that way.
3. Flexbox (IE10+ only (partial IE9))
Will be great but not recommended for now because of browser support.
4. Tables
Take this thread to know why you shouldn't use it.
So you basically want the right column to fit the available space.
You have 5 options that are not specific to bootstrap but general HTML/CSS:
1) use calc
.left-col {
width: 200px;
}
.right-col {
width: calc(100% - 200px);
}
That obviously excludes IE8 and other browsers that do not support calc.
2) use float
I didn't think of that one. Check #henser's answer for that. Seems to work pretty good although I was under the impression that the right-col would break down if there isn't enough available space for it's content. Apparently I was wrong - this seems to be the best method if you want to support older browsers.
3) use flexbox
That is a bit more work and maybe complicated but I can recommend this great guide to get started with flexbox.
That obviously excludes old IE versions as well.
4) use tables
Ugly, not really recommended but it supports all browsers.
5) Javascript
you can use JavaScript to calculate the remaining space. But that of course needs to be fired on resize. Not recommended as it's not as fast as the other options.
// jQuery example
$('.right-col').width($(window).width() - $('.left-col').width());
I am prototyping a few mockups for my site and have decided to use Foundation. Foundation has a feature that easily allows you to hide page elements when the view port is less then 768px. The strange thing is, then when I apply the .hide-for-small class to an element is shrinks the element by about 10px on all sideds. It does not appear to be adding padding or margins, rather setting a new view port size only on that element. this is most notice able when I apply the .hide-for-small class to elements with 100% widths.
Can anyone help shed some light on this?
I see your code, but have some problem. You added 'columns' and 'hide-for-small' classes to wrapper div that is incorrect. You have to use 'columns' and 'hide-for-small' class in a 'row'.
For example your code have to be like this:
<div class="row">
<div class="large-8 hide-for-small columns">
...
</div>
<div class="large-4 hide-for-small columns">
...
</div>
</div>