I have two columns in Bootstrap 3, one with a couple of images in it, the other with one big image. I want one column - the one with multiple images - to be partially overlapped the other, so one image overlaps the three other images. If I try this the big image gets moved either down or up. Is the a way to overlap these columns? it is impossible to put both images in the same column, due to the rest of the page.
Code:
<div class="col-md-6 col-md-offset-3">
<div class="col-md-4 col-md-pull-2">
<!-- three images -->
</div>
<div class="col-md-6">
<!-- bit image -->
</div>
<div class="col-md-6">
<!-- other bit image -->
</div>
</div>
Can anyone help me?
The columns themselves will NEVER overlap on the same plane. They can be placed above each other, but only the top-most will occupy the given pixels.
You can however, overflow the images, so they expand outside the space provided. See: https://jsfiddle.net/q9dn808p/1/ [terrible images used]
The question isn't 100% clear, so fixing as per noted in the comments would be advised. The other properties to solve your solution is z-index, in association with position: fixed or position:absolute to mark your larger image to a certain side of the page.
You can make them overlay giving a margin value less than 0.
#left-picture{
margin-right: -50px;
}
https://jsfiddle.net/q9dn808p/2/
Is this what you are looking for?
Related
I've been looking here for the answer to this and I've seen a lot of questions, but nothing that addresses what I am trying to accomplish.
Essentially I am creating a location finder with a map on the right and a list on the left. Currently there are over 18,000 locations that can be searched so the list of locations on the left could be long and it doesn't make much sense to have the list extend beyond the size of the map on the right.
The layout I am looking for is similar to this:
To keep things responsive, I would like the height of the columns in the second row to be set with a percentage and not a pixel amount. I don't necessarily care much about the height of the map on the right, it's going to be sized using the responsive embedding that bootstrap has, and it works fine, but the problem I am having is getting the list on the left to overflow instead of just growing.
I've tried adding the various sizing classes to the column with overflow-auto. I've tried wrapping the contents of the column in another div and applying those classes. Nothing seems to work correctly.
The closest I got was getting the contents of the column to overflow and show the scrollbar, but the parent div still maintained the original height of the div so there was a huge amount of whitespace at the bottom under the row.
This whole thing is making me absolutely insane! I can't believe that something like this could be so difficult. The sizing classes examples seem to show what I'm looking for, but they aren't working in practice.
At the moment, this is what I have: https://codepen.io/zachattack05/pen/aeLmmv
--------------------------- UPDATE ---------------------------
After trying Zim's suggestion, the page is rendering the scrollbar correctly, but it appears to be much bigger than the 25% that's expected.
Here's a fullsize screenshot of the outcome and the row, despite having h-25 set, it appears to be 75% of the screen at least.
A better representation of what I am looking for might be something like this, but not to scale. The map area would be 25% of the height of the page. Essentially, the map area is sandwiched between some other rows. and then a footer at the bottom of the page. I don't want the map and the scrolling div to stretch all the way to the bottom of the screen, that's way too tall.
There have been other questions on this. Flexbox items are equal height and will always grow to the height of the tallest column. If you want to limit the height of one column, so that the other one scrolls, use an inner position:absolute element...
https://codeply.com/go/kYFBFBc28l
<div id="PanelLocationFinderContent" class="row flex-grow-1 position-relative">
<div id="locationlist" class="col-sm-4 overflow-auto bg-info">
<div class="position-absolute">
<p>text</p>
<p>text</p>
..
<p>text</p>
<p>text</p>
</div>
</div>
<div class="col-sm-8 bg-warning">
<div class="embed-responsive position-static">
<div class="embed-responsive-item embed-responsive-1by1 bg-secondary">
<div id="map" class="bg-success h-100">MAP CONTENT WILL BE HERE</div>
</div>
</div>
</div>
</div>
I was just wondering if someone can give me a hand, i've tried for 3 hours to solve this issue. I need to have the interface like on the picture by using grids, or anything.
The closest thing i can get is when everything displayed correctly except the second bottom grid. It usually gets below the white line (thats the starting point).
Could someone give me a tip on how to get around this problem.
You have minimum two options:
one is to make the grid elements absolutely positioned and give them top, left, right and bottom values. The parent element (grid container) should have "position:relative;" (or can be fixed or absolute, but in your case relative will make more sense).
Another option is to write markup like this:
<div class="col-xs-6">
<div class="col-xs-12">
one
</div>
<div class="col-xs-12">
two
</div>
</div>
<div class="col-xs-6">
three
</div>
Basically you wrap the two divs on the left into one parent div so the layout will not break. Just make sure the height of inner divs are 50% of the height of the right box.
http://www.razaprinters.com/bootstrap.html
Hi I have made this page using bootstrap it is working fine on Desktops i am mostly using classes like col-xs-4 or 12 but when i open my website on a cellphone it is not optimizing things are behaving awkwardly like the about us divs goes all the way up and etc. any help with the code will be helpful i am not posting the code as you can go to inspect element or view source code to access it.
In order for bootstrap to "work" you should put your columns inside container and row classes.
<div class="container">
<div class="row">
<div class="col-xs-12"></div>
</div>
</div>
For more information go here Bootstrap Grid System
Container is a parent to content you want to style, it can have multiple rows inside. A row is sort of horizontal group (like a row in a table). Rows have 12 columns, but you can apply different widths to elements to target different views (dektop, mobile) depending on screen width. You need a row element if you want columns to work. For instance if you use:
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"></div>
</div>
</div>
Then this will take 50% width (it will be on the left) of parent .container element on larger screens and 100% width of parent .container on smaller screens. Hope that clarifies something. I really recommend reading Bootstrap documentation - it's short and simple.
I am using bootsrap 3 as my CSS framework to style my website.
<div class="row">
<div class="col-lg-4">...</div>
<div class="col-lg-4">...</div>
<div class="col-lg-4">...</div>
<div class="col-lg-4">...</div>
.
.
.
</div>
The idea is to add the col-lg-4 div into one row, and the col-lg-4 div will automatically move to the next row when it has exceed the width of the row.
In general, it works fine. However, the last col-lg-4 div of the first row is not aligning correctly. The demo address is: http://imaboy.cn/blog/forums/
Do you have any idea why this is happening?
Here is the screenshot:
http://www.imaboy.cn/screenshot.jpg
very easy. In your first column, last row, you have a col-lg-4 element which has an additional row of text, making it higher. This causes to interrupt the normal float of columns. See images below:
as you may see, that beige zone is about to collide with the column in the left. See image below for a better view of the issue:
I have added a transparency so you can see the collision and how that rocket column blocks all floats.
The solution
just add this to your CSS:
.col-md-6.col-xs-6.col-sm-6.col-lg-4{min-height:70px; margin-top:20px; }
Now you make sure those columns will have the appropriate height to float with ease (adjust that height if needed). Also, I have added the margin-top declaration to your CSS instead of inline since it's better to have it all in the style-sheet. Also, you should consider giving those columns a name, like myCol so you don't risk to affect columns anywhere in your site and you can target them as easy as
.myCol{min-height:70px; margin-top:20px; }
I'm building a site in Zurb's Foundation 4. And I have a row that has two columns. The left column is a paragraph and the right column is an image. When I reduce the browser to mobile dimensions so that the layout will collapse to one column I would like the right div, the image, to be ABOVE the left div, the paragraph, when it transforms to one column.
By default the image is going to fall below the paragraph since the div is later in the order.
Thanks!
Foundation has push and pull classes you can use for this. In your situation, you would set it up like:
<div class="row">
<div class="large-6 push-6 columns">Image</div>
<div class="large-6 pull-6 columns">Text from paragraph</div>
</div>
You can find out more on this by reviewing the docs at http://foundation.zurb.com/docs/components/grid.html and look for 'Source Ordering'