My grid setup now is as follows:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<div class='col-md-12 col-sm-12 col-xs-12'>
<div class='col-md-9 col-sm-9 col-xs-12 text-center' style="height:200px;background-color:#0077CC; border-right:2px solid white; border-bottom: 2px solid white">
DIV 1
</div>
<div class='col-md-3 col-sm-3 col-xs-12'style="height:320px;background-color:#0077CC; border-right:2px solid white; border-bottom: 2px solid white">
DIV 2
</div>
<div class='col-md-9 col-sm-9 col-xs-12 text-center' style="height:200px;background-color:#0077CC; border-right:2px solid white; border-bottom: 2px solid white">
DIV 3
</div>
</div>
My current output is
I want to get rid of the white space between div 1 and div 3. I don't want to merge div 1 and div3 because in mobile mode div 2 goes below div 3.
My expected outcome is
How can I achieve this in bootstrap?
Its quite simple: below is a demo for the same using bootstrap 4.
A grid must be wrapped inside a container and a col always inside a row.
div {
background: skyblue;
border: 1px solid blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-12 col-md-8">
<div class="row">
<div class="col-12">
DIV 1
</div>
<div class="col-12 d-block d-md-none">
DIV2 on small
</div>
<div class="col-12">
DIV 3
</div>
</div>
</div>
<div class="col-md-4 d-none d-md-block">
DIV 2
</div>
</div>
</div>
Here is a JSFIDDLE link to play around with
How about this
<div class="row">
<div class="col-sm-9">
<div>
div 1
</div>
<div class="visible-xs">
div 2
</div>
<div>
div 3
</div>
</div>
<div class="col-sm-3 hidden-xs">
div 2
</div>
</div>
Here's a JSfiddle https://jsfiddle.net/rutmws7a/
Related
I want to create a layout with bootstrap where I need one column to be equal to two columns vertically. I think it would be better understood if you take a look at visual representation.
Also, I want it to be responsive to the next column would wrap below this layout on smaller devices.
You have to structure your HTML accordingly.
Try this code snippet.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="row">
<div class="col" style="border:1px solid #ccc">Left Column</div>
<div class="col">
<div class="row">
<div class="col" style="border:1px solid #ccc">Right Column Row 1</div>
</div>
<div class="row">
<div class="col" style="border:1px solid #ccc">Right Column Row 2</div>
</div>
</div>
</div>
Try below:
CSS:
<style>
div{
border:1px solid black;
}
.row, .container{
border: none;
}
</style>
HTML:
<div class="container">
<div class="row">
<div class="col-sm-4">1</div>
<div class="col-sm-8">
<div class="row">
<div class="col-sm-6">2</div>
<div class="col-sm-6">3</div>
</div>
<div class="row">
<div class="col-sm-6">4</div>
<div class="col-sm-6">5</div>
</div>
</div>
</div>
</div>
I'm trying to replicate a grid made in Excel using bootstrap grid system. What I managed to get so far is this:
.col-sm-5{
border:1px solid red;
height:20%;
}
.col-sm-2{
border:1px solid blue;
}
.col-sm-1{
border:1px solid grey;
}
.col-sm-4{
border:1px solid green;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<body>
<div class="container">
<div class="row">
<div class="col-sm-5">Graph</div>
<div class="col-sm-2">Box1</div>
<div class="col-sm-2">Box2</div>
<div class="col-sm-2">Box3</div>
<div class="col-sm-1">Box4</div> <!-- will be empty -->
</div>
<div class="row">
<div class="col-sm-4">Graph Extra 1</div>
<div class="col-sm-4">Graph Extra 2</div>
<div class="col-sm-4">Graph Extra 3</div>
</div>
</div>
</body>
The layout I'm trying to replicate is this:
layout
So basically , I tried using <div class="w-100"></div> but from the results I've seen, it's probably not what I'm looking for as it moves everything on a new line.
So I would like to add another column under Box 1 , another 2 under Box 2 and then for the box 3 I guess I would increase the height to match the other columns.
I'm trying to find the best way , the responsive way to accomplish this.
Also , does anyone know how could I accomplish a replica of this excel chart? Would chart.js work along with angularjs for the data feed?
Thank you!
Something like this?
[class^='col-sm'] {
border: 1px solid #ccc;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<body>
<div class="container">
<div class="row">
<div class="col-sm-5">
BOX GRAPH
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-6">
<div class="row">
<div class="col-sm-12">
BOX 1
</div>
<div class="col-sm-12">
BOX 2
</div>
</div>
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-12">
BOX 1
</div>
<div class="col-sm-12">
BOX 2
</div>
<div class="col-sm-12">
BOX 3
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-1">
LIKE BOX
</div>
<!-- will be empty -->
</div>
<div class="row">
<div class="col-sm-4">Graph Extra 1</div>
<div class="col-sm-4">Graph Extra 2</div>
<div class="col-sm-4">Graph Extra 3</div>
</div>
</div>
</body>
To subdivide containers you can insert a row again followed by col-12 for a full column:
.col-sm-5{
border:1px solid red;
height:120px;
}
.col-sm-2{
border:1px solid blue;
}
.col-sm-1{
border:1px solid grey;
}
.col-sm-4{
border:1px solid green;
}
.col-12{
border:1px solid orange;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<body>
<div class="container">
<div class="row">
<div class="col-sm-5">Graph</div>
<div class="col-sm-2">Box1</div>
<div class="col-sm-2">
<div class="row">
<div class="col-12">
Box2 (A)
</div>
</div>
<div class="row">
<div class="col-12">
Box2 (B)
</div>
</div>
</div>
<div class="col-sm-2">Box3</div>
<div class="col-sm-1">Box4</div> <!-- will be empty -->
</div>
<div class="row">
<div class="col-sm-4">Graph Extra 1</div>
<div class="col-sm-4">Graph Extra 2</div>
<div class="col-sm-4">Graph Extra 3</div>
</div>
</div>
</body>
I am trying to make a responsive web-layout like :
Upon resizing I would want the skills to be next to one another underneath the intro:
The problem is mainly at the intro and skill boxes, I can't seem to get them to adjust the way I want: https://jsfiddle.net/aq9Laaew/20858/
HTML:
<div class="container">
<div class="row">
<div class="col text-center">HEAD</div>
</div>
<div class="row">
<div class="col">
INTRO
</div>
<div class="col p-0">
<div class="col m-0">SKILLS</div>
<div class="col m-0">SKILLS</div>
<div class="col m-0">SKILLS</div>
</div>
</div>
<div class="row">
<div class="col">
EDUCATION
</div>
<div class="col">
EXPERIENCE
</div>
</div>
<div class="row">
<div class="col">OTHER</div>
</div>
</div>
CSS:
.row {
background: #f8f9fa;
margin:10px;
}
.col {
border: solid 1px #6c757d;
margin: 10px;
}
.row, .col {
min-width: 120px;
}
They keep setting underneath each other which i only want when the screen is extra small. this is simple but i just cant figure it out...
I tried adding col-4 for intro (since intro should expand wider than skill) and messed with the columns more on the skill box to no luck..
There are a few issues that are preventing you from getting the desired layout:
cols must be the immediate child of a row ... the skills need to be wrapped in another row.
Use col-sm to allow columns to stack vertically on the smaller layout.
Don't adjust margins on the rows or cols as it will break the way the grid works.
Working demo: https://www.codeply.com/go/0g48AjUW4E
<div class="container">
<div class="row">
<div class="col p-0 text-center">HEAD</div>
</div>
<div class="row">
<div class="col-sm p-0">
INTRO
</div>
<div class="col-md-auto p-0">
<div class="row no-gutters">
<div class="col col-sm col-md-12">SKILLS</div>
<div class="col col-sm col-md-12">SKILLS</div>
<div class="col col-sm col-md-12">SKILLS</div>
</div>
</div>
</div>
<div class="row">
<div class="col p-0">
ED
</div>
<div class="col p-0">
EXPERIENCE
</div>
</div>
<div class="row">
<div class="col p-0">OTHER</div>
</div>
</div>
CSS:
.row {
background: #f8f9fa;
}
.col,.col-sm {
border: solid 1px #6c757d;
}
First, when you separate into multiple cols you should wrap them inside a row ( so you have display:flex )
Second, you need to add classes to your columns to set how you want them to appear on different screen sizes. Note that as of bootstrap4 col-xs does not exist. Use col simple instead and overwrite it on larger screens.
In the example below i have used:
col-lg-8 and col-12 on the INTRO section.
col-lg-4 and col-12 on the Skills column wrapper.
col-lg-12 and col-4 on the Skills columns.
Also added a row to wrap the Skills columns
See below or jsFIddle
.row {
background: #f8f9fa;
margin: 10px;
}
[class*="col-"] {
border: solid 1px #6c757d;
}
.row,
[class*="col-"] {
min-width: 120px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container">
<div class="row">
<div class="col text-center">HEAD</div>
</div>
<div class="row">
<div class="col-lg-8 col-12">
INTRO
</div>
<div class="col-lg-4 col-12 p-0">
<div class="row mx-0">
<div class="col-lg-12 col-4 m-0">SKILLS</div>
<div class="col-lg-12 col-4 m-0">SKILLS</div>
<div class="col-lg-12 col-4 m-0">SKILLS</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
EDUCATION
</div>
<div class="col">
EXPERIENCE
</div>
</div>
<div class="row">
<div class="col">OTHER</div>
</div>
</div>
You need to wrap skill boxes in a div and give it classes d-flex
flex-wrap
By doing this, you will get the result without giving negative margin
col-md-8 col-sm-12 classes in intro div will make it 100% for
smaller device
No need to make any css changes
.row {
background: #f8f9fa;
margin:10px;
}
.col {
border: solid 1px #6c757d;
margin: 10px;
}
.row, .col {
min-width: 120px;
}
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col text-center">HEAD</div>
</div>
<!-- Changes here -->
<div class="row">
<div class="col-md-8 col-sm-12">
INTRO
</div>
<div class="col p-0">
<div class="d-flex flex-wrap">
<div class="col-4 col-md-12 m-0">SKILLS</div>
<div class="col-4 col-md-12 m-0">SKILLS</div>
<div class="col-4 col-md-12 m-0">SKILLS</div>
</div>
</div>
</div>
<!-- Changes Ends here -->
<div class="row">
<div class="col">
EDUCATION
</div>
<div class="col">
EXPERIENCE
</div>
</div>
<div class="row">
<div class="col">OTHER</div>
</div>
</div>
I would use a media query for this.
https://www.w3schools.com/css/css3_mediaqueries.asp
That is, keep your layout how you want it now as it is, then in the media query, just rearrange the layout to what you want it become on screen re-size.
This question already has answers here:
Add spacing between vertically stacked columns in Bootstrap 4
(6 answers)
Closed 4 years ago.
How I want it to look like:
I'm trying to add horizontal and vertical space between the columns in BS4 but it keeps either messing breakpoints around (black or red) or the breakpoints of bootstrap. Is there any easy way to add space? I've tried the new margin settings of BS4, but it didn't really help (messed up the heading and background-color). Also, the 2 horizontal columns should have the same height.
btw. If you run the snippet, the columns don't display correctly because of the size of the snippet output. That's what it should look like on non-mobile: screenshot (or expand the snippet)
* {
color: white;
}
.black {
background-color: black;
}
.red {
background-color: red;
}
nav {
background-color: antiquewhite;
margin: 0px;
}
.row {}
.head {
background-color: aqua;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" >
<nav class="navbar-static-top">
Nav
</nav>
<div class="container-fluid">
<div class="row p-1">
<div class="col black">
<div class="row">
<div class="col head">
HEADING 0 COLUMN
</div>
</div>
<p>aaaa<br>
aaaa</p>
</div>
</div>
<div class="row row-eq-height p-1">
<div class="col-md-6 black">
<div class="row">
<div class="col head">
HEADING 1 COLUMNS BLACK
</div>
</div>bbbb<br>
bbbb<br>
</div>
<div class="col-md-6 red">
<div class="row">
<div class="col head">
HEADING 2 CLOUMNS RED
</div>
</div>cccc
</div>
</div>
<div class="row p-1">
<div class="col black">
dddd
</div>
</div>
<div class="row p-1">
<div class="col black">
eeee
</div>
</div>
<div class="row row-eq-height p-1">
<div class="col-md-6 black">
<div class="row">
<div class="col head">
HEADING 3 COLUMNS BLACK
</div>
</div>ffff<br>
ffff<br>
</div>
<div class="col-md-6 red">
<div class="row">
<div class="col head">
HEADING 4 CLOUMNS RED
</div>
</div>hhhh
</div>
</div>
</div>
For spacing Bootstrap 4 has responsive spacing classes p-* (for padding) and m-* (for margins).
So, in your case, you could experiment by adding p-1 or maybe p-2 to all your columns to achieve the desired effect.
Note: The Bootstrap spacing classes are based on rem units, not on px because px is the old and outdated way of doing things when it comes to responsive design and accessibility.
Here's the reference link for you:
https://getbootstrap.com/docs/4.0/utilities/spacing/
The following code snippet produces the desired result by using nesting as well as the m-1 class to create margins around the columns:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
* {
color: white;
}
.black {
background-color: black;
}
.red {
background-color: red;
}
nav {
background-color: antiquewhite;
margin: 0px;
}
.head {
background-color: aqua;
}
</style>
<div class="container-fluid">
<div class="row">
<div class="col-12 col-md m-1">
<div class="row">
<div class="col black">
<div class="row">
<div class="col head">
HEADING 0 COLUMN
</div>
</div>
<p>aaaa<br>
aaaa</p>
</div>
</div>
</div>
</div>
<div class="row row-eq-height">
<div class="col-12 col-md m-1">
<div class="row">
<div class="col black">
<div class="row">
<div class="col head">
HEADING 1 COLUMNS BLACK
</div>
</div>
bbbb<br>
bbbb<br>
</div>
</div>
</div>
<div class="col-12 col-md m-1">
<div class="row h-100">
<div class="col red">
<div class="row">
<div class="col head">
HEADING 2 CLOUMNS RED
</div>
</div>cccc
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-md m-1">
<div class="row">
<div class="col black">
dddd
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-md m-1">
<div class="row">
<div class="col black">
eeee
</div>
</div>
</div>
</div>
<div class="row row-eq-height">
<div class="col-12 col-md m-1">
<div class="row">
<div class="col black">
<div class="row">
<div class="col head">
HEADING 3 COLUMNS BLACK
</div>
</div>
ffff<br>
ffff<br>
</div>
</div>
</div>
<div class="col-12 col-md m-1">
<div class="row h-100">
<div class="col red">
<div class="row">
<div class="col head">
HEADING 4 CLOUMNS RED
</div>
</div>hhhh
</div>
</div>
</div>
</div>
</div>
I'm trying to make proper order of three bootstrap's columns but I can achive it only for small devices. On desktop devices it only works fine if "important" div has hight greater than "profile" div but I have situation when "important" div has hight less than "profile". In that situation my "other" tab positions below "important" div, but not below "profile" div as it should.
How can I solve this?
Thanks
.profile {
background-color: blue;
border: 1px solid black;
}
.important {
background-color: red;
border: 1px solid black;
}
.other {
background-color: green;
border: 1px solid black;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-4 profile">
PROFILE DATA<br>
1<br>
2
</div>
<div class="col-xs-12 col-md-8 important pull-right">
IMPORTANT DATA
</div>
<div class="col-xs-12 other col-md-4">
OTHER DATA
</div>
</div>
</div>
<hr>
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-4 profile">
PROFILE DATA
</div>
<div class="col-xs-12 col-md-8 important pull-right">
IMPORTANT DATA<br>
1<br>
2
</div>
<div class="col-xs-12 other col-md-4">
OTHER DATA
</div>
</div>
</div>
bootstrap per row hold 12 column maximum. And you give each row 16 columnRead Bootstrap Grid
.profile {
background-color: blue;
border: 1px solid black;
}
.important {
background-color: red;
border: 1px solid black;
}
.other {
background-color: green;
border: 1px solid black;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-4 profile">
PROFILE DATA<br>
1<br>
2
</div>
<div class="col-xs-12 col-md-4 important pull-right">
IMPORTANT DATA
</div>
<div class="col-xs-12 other col-md-4">
OTHER DATA
</div>
</div>
</div>
<hr>
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-4 profile">
PROFILE DATA
</div>
<div class="col-xs-12 col-md-4 important pull-right">
IMPORTANT DATA<br>
1<br>
2
</div>
<div class="col-xs-12 other col-md-4">
OTHER DATA
</div>
</div>
</div>
Something like this?
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-4 col-lg-4 blue">
PROFILE DATA
<br> 1
<br> 2
</div>
<div class="col-sm-12 col-md-8 col-lg-8 red">
IMPORTANT DATA
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-4 col-lg-4 green">
OTHER DATA
</div>
</div>
http://codepen.io/Psyll1/pen/XjBQNp
Friend of mine helped me to solve this problem. Thanks Rados Pavlicevic!
I only need to add
style="clear: left;"
on my OTHER DATA div.
Here is a working code sample:
.profile {
background-color: blue;
border: 1px solid black;
}
.important {
background-color: red;
border: 1px solid black;
}
.other {
background-color: green;
border: 1px solid black;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-4 profile">
PROFILE DATA<br>
1<br>
2
</div>
<div class="col-xs-12 col-md-8 important pull-right">
IMPORTANT DATA
</div>
<div class="col-xs-12 other col-md-4" style="clear:left">
OTHER DATA
</div>
</div>
</div>
<hr>
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-4 profile">
PROFILE DATA
</div>
<div class="col-xs-12 col-md-8 important pull-right">
IMPORTANT DATA<br>
1<br>
2
</div>
<div class="col-xs-12 other col-md-4" style="clear:left">
OTHER DATA
</div>
</div>
</div>
Thanks!