I'm using bootstrap with container-fluid. Inside the container I'm using several cards. How can I modify the container so that the cards are placed more compact in vertical direction? Currently they are placed in a grid.
The display:grid divides into rows and columns so it is not possible to bring the card higher.
You have 2 choices: switch to flex or use columns.
Personally I used columns (see .columned class and .fak) and float:right for even cards and float:left for odd cards.
.columned {
columns: 1;
column-gap: var(--bs-gap);
& > .card {
break-inside: avoid;
display: inline-flex;
width: 100%;
margin-bottom: var(--bs-gap);
}
#include media-breakpoint-up(md) {
columns: 2;
&.fake-masonry {
columns: auto;
display: block;
& > * {
width: calc(50% - var(--bs-gap) / 2);
&:nth-child(even) {
float: right;
}
&:nth-child(odd) {
float: left;
clear: left;
}
}
}
}
}
you should be able to create a single row with 2 columns and then everything will be in one col or the other. So don't make multiple rows:
<div class="container-fluid">
<div class="row">
<div class="col-md">
<!-- everything goes here for first col -->
</div>
<div class="col-md">
<!-- everything goes here for second col -->
</div>
</div>
</div>
Related
How can I bleed an image or container (for the background colour) to the edge of the viewport on one side, whilst still using the column grid to reference for the other side and to still house the content within?
I've attached an illustration of my desired outcome.
This answer is similar however I need the image to show as much as possible so I don't want to extend it further than necessary.
The markup I am using is similar to bootstraps layout.
.container {
margin: 0 auto;
max-width: 1140px}
.container--fluid {
margin: 0;
max-width: 100%;
}
.row {
display: flex;
flex-wrap: wrap;
width: 100%;
margin-bottom: 2em;
}
.col--bleed {
background: lightgray;
/* margin-right:calc((100vw - 1140px) / 2) */
}
.col__inner {
padding-left: 15px;
padding-right: 15px;
}
Html markup:
<div class="container">
<div class="row">
<div class="col-7">
<div class="col__inner">
<!-- Content here -->
</div>
</div>
<div class="col-5 col--bleed">
<div class="col__inner">
<!-- Content here -->
</div>
</div>
</div>
</div>
Heres an example of the markup I will be using in codepen.
TL;DR: codepen here make the items have at least 30px margin-right and no margin in case it is mobile view. Without using what I consider hacky media queries or jQuery. And no horizontal scroll
Why?
I want to use flexbox
following problem:
3 items
for desktop they align in a row. For mobile there is maybe 2, maybe 1. Each one having margin-right: 30px;
now, the last one (of the row, 1, 2 or 3 rows possible) must not have margin-right or at least look as if it does not have a margin. No hacks allowed right. This must be a responsive solution.
this is pretty standard imho:
e.g. desktop:
display 3 items, each with a minimum margin of 30px, or more depending on screen size.
If there is less space, flex-wrap to the next line
on small mobiles:
only show one item per row, but centered without the margin-right: 30px
what did I try?
codepen here
HTML
<div class="row no-gutters my-outer">
<div class="col-12 d-flex justify-content-between flex-wrap">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
CSS
.item{
width: 400px;
height: 400px;
background-color: cornflowerblue;
margin-right: 30px;
margin-top: 30px;
}
.my-outer{
margin-top: -30px;
margin-right: -30px;
xxxxwidth: calc(100% - 30px);
}
negative margin on the parent
the issue is, that it creates a scroll bar
there should be a standard solution for this, no?
using width: calc(100% - 30px); creates other odd issues that are unwanted.
when using overflow-x: hidden on the parent element, you get issues with this:
overflow-x:hidden still can scroll
Since the built-in col-12 rule looks like this
.col-12 {
flex: 0 0 100%;
max-width: 100%;
}
it prevents it from being wider than 100%, which it needs to for the margins to work. So if to remove it, and as the col-12 element is a flex row item, it will need a width if no wrap occurs, or it won't fill the available space in its parent.
Then, when it comes to add margins like that, it is better to add it on the left side of the item, as left margin generally won't cause a scroll to appear, which right margin often does, and the compensation for that margin should be applied on the items parent, not the outer most element.
So in below samples I removed col-12, added a custom rule, my-inner, and used left margin.
Now, for the mobile layout, since there is no way to detect when the items wrap, you either need a media query or a script, and as media query is really not a hack, and there is only one property that needs to be altered, justify-content, this is the cleanest solution.
Updated codepen
Stack snippet
.item{
width: 300px;
height: 300px;
background-color: cornflowerblue;
margin-left: 30px;
margin-top: 30px;
}
.my-inner {
flex-grow: 1;
margin-left: -30px;
margin-top: -30px;
}
#media (max-width: 647px) {
.my-inner {
justify-content: space-around !important;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row no-gutters my-outer">
<div class="d-flex flex-wrap justify-content-between my-inner">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
My personal recommendation though, is to use space-around, which IMHO align the items much nicer w/o a big gap between items, and with making use of one of the pseudo elements one can keep the 3rd item left aligned.
Updated codepen 2
Stack snippet 2
.my-inner::after,
.item{
width: 300px;
height: 300px;
background-color: cornflowerblue;
margin-left: 30px;
margin-top: 30px;
}
.my-inner::after {
content: '';
height: 0;
}
.my-inner {
flex-grow: 1;
margin-left: -30px;
margin-top: -30px;
}
#media (min-width: 960px) {
.my-inner::after {
display: none;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row no-gutters my-outer">
<div class="d-flex flex-wrap justify-content-around my-inner">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
Thanks to Toskan, here is the final version they made out of my above sample.
Try this at the bottom of your style sheet.
Use #media to target the device by width.
Use max-width and % width for responsive views
Use last-child to make sure there is no margin
on the last item as oppose to using negative margins
#media (min-width:800px)
{
.item
{
width: 100%;
max-width: 400px;
}
.item:last-child
{
margin-right: 0;
}
.row
{
max-width: 100%;
}
}
#media (max-width:800px)
{
.item
{
width: 100%;
max-width: 400px;
margin: 0 auto;
}
.item:last-child
{
margin-right: 30px;
}
.row
{
max-width: 100%;
}
}
When we make a webpage with Bootstrap, we use rows that we put in a container, so if do this with 2 rows, how to make the 2nde one to fill the entire page ?
I.e if I have those 2 rows:
here
How do I make the 2nde one (the blue one) to fill the rest of the page ?
Thank you
The HTML code is:
<body>
<div class="container-fluid">
<div class="row row1">
<br>
</div>
<div class="row row2">
<br>
</div>
</div>
</body>
And the css is:
.row1{
background-color: orange;
}
.row2{
background-color: blue;
}
p.s: I just want to transform the rows properties, not use one row and color the rest of the page with the backgroud color of the body.
You can use flex layout to implement what you want. Here is an example:
* {
margin: 0;
}
html, body {
height: 100%;
}
.row1{
background-color: orange;
}
.row2{
background-color: blue;
}
.container-fluid {
display: flex;
flex-direction: column;
height: 100%;
}
.row:last-child {
flex: 1;
}
<div class="container-fluid">
<div class="row row1">
<br>
</div>
<div class="row row2">
<br>
</div>
</div>
A jsfiddle is also made for reference.
Some explanation for the key code:
display: flex;: use flex layout for items inside of display: flex.
flex-direction: column;: arrange .rows vertically.
flex: 1;: make the last child of .container-fluid (.row2 in your case) grow/shrink automatically.
I need help with getting Bootstrap layout as per image below. I cant figure out how to get the yellow bar to appear with the full width of the Bootstrap container without affecting the way the columns should stack up on the mobile view (second image).
So I dont need the yellow bar to be displayed on mobile view but the order of how the columns stack up has to be preserved. I have tried inserting a div in the middle column and force it to go outside of it but it didnt really work (the closest I got was with negative margin but that just overlaps the other columns and I dont really know exact number I should apply for each margin to make it look good).
Below is my HTML structure - I have removed the yellow bar part as I dont really know where it should go...
<div class="col-md-4">
col 1 header<br/>col 1 contents
</div>
<div class="col-md-4">
col 2 header<br/>col 2 contents
</div>
<div class="col-md-4">
col 3 header<br/>col 3 contents
</div>
If anyone can advise if thats possible to do with Bootstrap and give me some direction it would be much appreciated.
if cols headers and yellow div has fixed height you can margin between header and content and set yellow div by absolute between them
Bootstrap classes for push and pull cols for different devices can help.
Just put xs instead of lg and refer the following link.
Bootstrap 3: pull-right for col-lg only
and for hiding your yellow div, use .hidden-xs
You can use col-xs-pull-6 or col-xs-pull-12 on your content.
I would have solved it if you mentioned your code in your question.
Instead of Bootstrap I think the best way is using flexbox. You have to reorder all the divs to get desired effect but with Bootstrap columns you will find many problems. This is my solution (resize to view how it works):
*{
box-sizing: border-box;
}
.wrapper div {
border-width: 2px;
border-style: solid;
padding: 5px;
}
.wrapper div:nth-child(1),
.wrapper div:nth-child(2) {
border-color: red;
}
.wrapper div:nth-child(3),
.wrapper div:nth-child(4) {
border-color: blue;
}
.wrapper div:nth-child(5),
.wrapper div:nth-child(6) {
border-color: green;
}
.wrapper .yellow {
display: none;
}
#media (min-width:768px) {
.wrapper {
display: flex;
flex-wrap: wrap;
}
.wrapper div {
flex: 1 1 33%;
}
.wrapper div:nth-child(1) {
order: 1;
}
.wrapper div:nth-child(2) {
order: 5;
}
.wrapper div:nth-child(3) {
order: 2;
}
.wrapper div:nth-child(4) {
order: 6;
}
.wrapper div:nth-child(5) {
order: 3;
}
.wrapper div:nth-child(6) {
order: 7;
}
.wrapper .yellow {
display: block;
border-color: yellow;
order: 3;
flex: 0 0 100%;
text-align: center;
}
}
<div class="wrapper">
<div>col 1 header</div>
<div>col 1 contents</div>
<div>col 2 header</div>
<div>col 2 contents</div>
<div>col 3 header</div>
<div>col 3 contents</div>
<div class="yellow">div with full width</div>
</div>
I'm trying to achieve a certain fluid layout where the content of each DIVs are centered vertically and horizontally. But, my middle row (A, B, C) keeps on having vertical and/or horizontal alignment issues.
The goal is to have it work like this:
Note: If there's a way I can have the option to set the Mobile layout's "C" area fluid as well (without having to change the HTML, just the CSS, so that I can test which option works best), that'd be a bonus!
Here's a snippet of the HTML:
<div class="page">
<div class="col col-top">top</div>
<div class="col col-mid">
<div class="col col-left">
<div class="centerBox"><div class='debugBox'></div></div>
</div>
<div class="col col-center">
<div class="centerBox"><div class='debugBox'></div></div>
</div>
<div class="col col-right">
<div class="centerBox"><div class='debugBox'></div></div>
</div>
</div>
<div class="col col-bottom">bottom</div>
</div>
I'm not sure if the "wrapper" DIVs with the "centerBox" class is really necessary (they're set as display: table-cell while each col class are set to display: table to behave like tables, but this causes issues to place those areas with position: absolute and % values for their left / right / top / bottom properties.
For instance, if the "C" area is set to display: table, this happens:
And if I change the "C" area to display: block;, then it fills that full center area, but...
... the horizontal and vertical alignment breaks inside of it.
Would using "Ghost" DIV elements (as discussed in this css-tricks article, "Centering in the Unknown" by Chris Coyier ) be any better to get the correct alignment?
Ok, this solution works without a framework, pure CSS using flexbox. As long as the layout is horizontal, C has a fixed width. When it is mobile, C takes up the whole width and has a variable height.
header,
footer {
padding: 10px;
background-color: lightblue;
}
main {
display: flex;
flex-direction: row;
}
main > div {
padding: 10px;
background-color: tomato;
flex-grow: 1;
min-height: 40px;
display: flex;
align-items: center;
}
main > div:nth-child(2) {
background-color: olive;
}
.fixed {
width: 400px;
}
#media (max-width: 768px) {
main {
flex-direction: column;
}
.fixed {
width: auto;
}
}
<header>Top</header>
<main>
<div>A</div>
<div class="fixed">C</div>
<div>B</div>
</main>
<footer>Bottom</footer>
Here is a pen (drag the border to see the mobile layout):
Codepen
Here are the styles for the code you have provided. The one thing to keep in mind is your middle column, being a fixed width, is what helps with the calc() function. 50% of HALF the width of the middle container. This will not work in IE 8 or less, so you'll have to write a JS solution if you care about those browsers.
.page {
width: 100%;
position: relative;
}
.col-top {
background: #0f0;
width: 100%;
height: 50px;
}
.page .col-mid {
width: 100%;
display: table;
}
.page .col-mid .col {
width: calc(50% - 250px);;
height: 100px;
background: #f00;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.page .col-mid .col-center {
width: 500px;
background: #00f;
}
.debugBox {
display: inline-block;
width: 20px;
height: 20px;
background: #000;
vertical-align: middle;
}
.col-bottom {
clear: both;
height: 50px;
background: #0f0;
}
and a working example here:
https://jsfiddle.net/g45pwedd/
And you don't need some of the container elements, as you stated.
UPDATE
Sorry, forgot to add for responsive. I wasn't sure if you still needed vertical align for responsive or not. This solution removes vertical align, as I doubt it's needed on a mobile display anyways:
#media (max-width: 768px) {
.page .col-mid .col {
display: block;
width: 100%;
}
}
https://jsfiddle.net/g45pwedd/2/
In bootstrap 4
to center the childs horizontally, use bootstrap-4 class
justify-content-center
to center the childs vertically, use bootstrap-4 class
align-items-center
but remember don't forget to use d-flex class with these
it's a bootstrap-4 utility class, like so
<div class="d-flex justify-content-center align-items-center" style="height:100px;">
<span class="bg-primary">MIDDLE</span>
</div>
Note: make sure to add bootstrap-4 utilities if this code does not work