I have 2 divs
<div class="col-lg-10 hidden-md">ABC</div>
<div class="col-lg-2 hidden-md">123</div>
"ABC" has content that won't resize (intentional)
When there isn't enough room to fit "123", Bootstrap will move it under "ABC". I want "123" to disappear in this case, not ever go "under".
Is there a way?
Note I have hidden it for md and below.
EDIT: This code is Bootstrap 3 specific - see Alec's comment for Bootstrap 4 information.
The hidden-md class doesn't actually hide the element for viewports at or below the "medium" viewport width, it hides the element when the viewport falls into the medium width only.
You should be able to use the Bootstrap .visible classes to hide certain elements with this class when the viewport is smaller than a specified size. In this case, the second <div> will only show when the viewport is "large", and disappear when the viewport is smaller than "large" (i.e. medium, small, etc.).
<div class="container-fluid">
<div class="row">
<div class="col-lg-10">ABC</div>
<div class="col-md-2 visible-lg">123</div>
</div>
</div>
Here's a CodePen example - try stretching and shrinking the browser's width to see what's going on.
Related
Is it possible to remove the middle two breakpoints in Bootstrap 3 and have the browser visually "scale/shrink" the page, so in those breakpoints you don't have to scroll left or right to see the page?
Basically, I have a design that I want to be responsive, but only be responsive for the small breakpoint and the large breakpoint, but I don't want a viewer to have to scroll left or right to see all the content.
Here is an example that I'm working on that doesn't work. I've tested on the iPad and I have to scroll around left and right to see the content:
http://matthewtbrown.com/test/myprojects.html
Just checked your code via Developer Tools, you're using container-fluid for the parent container.
When using container-fluid you should use row-fluid instead of row.
We use row when using container and row-fluid when using container-fluid.
It should be something like this:
<div class="container-fluid">
<div class="row-fluid">
<div class="col-lg-4">...</div>
<div class="col-lg-4">...</div>
<div class="col-lg-4">...</div>
</div>
</div>
Using Bootstrap v4alpha and I am trying to layout 24 pictures w/ caption underneath in grid. Let's call a tile a picture with its caption.
1) I want the tiles to be aligned vertically and horizontally as we would have if using a < table > tag with align top and left. My pictures are of the same size, but the caption length varies.
2) the number of columns adjusts with screen size. On a small screen, we would have 2 columns and 12 rows. On a medium screen 3 cols by 4 rows. On a large screen 4 cols and 3 rows.
I tried the Cards Columns and it's almost what I need, except the masonry look. I want them also aligned in rows.
I also tried the Grid Options with col-sm-6, col-md-4, and col-lg-3 however the problem lies in the fact I need to wrap a fix number of tiles within a tag < div class="row" >.
This problem also exist in previous versions of Bootstrap, but if there is a specific solution for v4, I would like to know as well.
You can just wrap all .col-*-* with one single <div class="row">...</div>. Your content will wrap when needed.
Now, as for your other question: You don't need to make sure that there are exactly 12 columns in each row for each screen size. If a column doesn't fit anymore (for example you have .col-*-11 and then .col-*-2) it will go to the next row automatically, even if the previous row is not 100% full.
Another example taken from Bootstrap's documentation
<div class="row">
<div class="col-9">.col-9</div>
<div class="col-4">.col-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
<div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
</div>
Here .col-4 would introduce columns 10-13, but since there are only 12 columns, the whole div goes to the next row.
Bootstrap 4
I made a fiddle to show you, how this would work in Bootstrap 4. v4's grid system is based on flexbox and in flexbox an items will grow to use all available vertical space. This means that in a row of columns, each column will be as tall as the tallest column.
This is a huge difference to Bootstrap 3 and means that there is no need to compensate for different heights of the content.
Bootstrap 3
I originally based my answer on Bootstrap 3 and there are a few differences, so I'll keep that original answer (slightly modified) here as well for anybody who needs it.
In Bootstrap 3, you can omit the .row altogether and use .container as the parent to all the .col-*-*.
You can check out this fiddle to see the difference between using .row and not using .row to layout a grid of images. Just adjust the width of the result-frame and scroll down to see the difference when there are 3 images in a row. Of course you can also use one single .row to put all your .cols inside.
Compensating for different content height
However, since Bootstrap 3 uses floats instead of flexbox, this introduces the problem that if your columns are not the same height, the next column might start at the right of the highest element of the previous column when you want it to start at the left of the screen. So in order to push an element below all previous elements, you need to clear these floats.
Bootstrap 3 provides a class for this, you can just insert <div class="clearfix"> whenever you want to clear the floats. Additionally, you will have to hide that div for screensizes where you don't want to clear the floats, you can use the classes .hidden-* to achieve that.
<div class="container">
<div class="col-sm-6 col-md-4 col-lg-3">
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
</div>
<!-- on small devices the first row is full here, so we add a clearfix and hide it for medium and large sizes -->
<div class="clearfix hidden-md hidden-lg"></div>
<div class="col-sm-6 col-md-4 col-lg-3">
</div>
<!-- on medium devices the first row is full here, so we add a clearfix and hide it for small and large sizes -->
<div class="clearfix hidden-sm hidden-lg"></div>
<div class="col-sm-6 col-md-4 col-lg-3">
</div>
</div>
Again, I made a fiddle to show the whole thing in action.
Been playing with boostrap for a few days and amazed at the capabilities it has to offer.
Have been trying to have a "header" of some sorts, which is affixed to the top when the user scrolls down.
You can find my current work here: http://mp3dj.free.fr/affix/site/
However you will notice that, when scrolling down, the "POST 1" suddenlty jumps to the top of the page. i.e there is no smooth scroll behind like here: http://jsfiddle.net/namuol/Uaa3U/
Current code:
<div class="container">
<div class="row affix-top" data-spy="affix" data-offset-top="60">
<div class="span12">
<div class="row">
<div class="span3">
<img src="http://www.socialfork.net/public/images/default-profile-photo-female.jpg" class="img-polaroid">
</div>
<div class="span9"><h1>Samantha Sam</h1></div>
</div>
</div>
</div>
<div class="row">
<div class="span12">
<div id="post1" class="box">
<h1>Post 1</h1>
<p> Scroll Down↓</p>
</div>
<div id="post2" class="box"><h1>Post 2</h1></div>
<div id="post3" class="box"><h1>Post 3</h1></div>
</div>
</div>
</div>
Any help appreciated!
What happens in your code is the row at the top changes its position to fixed when its offset to the top is smaller then 60px. The consequence is that it stops to consume any space above the next row.
In the jsfiddle you introduced there is a JS code you should understand and should help you.
This one is for you:
$('#nav-wrapper').height($("#nav").height());
It requires your header to be placed yet inside another div (class called nav-wrapper in fiddle). JQuery code above sets its height based on row height during initialization of the page. The height stays the same even if the top row disappears (of getting fixed).
Another part of the JS code:
$('#nav').affix({
offset: $('#nav').position()
});
makes you independent of the size of space above the top row, but in your case I think you do not need it (you can predict it always takes 60px).
when you use the solution from Marcin Skórzewski mind that if you're using a collapse in your navbar it effects the dropdown.
The height of the complete navbar is set using the small piece of JS code.
When your window gets smaller the navbar will be replaced with ||| (using default bootstrap)
When you're using a dropdown and press ||| to show the dropdown it will be placed behind the content below. It will not slide the content down. This is because the height of the navbar is set.
Possible solution 1: remove the height of the navbar when you click on ||| and place it back again when the dropdown slides back.
Possible solution 2: add a margin-top to the next element once the navbar sticks
update:
https://stackoverflow.com/a/15177077/1059884
an excellent solution using CSS
So I'm writing a program that will need to resize elements based on the viewers screen size. The program is in jsp / sql/ xhtml / css and I have a few questions.
Is there any way to select a css file by saving the screen width to a jsp variable?
Is there a way to align a div below another div and use the above div as a sort of container for it? This question is a little complicated
Goal: To have an image with a text label underneath it. Problem: The div is part of a parent div, and the div serves an image that will changed based on the screen size.
Here's something like what I'm doing.
<div id="container">
<div id="inner">
<div class="1">--stuff</div>
<div class="2"><img src="server:8080/project?minutes=720&width=<%= out.print(width) %> </div> <-- want to align under this
<div class="3">--stuff</div>
</div>
<div id="label"> <--Want this div aligned underneath "2"
<div class="1">2.0</div> <-- Want the text at 25% of the image (right)
<div class="2">4.0</div> <-- Want the text at 50% of the image (right)
<div class="3">6.0</div> <-- Want the text at 75% of the image (right)
<div class="4">8.0</div> <-- Want the text at 100% of the image (right)
</div>
</div>
What you are wanting to do - Responsive Design - is very cool but also gets pretty complicated. It takes a bit of learning, but CodeSchool has a high quality course called Journey Into Mobile that covers adaptive screen sizes and should get you on the right track.
You'll need to dig into Responsive design, Media Queries & Fluid layouts.
As mentioned above Codeschool does have a great course covering these areas.
What is the current standard way to handle responsive images in a mobile first approach?
That is: is there an accepted method in use today that allows small resolution images to be served to mobile/small screen width devices, while larger resolution images be served to tablet/desktop etc.?
Omit width and height on the <img /> tag, if it's parent element is responsive it'll scale.
Exactly, as sanusart wrote you.
For example, if you use Twitter Bootstrap extension (recognized by many as the best or one of the best responsive design-oriented frameworks) and set it to use responsive design (not set, by default), then all you have to do, is to put your image inside responsive container, for example well:
<div class="well">
<img src="img/logo.png" class="img-polaroid" />
</div>
And your image will adapt its dimensions according to screen resolution.
If you would like to separate it with left and right margin,
you can use fluid layout, for example like that:
<div class="well">
<div class="row-fluid">
<div class="span2"></div>
<div class="span8"><img src="img/sunflower.jpg" /></div>
<div class="span2"></div>
</div>
</div>
But we aware, that on a wide screens (like phones in portrait mode) your left and right "separators" will be stacked top and bottom, which may produce unwanted side effects.