How can I add margin between elements without breaking the row in this fiddle
This question has been asked before here However I couldn't find a proper answer, because adding padding is not possible in my case.
.row {
background: #f8f9fa;
margin-top: 20px;
}
.item {
border: solid 1px #6c757d;
padding: 10px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-6 item m-1">2</div>
<div class="col-6 item">4</div>
</div>
<div class="row">
<div class="col-8 item m-2">2</div>
<div class="col-4 item">1</div>
</div>
</div>
well u can do this by adding a new div inside ur col
.row {
background: #f8f9fa;
margin-top: 20px;
}
.item {
border: solid 1px #6c757d;
padding: 10px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container">
<div class="row">
<div class="col-6"><div class="m-1 item">2</div></div>
<div class="col-6"><div class="m-1 item">4</div></div>
</div>
<div class="row">
<div class="col-8 "><div class="m-2 item">4</div></div>
<div class="col-4"><div class="m-2 item">6</div></div>
</div>
</div>
Related
I have a list of items that I am presenting in a flexbox table. My actual display has more columns, but in this question, I'll use just 2 - the 'category' and 'item' names. The data is presented in category order. Where items repeat for a category, only the first item for the category should have the category listed, for subsequent ones I want the category cell empty. As this can scroll off the top of the screen, I'd like to make this cell sticky, as I do for the headings.
However, as the cell is a child of the row, not the container of the table, it scrolls up with the row. You can see this in the first table in the example below, the '.first_item' CSS class does not hold the caption in place.
I concluded that the only way to achieve this is to insert a div before the row to present the category and make this sticky - class cat_head in the 2nd table in the example below. This works, however, it knocks the first item down and does not align where I want it to. I therefore set its height to 0px, which brings the item row back into alignment, but then have to put the text within an absolute positioned div within this so that I can set a background colour to stop text for the categories from overlaying each other.
It works really well and is exactly how I'd like it to operate - except that because the height is set to 0px, the absolute div extends below the bottom of the table as it is scrolled off the top of the screen and overwrites what is below it - you can see in the example it overwrites "Text below".
I also have to manually add an 'alt' class name on alternate rows to get background colouring rather than relying on ':nth-child(even)' - but I can live with this.
Has anyone got any suggestions for stopping it falling out of the bottom of the container, or indeed a better way of doing this? Thanks.
.pad {
height: 50px;
background-color: yellow;
}
.fill {
height: 120vh;
background-color: yellow;
}
.container {
background-color:#ffffff;
}
.row {
display: flex;
flex-flow:row wrap;
}
.head {
position: sticky;
top: 0px;
background-color: #e0e0e0;
font-weight: bold;
border-bottom: 1px solid #000000;
height: 24px;
z-index: 3;
}
.cell {
flex: 0 0 100px;
padding: 5px;
}
.first_item {
position: sticky;
top: 25px;
z-index: 2;
}
.table_1 .row:nth-child(even),
.table_2 .alt {
background-color: #f0f0f0;
}
.cat_head {
position: sticky;
top: 25px;
height:0px;
overflow: visible;
z-index: 2;
}
.cat_text {
position: absolute;
width: 80px;
padding: 0;
background-color: rgba(8,156,213,1);
color: #ffffff;
border: 1px solid #000000;
border-radius:5px;
margin:2px 0 0 4px;
text-align:center;
}
<div class="pad"></div>
<div class="container table_1">
<div class="row head">
<div class="cell">Category</div>
<div class="cell">Item</div>
</div>
<div class="row cat">
<div class="cell first_item">Category 1</div>
<div class="cell">Item 1-1</div>
</div>
<div class="row">
<div class="cell"></div>
<div class="cell">Item 1-2</div>
</div>
<div class="row">
<div class="cell"></div>
<div class="cell">Item 1-3</div>
</div>
<div class="row cat">
<div class="cell first_item">Category 2</div>
<div class="cell">Item 2-1</div>
</div>
<div class="row">
<div class="cell"></div>
<div class="cell">Item 2-2</div>
</div>
</div>
<div class="pad">Text below</div>
<div class="container table_2">
<div class="row head">
<div class="cell">Category</div>
<div class="cell">Item</div>
</div>
<div class="cat_head">
<div class="cat_text">Category 1</div>
</div>
<div class="row alt">
<div class="cell"></div>
<div class="cell">Item 1-1</div>
</div>
<div class="row">
<div class="cell"></div>
<div class="cell">Item 1-2</div>
</div>
<div class="row alt">
<div class="cell"></div>
<div class="cell">Item 1-3</div>
</div>
<div class="cat_head">
<div class="cat_text">Category 2</div>
</div>
<div class="row">
<div class="cell"></div>
<div class="cell">Item 2-1</div>
</div>
<div class="row alt">
<div class="cell"></div>
<div class="cell">Item 2-2</div>
</div>
</div>
<div class="fill">Text below</div>
OK. So I went to sleep on it and realised that the sticky positioning when scrolling off the top of the viewport is based on the bottom of its div. Therefore, I need to shift the div below the row it is on - as its 0px high and that's where its 'bottom' should be.
I also need to move the contained absolute div above it rather than below so its bottom aligns to it. I initially put a -24px top margin on the absolute div, but this stopped the sticky positioning on its parent for some reason. I therefore put a -24px top margin on the sticky div, which worked. However, it also dragged the next row up, so I also added a 24px bottom margin which resolved that.
I also added a containing div around each category's rows so that the sticky heading scrolls off screen when the next category gets to the top.
All working fine.
.pad {
height: 50px;
background-color: yellow;
}
.fill {
height: 120vh;
background-color: yellow;
}
.container {
background-color:#ffffff;
}
.row {
display: flex;
flex-flow:row wrap;
}
.head {
position: sticky;
top: 0px;
background-color: #e0e0e0;
font-weight: bold;
border-bottom: 1px solid #000000;
height: 24px;
z-index: 3;
}
.cell {
flex: 0 0 100px;
padding: 5px;
}
.alt {
background-color: #f0f0f0;
}
.cat_head {
position: sticky;
top: 27px;
height:0px;
margin: -24px 0 24px 4px;
overflow: visible;
z-index: 2;
}
.cat_text {
position: absolute;
width: 80px;
padding: 0;
background-color: rgba(8,156,213,1);
color: #ffffff;
border: 1px solid #000000;
border-radius:5px;
text-align:center;
}
<div class="pad"></div>
<div class="container">
<div class="row head">
<div class="cell">Category</div>
<div class="cell">Item</div>
</div>
<div>
<div class="row alt">
<div class="cell"></div>
<div class="cell">Item 1-1</div>
</div>
<div class="cat_head">
<div class="cat_text">Category 1</div>
</div>
<div class="row">
<div class="cell"></div>
<div class="cell">Item 1-2</div>
</div>
<div class="row alt">
<div class="cell"></div>
<div class="cell">Item 1-3</div>
</div>
</div>
<div>
<div class="row">
<div class="cell"></div>
<div class="cell">Item 2-1</div>
</div>
<div class="cat_head">
<div class="cat_text">Category 2</div>
</div>
<div class="row alt">
<div class="cell"></div>
<div class="cell">Item 2-2</div>
</div>
</div>
</div>
<div class="fill">Text below</div>
All the code can be found in the JS fiddle below I thought it would be easier that way. I am trying to display the Flexbox items horizontally, so that the first 8 and 4 columns are beside each other.
I then want to add the 12 on a totally new line, underneath the 8 and 4 and not beside it, extending the pages length horiztonally and having that horrible scroll.
What have I tried?
.container {
display: flex; /* or inline-flex */
}
So the above code just makes it all go side by side, no matter how many columns you do or if it exceeds 12, I want it to work pretty much exactly like bootstraps grid system if that makes sense.
https://jsfiddle.net/d35g2mra/1/
Wrap only the wanted divs in div and dispaly:flex them (in the same way you can wrap the images section if you want to)
body {
background-color: whitesmoke;
font-family: sans-serif;
margin: 0;
}
#nav {
background-color: #333;
color: #ffff;
padding: 16px;
}
hr {
margin-top: 20px;
margin-bottom: 20px;
}
.wrap{
display:flex;
}
<!DOCTYPE html>
<html lang="en-GB">
<div id="nav">
<div class="container">
<div class="col-md-12">
lol
</div>
</div>
</div>
<div class="container"><br><br><br>
<div class="wrap">
<div class="col-md-8">
I need to put a pretty picture here.
</div>
<div class="col-md-4">
I will place some sort of box here.
</div>
</div>
<hr>
<br>
<div class="col-md-12">
Trending Pages
<div class="col-md-2"><img src="https://phpsocial.com/demo/thumb/a/112/112/1171031268_435428908_1738535611.png"></div>
<div class="col-md-2"><img src="https://phpsocial.com/demo/thumb/a/112/112/1171031268_435428908_1738535611.png"></div>
<div class="col-md-2"><img src="https://phpsocial.com/demo/thumb/a/112/112/1171031268_435428908_1738535611.png"></div>
<div class="col-md-2"><img src="https://phpsocial.com/demo/thumb/a/112/112/1171031268_435428908_1738535611.png"></div>
</div>
</div>
You can do like this:
body {
background-color: whitesmoke;
font-family: sans-serif;
margin: 0;
overflow-x:hidden;
}
#nav {
background-color: #333;
color: #ffff;
padding: 16px;
}
hr {
margin-top: 20px;
margin-bottom: 20px;
}
<html lang="en-GB">
<head>
<title>{{ config('website.name') }}</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flexboxgrid/6.3.1/flexboxgrid.css" type="text/css">
</head>
<body>
<div id="nav">
<div class="container">
<div class="col-md-12">
lol
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-8">
<img src="https://phpsocial.com/demo/thumb/a/112/112/1171031268_435428908_1738535611.png">
</div>
<div class="col-md-4">
I will place some sort of box here.
</div>
</div>
<hr>
<div class="container">
<div class="col-md-12">
<span>Trending Pages</span>
<div class="row">
<div class="col-md-2">
<img src="https://phpsocial.com/demo/thumb/a/112/112/1171031268_435428908_1738535611.png">
</div>
<div class="col-md-2"><img src="https://phpsocial.com/demo/thumb/a/112/112/1171031268_435428908_1738535611.png"></div>
<div class="col-md-2"><img src="https://phpsocial.com/demo/thumb/a/112/112/1171031268_435428908_1738535611.png"></div>
<div class="col-md-2">
<img src="https://phpsocial.com/demo/thumb/a/112/112/1171031268_435428908_1738535611.png">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Is it possible to pull/push divs of a column from another column in Bootstrap grid system? For example:
At desktop view: it's like this way:
Parent Column 1 | Parent Column 2
First Content | Second Content
Third Content | Fourth Content
At mobile view, it's like this way:
Parent Column 1
First Content
Second Content
Parent Column 2
Third Content
Fourth Content
Please take a look on this fiddle to understand what I am trying to mean.Thanks in advance.
You can achieve it by using bootstrap's grid.
.first {
background: yellow;
height: 300px;
}
.second {
background: red;
height: 100px;
color: white;
}
.third {
background: green;
height: 300px;
color: white;
}
.fourth {
background: blue;
height: 100px;
color: white;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 col-xs-12 first">
FIRST
</div>
<div class="col-sm-6 col-xs-12 second">
SECOND
</div>
<div class="col-sm-6 col-xs-12 third">
THIRD
</div>
<div class="col-sm-6 col-xs-12 fourth">
FOURTH
</div>
</div>
</div>
Or you can use Masonry JS:
var $container = $('.masonry-container');
$container.masonry({
columnWidth: '.item',
itemSelector: '.item'
});
.first {
background: yellow;
height: 300px;
}
.second {
background: red;
height: 100px;
color: white;
}
.third {
background: green;
height: 300px;
color: white;
}
.fourth {
background: blue;
height: 100px;
color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.1.1/masonry.pkgd.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row masonry-container">
<div class="col-sm-6 col-xs-12 first item">
FIRST
</div>
<div class="col-sm-6 col-xs-12 second item">
SECOND
</div>
<div class="col-sm-6 col-xs-12 third item">
THIRD
</div>
<div class="col-sm-6 col-xs-12 fourth item">
FOURTH
</div>
</div>
</div>
I think the issue is more of a float problem because your columns have variable height. Create a special class to pull the 2nd and 3rd columnd right on larger screens..
#media (min-width: 992px) {
.pull-md-right {
float:right;
}
}
And, use it like this..
<div class="row">
<div class="col-md-6">
<div class="first">First</div>
</div>
<div class="col-md-6 pull-md-right">
<div class="second">Second</div>
</div>
<div class="col-md-6 pull-md-right">
<div class="third">Third</div>
</div>
<div class="col-md-6">
<div class="fourth">Fourth</div>
</div>
</div>
http://codeply.com/go/CYteNdheKS
In Bootstrap 4, responsive floats are included so you won't need the extra CSS.
I want to achieve a grid like the shown below:
I have been looking to Twitter Bootstrap grid system, but since it is oriented to rows, I can't see how to achieve this.
Is there any way of doing it, or should I stick to manually css?
You can nest Rows and cols:
<div class="row">
<div class="col-md-9">
<div class="row">
<div class="col-md-12">left top</div>
<div class="col-md-12">left bottom</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-12">right top</div>
<div class="col-md-12">right bottom</div>
</div>
</div>
</div>
See http://getbootstrap.com/css/#grid under "Nesting Columns"
You can still use Bootstrap grid with some custom styles:
.block {
border: 3px #222 solid;
padding: 10px;
margin-bottom: 10px;
}
.block-1 {
height: 100px;
}
.block-2 {
height: 50px;
}
.block-3 {
height: 50px;
}
.block-4 {
height: 100px;
}
<link data-require="bootstrap-css#*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<div class="container">
<div class="row">
<div class="col-xs-8">
<div class="block block-1">Block 1</div>
<div class="block block-2">Block 2</div>
</div>
<div class="col-xs-4">
<div class="block block-3">Block 3</div>
<div class="block block-4">Block 4</div>
</div>
</div>
</div>
Just set 2 parents width col-xs-* with children
main{padding: 20px}
section, article{display: inline}
article, div{border: 4px solid black; margin-bottom: 10px}
article:nth-child(1){height: 80px}
article:nth-child(2){height: 40px}
div:nth-child(1){height: 30px}
div:nth-child(2){height: 90px}
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<main class=row>
<section class="col-xs-8">
<article></article>
<article></article>
</section>
<aside class="col-xs-4">
<div></div>
<div></div>
</aside>
</main>
Read more about Grid system .
In some browsers, such as Safari 9, the following bootstrap grid is leaving a 1px gap on either side of the row element. Why is that?
.a {background-color:#eee}
.b {background-color:#ddd}
.row {background-color:red}
.vertical-align {
display: flex;
align-items: center;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-6 a">Hello</div>
<div class="col-xs-6 b">World</div>
</div>
</div>
<br><br>
<div class="container">
<div class="row vertical-align">
<div class="col-xs-6 a">Hello</div>
<div class="col-xs-6 b">World</div>
</div>
</div>
The gap is caused by the clearfix gap - content: " " - which is on pseudo elements of the bootstrap .row class.
To prevent the gap:
Remove the "row" class as well as the parents "container" class
or
Remove the clearfix pseudo element with:
div.vertical-align:before, div.vertical-align:after { display: none }
Note: Placing "div" before the class selector - .vertical-align - prevents the need for !important
The two examples
Without removing the row class
.a {
background-color: #eee
}
.b {
background-color: #ddd
}
.row {
background-color: red
}
.vertical-align {
display: flex;
align-items: center;
}
div.vertical-align:before,
div.vertical-align:after {
display: none;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-6 a">Hello</div>
<div class="col-xs-6 b">World</div>
</div>
</div>
<br>
<br>
<div class="container">
<div class="row vertical-align">
<div class="col-xs-6 a">Hello</div>
<div class="col-xs-6 b">World</div>
</div>
</div>
With the removal of the row class.
The class - .container - also needs to be removed.
.a {
background-color: #eee
}
.b {
background-color: #ddd
}
.row {
background-color: red
}
.vertical-align {
display: flex;
align-items: center;
}
div.vertical-align:before,
div.vertical-align:after {
display: none;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-6 a">Hello</div>
<div class="col-xs-6 b">World</div>
</div>
</div>
<br>
<br>
<div>
<div class="vertical-align">
<div class="col-xs-6 a">Hello</div>
<div class="col-xs-6 b">World</div>
</div>
</div>