Somehow I can not get out how to finish my code which I formatted as a list and need to format it as grid too which is switched by javascript.
My HTML Code below is used to list a content:
<div class="list">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">Right is next DIV</div>
<div class="col-lg-6 col-md-6 col-sm-5 col-xs-12">Right is next DIV</div>
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">I am the last DIV</div>
</div>
</div>
The CSS Code for the list. All other CSS is taken by bootstrap:
.styled_view div.list {
padding: 0;
width: 100%;
}
The same code should be used to show grid:
<div class="grid">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">Under me should be a DIV</div>
<div class="col-lg-6 col-md-6 col-sm-5 col-xs-12">Under me should be a DIV</div>
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">I am the last DIV</div>
</div>
</div>
The CSS for the grid:
.styled_view div.grid {
display: inline-block;
overflow: hidden;
vertical-align: top;
width: 19.4%;
}
The 19.4% for each part of gallery keeps the DIVs next to next. It will not push it to a new line. How could I solve it?
Do a row div.
Like this:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<div class="grid">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 bg-success">Under me should be a DIV</div>
<div class="col-lg-6 col-md-6 col-sm-5 col-xs-12 bg-danger">Under me should be a DIV</div>
</div>
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 bg-warning">I am the last DIV</div>
</div>
</div>
If your your list is dynamically generated with unknown number and your target is to always have last div in a new line set last div class to "col-xl-12" and remove other classes so it will always take a full row.
This is a copy of your code corrected so that last div always occupy a full row (I although removed unnecessary classes).
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="grid">
<div class="row">
<div class="col-sm-3">Under me should be a DIV</div>
<div class="col-md-6 col-sm-5">Under me should be a DIV</div>
<div class="col-xl-12">I am the last DIV and I always take a full row for my self!!</div>
</div>
</div>
Related
I've read the docs and watched some tutorials but can't figure out how to get exactly what I need. I will try to explain. I tried to post screen shots, but it said you have to have 10 reputation.
So for a large screen it should be 3 rows with 4 columns each. The third column in the second row should be divided into another grid that is identical to the big grid, 3 rows, 4 columns.
On mobile it should be one big column with the seventh one being the smaller grid.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
<script src="lib/js/jquery-1.11.2.min.js"></script>
<title>Untable</title>
</head>
<body>
<div class="container">
<h3>Untable</h3>
<p>Convert this 'table-based' design into a 'responsive bootstrap grid' design.</p>
<p>Add whatever css and javascript you need to accomplish this.</p>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">One</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">Two</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">Three</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">Four</div>
</div>
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">Five</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">Six</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<div class="row">
<div class="col-xs-3 col-md-3 col-lg-3 col-sm-3">One</div>
<div class="col-xs-3 col-md-3 col-lg-3 col-sm-3">Two</div>
<div class="col-xs-3 col-md-3 col-lg-3 col-sm-3">Three</div>
<div class="col-xs-3 col-md-3 col-lg-3 col-sm-3">Four</div>
</div>
<div class="row">
<div class="col-xs-3 col-md-3 col-lg-3 col-sm-3">One</div>
<div class="col-xs-3 col-md-3 col-lg-3 col-sm-3">Two</div>
<div class="col-xs-3 col-md-3 col-lg-3 col-sm-3">Three</div>
<div class="col-xs-3 col-md-3 col-lg-3 col-sm-3">Four</div>
</div>
<div class="row">
<div class="col-xs-3 col-md-3 col-lg-3 col-sm-3">One</div>
<div class="col-xs-3 col-md-3 col-lg-3 col-sm-3">Two</div>
<div class="col-xs-3 col-md-3 col-lg-3 col-sm-3">Three</div>
<div class="col-xs-3 col-md-3 col-lg-3 col-sm-3">Four</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">Eight</div>
</div>
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">Nine</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">Ten</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">Eleven</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">Twelve</div>
</div>
</div>
</body>
</html>
Additional CSS:
.container-fluid {
text-align: center;
border-style: solid;
}
.container {
text-align: center;
padding: 5px;
}
Edit: Well my reputation is 10 now (haha). So here is what I am trying to accomplish.
Mobile
Desktop
So what you're trying to do is totally possible - and you're on the right track to do it!
The most important thing to remember with bootstrap is to treat every 'col' as a brand-new section to work within. With that in mind, you can design with bootstrap on different levels and it will usually work as intended.
So in your case, the two levels to consider would be:
The top-level 12 columns, no matter what is in each one
Whatever is inside the 7th column
So for 1, you've approached it correctly! Simple set up your rows with the maximum number of columns you even plan to have in them as child-elements. As your greatest number is four in a row, you can totally do three rows with four columns in each (exactly as you did)!
For 2, again, you have the right approach. You would once again define three rows with three columns. However, this time you need to remember that you want those to STILL be in a 4-column per row configuration on xs size. As it is now, you have them re-sizing just like the top level columns, so when they are on an xl screen, they will each be full width. Instead, just give each column element in the second element a col-xs-3 class. That way they will always be aligned in the 'table format' you're looking for - even on a small screen size.
Example:
<div className="container-fluid">
<div className="row">
<div className="col-xs-12 col-md-3">
One
</div>
<div className="col-xs-12 col-md-3">
Two
</div>
<div className="col-xs-12 col-md-3">
Three
</div>
<div className="col-xs-12 col-md-3">
Four
</div>
</div>
<div className="row">
<div className="col-xs-12 col-md-3">
Five
</div>
<div className="col-xs-12 col-md-3">
Six
</div>
<div className="col-xs-12 col-md-3">
<div className="row">
<div className="col-xs-3">
Sub One
</div>
<div className="col-xs-3">
Sub Two
</div>
<div className="col-xs-3">
Sub Three
</div>
<div className="col-xs-3">
Sub Four
</div>
</div>
<div className="row">
<div className="col-xs-3">
Sub One
</div>
<div className="col-xs-3">
Sub Two
</div>
<div className="col-xs-3">
Sub Three
</div>
<div className="col-xs-3">
Sub Four
</div>
</div>
</div>
<div className="col-xs-12 col-md-3">
Eight
</div>
</div>
</div>
And that's it! You've got this :)
My whole code is this how to set spacing b/w the divs ?It must run smoothly on all devices
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="container" style="width:100%">
<div class="row" style="height:33%">
<div class="col-xs-3" style="height:100%;background-color:#003380;"></div>
<div class="col-xs-6 text-center"style="height:100%;background-color:#66a3ff;padding-left: 20px">Top </div>
<div class="col-xs-3 " style="height:100%;background-color:#cce0ff"></div>
</div>
<div class="row" style="height:33%">
<div class="col-xs-3" style="height:100%;background-color:#66a3ff"></div>
</div>
<div class="row" style="height:33%">
<div class="col-xs-3 " style="height:100%;background-color:#cce0ff">left</div>
<div class="col-xs-6 " style="height:100%;background-color:#66a3ff">Center</div>
<div class="col-xs-3 " style="height:100%;background-color:#003380">Right </div>
</div>
</div>
</body>
You could wrap another column around the elements, which makes that the padding of the wrapping column provides some sort of margin/spacing.
Is the below code something you are aiming for?
.spacing {
padding: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="container" style="width:100%">
<div class="row" style="height:33%">
<div class="col-xs-3 spacing">
<div class="col-xs-12" style="height:100%;background-color:#003380;"></div>
</div>
<div class="col-xs-6 spacing">
<div class="col-xs-12 text-center"style="height:100%;background-color:#66a3ff;padding-left: 20px">Top </div>
</div>
<div class="col-xs-3 spacing">
<div class="col-xs-12" style="height:100%;background-color:#cce0ff"></div>
</div>
</div>
<div class="row" style="height:33%">
<div class="col-xs-3 spacing">
<div class="col-xs-12" style="height:100%;background-color:#66a3ff"></div>
</div>
</div>
<div class="row" style="height:33%">
<div class="col-xs-3 spacing">
<div class="col-xs-12" style="height:100%;background-color:#cce0ff">left</div>
</div>
<div class="col-xs-6 spacing">
<div class="col-xs-12" style="height:100%;background-color:#66a3ff">Center</div>
</div>
<div class="col-xs-3 spacing">
<div class="col-xs-12" style="height:100%;background-color:#003380">Right </div>
</div>
</div>
</div>
</body>
EDIT:
Since you are looking for spacing in all directions (and not only left and right), you can just add an extra class to the wrappers called spacing and the following CSS: (see updated code snippet)
.spacing {
padding: 15px;
}
There are multiple ways to achieve that:
By wrapping your each col with another col
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" media="screen" />
</head>
<body>
<div class="container" style="width:100%">
<div class="row" style="height:33%">
<div class="col-xs-3"><div class="col-xs-12" style="height:100%;background-color:#003380;"></div></div>
<div class="col-xs-6"><div class="col-xs-12 text-center"style="height:100%;background-color:#66a3ff;padding-left: 20px">Top </div></div>
<div class="col-xs-3"><div class="col-xs-12 " style="height:100%;background-color:#cce0ff"></div></div>
</div>
<div class="row" style="height:33%">
<div class="col-xs-3"><div class="col-xs-12 " style="height:100%;background-color:#cce0ff">left</div></div>
<div class="col-xs-6"><div class="col-xs-12 " style="height:100%;background-color:#66a3ff">Center</div></div>
<div class="col-xs-3"><div class="col-xs-12 " style="height:100%;background-color:#003380">Right </div></div>
</div>
</div>
</body>
This will create default space of 30px between two column
If you wish to create more space then you can use col-xs-offset classes from bootstrap. But this will decrease the size of your columns
You can always use custom classes of your own to change the grid as you want
Easiest would be using a flexbox for the row and padding for the flex items.
.row {
display: flex;
justify-content: space-between;
}
.row div { padding: 1em; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container" style="width:100%">
<div class="row">
<div class="col-xs-3" style="background-color:#003380;">X</div>
<div class="col-xs-6 text-center" style="background-color:#66a3ff;">Top </div>
<div class="col-xs-3 " style="background-color:#cce0ff">X</div>
</div>
<div class="row">
<div class="col-xs-3" style="background-color:#66a3ff">X</div>
</div>
<div class="row">
<div class="col-xs-3 " style="background-color:#cce0ff">left</div>
<div class="col-xs-6 " style="background-color:#66a3ff">Center</div>
<div class="col-xs-3 " style="background-color:#003380">Right </div>
</div>
</div>
#Aviral Garg Please check following code. I have modified style properties in your code and added classes "common_row" & "common_box" in it, with some properties. You can adjust padding in "common_box" class & margin-bootom in "common_row" class according to your need. It will work fine on all devices as I have added grid classes in it. I hope you were expecting the same.
.common_row{
height:33%;
margin-bottom:10px;
}
.common_row .common_box{
padding:10px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container" style="width:100%">
<div class="row common_row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 common_box" style="background-color:#003380;"></div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-center common_box"style="background-color:#66a3ff;">Top </div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 " style="background-color:#cce0ff"></div>
</div>
<div class="row common_row" style="height:33%">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 common_box" style="background-color:#66a3ff"></div>
</div>
<div class="row common_row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 common_box" style="background-color:#cce0ff">left</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 common_box" style="background-color:#66a3ff">Center</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 common_box" style="background-color:#003380">Right </div>
</div>
</div>
If I am right, you want spacing between the divs of class row without a spacing between the container div and its child divs(div.row).
For this you can add bottom margins to all divs except the last div. This can be done as so:
div.row{
margin-bottom: [whatever amount of space you want]; //add bottom margin to the row divs
}
div.row:last-child{
margin-bottom: none; //remove bottom margin from the row div that happens to be the last child in its container(i.e. div.container)
}
If you want to have spacing between the childs of rows too:
div.row{
margin-bottom: [whatever amount of space you want]; //add bottom margin to the row divs
}
div.row:last-child{
margin-bottom: none; //remove bottom margin from the row div that happens to be the last child in its container(i.e. div.container)
}
div.col-xs-3{
margin: [top margin], 0, [bottom margin], 0;
}
div.col-xs-6{
margin: [topmargin], 0, [bottom margin], 0;
}
Try adding this class to your stylesheet
Pad-10{
padding:1%;
}
and then add the class to your divs
<div class="row Pad-10" style="height:33%">
How can I achive this behaviour on different screens. (Grey rectangles are divs with some content). Assuming, picture 1 (left) is normal, wide screen; picture 2 (middle) is small (netbook or tablet) screen; picture 3 (right) is mobile screen. I use bootstrap 3.
You could use the offset column and column ordering classes. Making sure to apply each at the appropriate screen/grid size.
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
div[class^="col-"] > div {
margin: 1rem 0;
min-height: 100px;
background-color: yellow;
}
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-0 col-md-push-4">
<div>2</div>
</div>
<div class="col-sm-6 col-md-4 col-md-pull-4">
<div>1</div>
</div>
<div class="col-sm-6 col-md-4">
<div>3</div>
</div>
</div>
</div>
Note: The extra DIV in the column DIVs is for illustrative purposes. Do whatever you need to do.
You just need to use pull push classes of bootstrap.also learn about col-*-offset-* classes.
To learn more check this site:
Twitter bootstrap official docs
This is an example how you can do it
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="row">
<div class="col-xs-12 col-md-12 col-lg-4 col-lg-push-4" style="height: 100px; background-color: red;">
2
</div>
<div class="col-xs-12 col-md-6 col-lg-4 col-lg-pull-4" style="height: 100px; background-color: blue;">
1
</div>
<div class="col-xs-12 col-md-6 col-lg-4" style="height: 100px; background-color: green;">
3
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-0 col-md-push-4">2</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-md-pull-4">1</div>
<div class="col-xs-12 col-sm-6 col-md-4">3</div>
</div>
I am trying to make a layout with three equal columns. In the third column I want two rows of two boxes of equal width. For some reason, the columns are not covering 1/3 width but rather the entire page width. I included my HTML and relevant CSS below.
<div id="about-me" class="container">
<div class="row">
<div class="sm-col-4 md-col-4 lg-col-4 xl-col-4"></div>
<div class="sm-col-4 md-col-4 lg-col-4 xl-col-4"></div>
<div class="sm-col-4 md-col-4 lg-col-4 xl-col-4">
<div class="row">
<div class="sm-col-6 md-col-6 lg-col-6 xl-col-6 simple-image-box"></div>
<div class="sm-col-6 md-col-6 lg-col-6 xl-col-6 simple-image-box"></div>
</div>
<div class="row">
<div class="sm-col-6 md-col-6 lg-col-6 xl-col-6 simple-image-box"></div>
<div class="sm-col-6 md-col-6 lg-col-6 xl-col-6 simple-image-box"></div>
</div>
</div>
</div>
</div>
Here is the CSS:
#about-me {
height: 100vh;
}
.simple-image-box {
height: 50px;
padding: 10px;
width: 40%;
color: cadetblue;
}
You wrote type-col-number instead of col-type-number.
HTML:
<div id="about-me" class="container">
<div class="row">
<div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"></div>
<div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"></div>
<div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"></div>
</div>
<div class="row">
<div class="col-sm-6 col-md-6 col-lg-6 col-xl-6 simple-image-box"></div>
<div class="col-sm-6 col-md-6 col-lg-6 col-xl-6 simple-image-box"></div>
</div>
<div class="row">
<div class="col-sm-6 col-md-6 col-lg-6 col-xl-6 simple-image-box"></div>
<div class="col-sm-6 col-md-6 col-lg-6 col-xl-6 simple-image-box"></div>
</div>
</div>
Consider this case
<div class="row">
<div class="col-md-3 col-sm-3 col-xs-3"></div>
<div class="col-md-6 col-sm-6 col-xs-6"></div>
<div class="col-md-3 col-sm-3 col-xs-3"></div>
</div>
In this case, suppose if I need to fill the first div (first column) within the parent div with a background of #FF0000 how can I do it? If I can do it in a regular way, that is by specifying the style="background-color:red", the background changes only for the content written within it. Not if I create another div inside it and set its height and width to 100% nothing happens. Why is it so? And how can I do it the correct way?
Use a
<div class="col-md-3 col-sm-3 col-xs-3"> </div>
And set the background color as you wish.
Simple and elegant.
Empty div has no height. Use height, min-height, padding-top or padding-bottom to make empty div visible. You may do it
by class for column
by class for row with :first-child
Bootstrap uses col-xs- for screens of any width if there are no other conditions. Therefore col-md-3 col-sm-3 col-xs-3 is equivalent to col-xs-3.
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
.make-first-div-red > div:first-child,
.make-it-red {
background-color: #f00;
min-height: 30px;
margin-bottom: 10px;
)
<div class="row make-first-div-red">
<div class="col-xs-3"></div>
<div class="col-xs-6"></div>
<div class="col-xs-3"></div>
</div>
<div class="row">
<div class="col-xs-3 make-it-red"></div>
<div class="col-xs-6"></div>
<div class="col-xs-3"></div>
</div>
<div class="row">
<div class="bg col-md-3 col-sm-3 col-xs-3">adadadadada</div>
<div class="col-md-6 col-sm-6 col-xs-6"></div>
<div class="col-md-3 col-sm-3 col-xs-3"></div>
</div>
and use this css
.bg{background:#FF0000}
and it will work