I'm using Bootstrap 4.1. I'd like to have a grid of cells (Box A-E) with some spacing in between them. If I set padding on each column, I also get padding on the left and right side that breaks alignment with other elements; I would like Box A and Box D to align with the left edge of Top Box, for example.
The documentation talks about using a negative margin to offset this but I couldn't figure out where to put it.
The set of boxes is dynamic (there could be dozens) and I'd like to apply consistent styling to all of them, rather than make modifications to specific boxes.
I also want to avoid making modifications to Top Box, which is a stand-in for many existing UI elements in my real page that cannot easily be changed.
Here's a JSFiddle:
https://jsfiddle.net/u5094cjb/2/
body {
margin: 1rem;
}
.box {
border: 1px solid black;
background-color: white;
margin-bottom: 0.1rem;
}
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<div class="container">
<!-- ideally don't change this part -->
<div class="row">
<div class="col">
<div class="box">Top Box</div>
</div>
</div>
<!-- change this part only -->
<div class="row">
<div class="col">
<div class="container">
<div class="row">
<div class="col-4 px-1">
<div class="box">Box A</div>
</div>
<div class="col-4 px-1">
<div class="box">Box B</div>
</div>
<div class="col-4 px-1">
<div class="box">Box C</div>
</div>
<div class="col-4 px-1">
<div class="box">Box D</div>
</div>
<div class="col-4 px-1">
<div class="box">Box E</div>
</div>
</div>
</div>
</div>
</div>
</div>
For what you're trying to accomplish it seems like you're using a bit "too much" code. I cleaned it up a bit so now that you only have two rows and added px-1 to your first col
body {
margin: 1rem;
}
.box {
border: 1px solid black;
background-color: white;
margin-bottom: 0.1rem;
}
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<div class="container">
<div class="row">
<div class="col px-1">
<div class="box">Top Box</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-4 px-1">
<div class="box">Box A</div>
</div>
<div class="col-4 px-1">
<div class="box">Box B</div>
</div>
<div class="col-4 px-1">
<div class="box">Box C</div>
</div>
<div class="col-4 px-1">
<div class="box">Box D</div>
</div>
<div class="col-4 px-1">
<div class="box">Box E</div>
</div>
</div>
</div>
Use the Bootstrap classes pr-1 & pl-0 instead of px-1 to Box A and Box D
For example,
<div class="col-4 px-1">
<div class="box">Box B</div>
</div>
<div class="col-4 px-1">
<div class="box">Box C</div>
</div>
<div class="col-4 pr-1 pl-0">
<div class="box">Box D</div>
</div>
<div class="col-4 px-1">
<div class="box">Box E</div>
</div>
Fiddle: https://jsfiddle.net/kongallis/cebqw7y8/2/
Related
I need to implement a cartesian plane with Bootstrap 4 and Flex. The desired output is something like the following image:
The plane is composed by a 10x10 matrix. Moreover I need a row containing the x labels and a column showing the y labels.
Here you are my code:
<div class="d-flex p-2" style="border: 1px solid black; width: 40%; margin-bottom: 50px;">
<div class="d-flex flex-row">
<div class="p-2 align-items-stretch">1</div>
</div>
<div class="d-flex flex-column">
<div class="p-2">1</div>
<div class="p-2">2</div>
<div class="p-2">3</div>
<div class="p-2">4</div>
<div class="p-2">5</div>
<div class="p-2">6</div>
<div class="p-2">7</div>
<div class="p-2">8</div>
<div class="p-2">9</div>
<div class="p-2">10</div>
<div class="p-2 align-items-stretch">11</div>
</div>
<div class="d-flex flex-column">
<div class="p-2">1</div>
<div class="p-2">2</div>
<div class="p-2">3</div>
<div class="p-2">4</div>
<div class="p-2">5</div>
<div class="p-2">6</div>
<div class="p-2">7</div>
<div class="p-2">8</div>
<div class="p-2">9</div>
<div class="p-2">10</div>
</div>
<!-- the same for the other 8 rows -->
</div>
And the associated css:
.p-2 {
border: 1px solid lightgray;
}
.p-2:before {
content:'';
float:left;
padding-top:100%;
}
The actual result is:
I have two problems:
the row number 11 should be stretched until the last column;
the grid items should adapt their size according to the available space
of the container.
How I can reach these goals? Thank you
You can use the Bootstrap grid like this...
Demo: https://www.codeply.com/go/sQA6tvHiZh
<div class="container text-center">
<div class="row">
<div class="col-md-8 mx-auto">
<div class="row">
<div class="col-1">y</div>
<div class="col-11">
<div class="row">
<div class="col">1
</div>
<div class="col">2
</div>
<div class="col">3
</div>
<div class="col">4
</div>
<div class="col">5
</div>
<div class="col">6
</div>
<div class="col">7
</div>
<div class="col">8
</div>
<div class="col">9
</div>
<div class="col">10
</div>
</div>
<!--/row-->
9 more row ...
<div class="row">
<div class="col">x
</div>
</div>
</div>
</div>
</div>
</div>
<!--container-->
</div>
I'm trying to arrange a div like this but can't get it to work.
What I'm getting is this
My thought was to keep the image in its own column and then split the other columns into smaller rows and insert there but that doesn't seem to work. Here's my code:
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
<div class="row d-flex w-100 justify-content-between products-div">
<div class="col-sm-1">
<img [src]="prod.imagePath" class="product-page-images">
</div>
<div class="row">
<div class="col-sm-10">
<h3 class="mb-1">{{prod.name}}</h3>
<p class="products-price-text">${{prod.price}}</p>
</div>
</div>
<div class="row">
<div class="col-sm-10">
<h5 class="mb-1">{{prod.seller}}</h5>
</div>
</div>
<div class="row">
<div class="col-sm-10">
<p class="mb-1">{{prod.description}}</p>
</div>
</div>
</div>
</a>
HTML
<div class="container">
<div class="row">
<div class="main-container clearfix">
<div class="col-md-1">
<div class="img-con">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Small-city-symbol.svg/348px-Small-city-symbol.svg.png" alt="" />
</div>
</div>
<div class="col-md-11">
<div class="row">
<div class="col-md-12">
<div class="clearfix">
<div class="pull-left">
<h3>Name</h3>
<small>Seller</small>
</div>
<div class="pull-right">
<h3>Price</h3>
</div>
</div>
</div>
<div class="col-md-12">
<div class="desc">
description
</div>
</div>
</div>
</div>
</div>
</div></div>
css
.main-container
{
border:1px solid ;
}
.img-con
{
height:100%;
width:100%;
}
.img-con img
{
max-width:inherit;
max-height:inherit;
height:100%;
width:100%;
}
.desc
{
border:1px solid;
}
reference link
and style accordingly.. hope this helps
I am wanting to line two panels up alongside each other.
I currently have one panel (12 wide) which is above and I want two panels to sit below it next to each other to be 6 wide) however the second panel won't line alongside the first panel:
HTML
.panel-heading {
background: #666;
color: #FF7800;
font-family: sans-serif;
}
.panel-body {
background: #999;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">
Panel Conent
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">
Panel Conent
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">
Panel Conent
</div>
</div>
</div>
</div>
</div>
I have tried floating the panel left but this has no effect, any help would be great. Thanks
You need to use only one container
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">
Panel Conent
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">
Panel Conent
</div>
</div>
<div class="col-sm-6">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">
Panel Conent
</div>
</div>
</div>
</div>
You don't need to make new rows for every panel, and you don't need a new container either.
Also, if your goal was to have this be a two-column thing on all screen sizes, you need to use the col-xs-* classes.
.panel-heading {
background: #666;
color: #FF7800;
font-family: sans-serif;
}
.panel-body {
background: #999;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">
Panel Conent
</div>
</div>
<div class="col-xs-6">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">
Panel Conent
</div>
</div>
<div class="col-xs-6">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">
Panel Conent
</div>
</div>
</div>
</div>
Bootstrap by default makes a row go full width.
Try moving both 6's into the same row, that should let them sit next to each other.
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body"> Panel Conent </div>
</div>
<div class="col-sm-6">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body"> Panel Conent </div>
</div>
</div>
</div>
I'm using Bootstrap 3 and trying to solve this what's mocked on the image. I used one row with two cols, and they are next to each other like in the image, but when I resize to mobile I want the right side to fall beneath the left. Any help is appreciated, thank you.
Code sample:
<div className="container">
<div className="row">
<div className="col-xs-4 col-offset-xs-1">
<h1>1</h1>
</div>
<div className="col-xs-4">
<div className="row">
<h1>2</h1>
</div>
</div>
.black{background-color:#000; height:320px;}
.red{background-color:#F00; height:100px;margin-bottom:10px;}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-xs-6">
<div class="row">
<div class="col-xs-12 black">
black
</div>
</div>
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-12 red">
one
</div>
</div>
<div class="row">
<div class="col-xs-12 red">
two
</div>
</div>
<div class="row">
<div class="col-xs-12 red">
three
</div>
</div>
</div>
</div>
</div>
Bootstrap allows nesting your elements easily, here you go: https://jsfiddle.net/denea/DTcHh/25594/
<div className="container">
<div class="row">
<div class="col-sm-6 col-xs-12" id="first">
<h1>1</h1>
</div>
<div class="col-sm-6 col-xs-12" id="second">
<div class="row">
<h1>2</h1>
</div>
<div class="row">
<h1>3</h1>
</div>
<div class="row">
<h1>4</h1>
</div>
</div>
</div>
and read this: http://getbootstrap.com/css/#grid-nesting
Bootstrap allows for nesting which will provide what you need:
<div class="row">
<div class="col-sm-6">
Left column
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-12">
Right column, row 1
</div>
</div>
<div class="row">
<div class="col-sm-12">
Right column, row 2
</div>
</div>
<div class="row">
<div class="col-sm-12">
Right column, row 3
</div>
</div>
</div>
</div>
More info here.
You can achieve this by using flexbox and media query
#media (max-width: 360px) {
.container > .row {
display:flex;
flex-flow: row-reverse wrap;
}
}
Demo: https://jsfiddle.net/xs3joev8/1/
I am working on a design for a website and practicing bootstrap in the meantime, so I am rather new to it. Now, I understand the grid division into 12 columns and then layering of elements into multiple rows and separating by column span. The question I have is how can I handle elements that span multiple rows next to the elements that span less.
Desired Layout Example
Now, on this example image, how would I accomplish the stacking of the 3 x 4 and the 3x2 and 3x3 blocks? Also, the elements shouldn't be resized vertically.
Since I am relatively new to Bootstrap and responsive design in general, I am open for other frameworks and/or workarounds.
Something like this needs quite a lot of nested containers to get your desired effect but it is all possible.
The heights of some of the elements is a little bit off but once content is filled out, it should look fine.
Below is a working example
div {
border: 1px solid #000;
box-sizing: border-box;
}
div div {
border: 1px solid #444;
}
div div div {
border: 1px solid #888;
}
div div div div {
border: 1px solid #bbb;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-1">1x1</div>
<div class="col-xs-1">1x1</div>
<div class="col-xs-1">1x1</div>
<div class="col-xs-1">1x1</div>
<div class="col-xs-1">1x1</div>
<div class="col-xs-1">1x1</div>
<div class="col-xs-1">1x1</div>
<div class="col-xs-1">1x1</div>
<div class="col-xs-1">1x1</div>
<div class="col-xs-1">1x1</div>
<div class="col-xs-1">1x1</div>
<div class="col-xs-1">1x1</div>
</div>
<div class="row">
<div class="col-xs-3">
<div class="row">
3x2
</div>
<div class="row">
3x3
</div>
</div>
<div class="col-xs-9">
<div class="row">
<div class="col-xs-4">
3x4
</div>
<div class="col-xs-8">
<div class="row">
<div class="col-xs-6">
3x2
</div>
<div class="col-xs-6">
3x2
</div>
<div class="col-xs-12">
6
</div>
<div class="col-xs-12">
6
</div>
</div>
</div>
<div class="col-xs-12">
<div class="row">
<div class="col-xs-4">
<div class="row">
<div class="col-xs-4">
1
</div>
<div class="col-xs-4">
1
</div>
<div class="col-xs-4">
1
</div>
</div>
</div>
<div class="col-xs-8">
<div class="row">
<div class="col-xs-2">
1
</div>
<div class="col-xs-2">
1
</div>
<div class="col-xs-2">
1
</div>
<div class="col-xs-2">
1
</div>
<div class="col-xs-2">
1
</div>
<div class="col-xs-2">
1
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Something like below. It is not complete HTML, but it can give you an idea as to how you can use the horizontal and vertical bootstrap grids (basically through nesting):
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div class='container'>
<div class='row'>
<div class='form-horizontal'>
<!--First Row-->
<div class='form-group'>
<div class='col-md-1'></div>
<div class='col-md-1'></div>
<div class='col-md-1'></div>
<div class='col-md-1'></div>
<div class='col-md-1'></div>
<div class='col-md-1'></div>
<div class='col-md-1'></div>
<div class='col-md-1'></div>
<div class='col-md-1'></div>
<div class='col-md-1'></div>
<div class='col-md-1'></div>
<div class='col-md-1'></div>
</div>
<!--Second Row-->
<div class='form-group'>
<div class='col-md-3'>
<div class='form-group'></div>
<div class='form-group'></div>
</div>
<div class='col-md-3'>
<div class='form-group'></div>
<div class='form-group'></div>
<div class='form-group'></div>
<div class='form-group'></div>
</div>
<div class='col-md-6'>
<div class='form-group'>
<div class='col-md-6'>
<div class='form-group'></div>
<div class='form-group'></div>
</div>
<div class='col-md-6'>
<div class='form-group'></div>
<div class='form-group'></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>