I am trying to achieve the following layout for one of the pages I am building using bootstrap 4.
Sections 1 and 2 are basically container fluids with col-4/col-8 and col-5/col-7 layouts and have a background image or background color.
On top of this I have to place a div with some text and button, and depending on the placement, left or right column, the content must be confined to the size of container i.e. left and right margins same as set by container. This also needs to be responsive in nature.
I have tried adding margins based on media queries that seems to be a very ugly solution.
How do I achieve this in a more efficient way?
Thanks!!
Related
We are using Bootstrap 3 on our site and I'm attempting to extend content outside of the container, but am coming up unsuccessful. Here is an image on what I'm trying to do:
https://imgur.com/a/tGDMf
I would like to use 9 columns on the right of the container for content in 3 sections, and use a div to cover the left 3 columns and extend to the edge of the screen. I have used :before and :after attributes for extending background's to the edge of the screen in the past, but the content has been inside the container. I need the content to go outside of the container if possible. The content above and below this section will be using Bootstraps columns so I'd like to follow suit with the responsiveness and structure.
Any ideas on how to solve this problem?
I am trying to create a grid of 4 square divs that stack on top of each other when the browser is resized to mobile size. I also need to put vertically and horizontally centered text in each div. To make things even more complicated for me, each div's width is defined as a percentage, not as an absolute value.
Is this even possible to achieve?
Yes this is possible. I prefer Flexbox for this. Read up on it e.g. here
I'm trying to create a blog post display grid. My fiddle is here These divsare currently centered in the middle of the page, which is fine; however, I would like to:
Change the alignment of the divs to the left, not the center; so that as each post is generated, such is done in the natural reading order.
Make the height of the divs responsive. By this I mean, the height of the individual divs are already responsive; however, the next row of divs is aligned based on the bottom of the single-longest div in the row above it. I would like for each div to fill in the space not taken by the div above it, as depicted in the picture below
Currently, my code renders me this:
Any idea as to how I achieve this? Thank you!
You could use this modern CSS approach (won't work for older browsers)
column-break-inside: avoid; // for each content "widget"
OR
You can use some of the javascript libraries allowing you to achieve this:
bricklayer.js
Masonry
I need to create a full height divider without breaking Bootstrap CSS grid layout because I might need to make the right column to be wrapped and go after the left column for some screen sizes.
Here is an image which shows the issue:
And here is a Bootply sandbox to play with.
My question differs from other questions about making the column 100% high. Although I have implemented the divider as a border of the right column, this is not mandatory - I don't care about the height of the right column, it might be left as it is, and the divider could as well be a separate HTML element. I need only the divider to be 100% high and not entire column.
Is there any way to create this red vertical divider while keeping Bootstrap grid layout intact to preserve responsive design?
I have a request to make a HTML/CSS 3-column layout that meets these criteria:
middle and right column have a fixed width
left column has a max-width
the 3 columns are horizontally centered
ff the browser's viewport gets shrinked and the left border of the left column touches the left border of the viewport, then, by further shrinking the viewport, the left column starts shrinking in width until width is 0. (like in this example, except for that here the left column also has a min-width).
I could not find such a layout. If it is possible, how do I achieve this? (Telling me, it's not possible, would also earn the checkmark).
Here is a guide to responsive layouts and another to some responsive frameworks you might consider using to achieve what you need to.
Generally it's good ettiqute on the stack network to try and create code yourself and then post specific questions if you get
stuck.