I'm trying to create a pretty basic layout with Bootstrap 3. I want one center column with a max width and two outer columns to fill up the rest of the space and I want it all to be centered.
Without the max-width on the middle column, everything is centered nicely, but when I add the max-width, white space appears on the right forcing the rest of the layout off-center.
Here is a Bootply showing the issue.
Is there a way to do this using Bootstrap rows and columns?
Thanks for the help.
Related
I have the following sandbox. It has three columns. The first two are auto widths (and will be menus) and the third is using a React Splitter component.
This third column will eventually contain a grid at the top and bottom.
I need the third column to be scrollable horizontally, NOT the entire window.
So if you imagine a table full of columns, the column itself should scroll to the right but not the window. It must work with the splitter.
I have tried creating a parent with overflowx-auto and white space : nowrap but it breaks Bootstrap with margins etc.
Is anyone able to help please?
Here is the sandbox
My Bootstrap page begins with a single row with two columns. In the first column there is some text content that varies in size. The right column will have a background image and the text in that column will always be about the same size. I want the right column to stretch to always be the same height as the left column and to also stretch when the user resizes the window so much that the right column becomes its own row beneath the left column. May I ask how to do this?
If you are using Bootstrap 3 and you don't want to use flexbox or Bootstrap 4, have a look here:
http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height
It's pretty robust, just add classes for the row and desired columns (I usually use row-md-height and col-md-height, for smartphones it's usually not needed.
I have 3 columns, using Bootstrap 3 grid system. Each column has varying amounts of text and with a button below it. I want to align the 3 buttons vertically, but I cannot use position:absolute and bottom:x because it breaks the responsive nature of the grid.
You can see the example here: http://codepen.io/enjay43/pen/tvcCD
Any ideas?
You can set a height for each column's top block.
See this fork I've made here
I am working on a Flex mobile project and am using a TileLayout to layout a bunch of groups. The problem is, if any text in one of the groups spans several lines, ALL tiles get resized to the same height. I need the tile width to be the same for all tiles, but I want the tile height to be the tallest only on each row. Thanks for the help.
I found a work-around for this. I had to write a custom layout that calculates the number of columns and the max height for each row.
I have two <div>s on my page. I want to arrange them side-by side, so that the first (right) shrinks to fit it's contents (unknown width), and the second (left) expands to fill the remaining horizontal width.
The two columns do not need to be equal in height.
Additionally, I would like to create a 5px gap between the edges of the two boxes.
Is this layout possible without using a table?
EDIT:
Here's a table version to show you the kind of behavior I'm looking for.
I think one of my answers on another question solves this:
xHTML/CSS: How to make inner div get 100% width minus another div width
Am I understanding your question correctly?
Yes it is! You can float the first column left, and play with margins to create your gap.
http://innonesen.se/test/l-41-mod/
Ths should do it ( tested only on IE6 and Opera ).
Additional feature exist that the main container will stop expanding ,
when sidebar is less then 100px wide .
http://innonesen.se/test/l-41-mod/no-right.html
P.S. sorry , i cant past URLs .. my rep is too low.
Sure, here are two different fiddles showing how you could do it. The #float example uses a float: left and then a margin-left on the other div that equals the #float width.
The #absolute one uses one absolute column of fixed width and then the other column sets a margin-left that equals the #absolute column's width.