I want to divide the screen into six part with bootstrap like the shape below
You can use vh css unit to specify the viewport height for each column.
HTML:
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">1</div>
<div class="col-sm-6">2</div>
<div class="col-sm-6">3</div>
<div class="col-sm-6">4</div>
<div class="col-sm-6">5</div>
<div class="col-sm-6">6</div>
</div>
</div>
CSS:
#media (min-width: 768px) {
.col-sm-6 {
height: 33.33vh;
}
}
.container-fluid .col-sm-6 {
border: 1px solid black;
background: green;
height: 100vh;
color: white;
}
#media (min-width: 768px) {
.container-fluid .col-sm-6 {
height: 33.33vh;
}
}
<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">1</div>
<div class="col-sm-6">2</div>
<div class="col-sm-6">3</div>
<div class="col-sm-6">4</div>
<div class="col-sm-6">5</div>
<div class="col-sm-6">6</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 sameHeight">
</div>
<div class="col-md-6 sameHeight">
</div>
<div class="col-md-6 sameHeight">
</div>
<div class="col-md-6 sameHeight">
</div>
<div class="col-md-6 sameHeight">
</div>
<div class="col-md-6 sameHeight">
</div>
</div>
</div>
You can use twitter bootstrap classes like this and give each div same height.
.sameHeight{
height:30px;
}
Related
I have the following snippet (open snippet as full page) :
#container_1{
margin-top: 50px;
margin-bottom: 150px;
}
.block1{
background: green;
margin-bottom: 15px;
color: #FFFFFF;
}
#moving_block{
z-index: 0;
background-color: purple;
color: #FFFFFF;
}
#footer{
background-color: gray;
height: 5000px;
color: #FFFFFF;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div id="container_1" class="container">
<div class="col-md-5 col-md-offset-1">
<div class="row block1">
<div class="col-md-8">
<p>TEXT</p>
</div>
</div>
<div class="row block1">
<div class="col-md-8">
<p>TEXT</p>
</div>
</div>
<div class="row block1">
<div class="col-md-8">
<p>TEXT</p>
</div>
</div>
<div class="row block1">
<div class="col-md-8">
<p>TEXT</p>
</div>
</div>
<div class="row block1">
<div class="col-md-8">
<p>TEXT</p>
</div>
</div>
</div>
<div class="col-md-4">
<div id="moving_block" class="col-md-3 affix">
<div class="row">
<p>TEXT</p>
</div>
</div>
</div>
</div>
<section id="footer">
MY FOOTER
</section>
I would like to stop the purple block when he encounter the last green block.
This can be done using position:sticky.
I consider bootstrap V4 for this since there is builtin function for sticky. I also simplified the code to keep only the relevant one for the demo:
#container_1 {
margin-top: 50px;
margin-bottom: 150px;
}
.block1 {
background: green;
color: #FFFFFF;
}
.block1:not(:last-child) {
margin-bottom: 15px;
}
#moving_block {
background-color: purple;
color: #FFFFFF;
}
#footer {
background-color: gray;
height: 5000px;
color: #FFFFFF;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
<div id="container_1" class="container">
<div class="row">
<div class="col-5 col-offset-1">
<div class="row block1">
<p>TEXT</p>
</div>
<div class="row block1">
<p>TEXT</p>
</div>
<div class="row block1">
<p>TEXT</p>
</div>
<div class="row block1">
<p>TEXT</p>
</div>
<div class="row block1">
<p>TEXT</p>
</div>
</div>
<div class="col-6">
<div id="moving_block" class="overflow-auto position-sticky sticky-top">
<p>TEXT</p>
</div>
</div>
</div>
</div>
<section id="footer">
MY FOOTER
</section>
Trying to Get this Grid format
Hello, I am currently new to using bootstrap 4 and am trying to get the format above.
This is what I am currently trying so far....
<div class="container">
<div class="row">
<div class="col-md-4" >1</div>
<div class="col-md-8">2</div>
<div class="col-md-8 ">3</div>
</div>
</div>
Here you go!
.content {
min-height: 100px;
background: #ccc;
}
<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="container">
<div class="row">
<div class="col-4">
<div class="row h-100">
<div class="col-12 h-100">
<div class="content h-100">1</div>
</div>
</div>
</div>
<div class="col-8">
<div class="row">
<div class="col-12 mb-3 pl-0">
<div class="content">2</div>
</div>
<div class="col-12 pl-0">
<div class="content">3</div>
</div>
</div>
</div>
</div>
</div>
.one, .two, .three{
border: solid 2px gray;
min-height: 150px;
font-weight: bold;
}
.one{
background: lightblue;
}
.two{
background: lightgreen;
}
.three{
background: pink;
}
<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-sm-5 one">1</div>
<div class="col-sm-7">
<div class="row">
<div class="col-sm-8 two">2</div>
</div>
<div class="row">
<div class="col-sm-8 three">3</div>
</div>
</div>
</div>
</div>
I'm trying to make a grid view of columns.
Here is my code:
.pink{
background: pink;
}
.yellow{
background: yellow;
}
.gray{
background: gray;
}
.blue{
background: blue;
}
.green{
background: green;
}
.red{
background: red;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="container"> <div class="row">
<div class="col-md-3 ">
<div class="col-md-12 pink">test</div>
<div class="col-md-12 yellow">test</div>
</div>
<div class="col-md-3">
<div class="col-md-12 gray">test</div>
</div>
<div class="col-md-6 ">
<div class="col-md-12 blue">test</div>
<div class="col-md-6 green">test</div>
<div class="col-md-6 red">test</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="col-md-12 green">test</div>
</div>
<div class="col-md-6">
<div class="col-md-12 pink">test</div>
</div>
<div class="col-md-3">
<div class="col-md-12 gray">test</div>
</div>
</div>
</div>
The column in gray should be of height as column pink and yellow.
The bottom Pink column is also not of full width.
Does anyone know why is this happening?
Thanks for any help.
HTML
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="content">1x1</div>
</div>
<div class="col-md-4">
<div class="content">1x2</div>
</div>
<div class="col-md-4">
<div class="content">1x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="content">2x1</div>
</div>
<div class="col-md-4">
<div class="content">2x2</div>
</div>
<div class="col-md-4">
<div class="content">2x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="content">3x1</div>
</div>
<div class="col-md-4">
<div class="content">3x2</div>
</div>
<div class="col-md-4">
<div class="content">3x3</div>
</div>
</div>
</div>
CSS
.container {
text-align: center;
display: flex;
flex-direction: column;
}
.content {
background-color: #1A1919;
color: white;
height: 400px;
width: 300px;
}
.row{
padding: 5px;
}
I have managed to make vertical spaces between the columns by adding padding to the rows. But now the horizontal spaces between the contents are ways too much. How can I configure the spacing between them?
That large horizontal space is because of the fixed width of the content class if you remove that, you'll see it grow.
You can set the width of the content in % or add a margin to the content class.
.container {
text-align: center;
}
.content {
background-color: #1A1919;
color: white;
height: 400px;
}
.row{
padding:15px;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-4 col4">
<div class="content">1x1</div>
</div>
<div class="col-md-4 col4">
<div class="content">1x2</div>
</div>
<div class="col-md-4 col4">
<div class="content">1x3</div>
</div>
</div>
<div class="row ">
<div class="col-md-4 col4">
<div class="content">2x1</div>
</div>
<div class="col-md-4 col4">
<div class="content">2x2</div>
</div>
<div class="col-md-4 col4">
<div class="content">2x3</div>
</div>
</div>
<div class="row col4 col4">
<div class="col-md-4 col4">
<div class="content">3x1</div>
</div>
<div class="col-md-4 col4">
<div class="content">3x2</div>
</div>
<div class="col-md-4">
<div class="content">3x3</div>
</div>
</div>
</div>
CSS Grid to achieve that layout you desire:
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 5px;
position:absolute;
left:50%;
transform:translateX(-50%);
width:80%;
}
.item {
background-color: gray;
text-align: center;
font-size: 30px;
min-height:100px;
max-width: 350px;
}
<div class="grid-container">
<div class="item">1x1</div>
<div class="item">1x2</div>
<div class="item">1x3</div>
<div class="item">2x1</div>
<div class="item">2x2</div>
<div class="item">2x3</div>
<div class="item">3x1</div>
<div class="item">3x2</div>
<div class="item">3x3</div>
</div>
Using flexbox:
.flex-container {
display: flex;
/*Generates a flexbox layout with default flex direction as row */
width: 100%;
/* Not really required */
align-items: center;
/*Aligns contents vertically */
justify-content: center;
/*Aligns contents horizontally */
text-align: center;
/*Aligns further text in the center */
}
.item {
background-color: gray;
text-align: center;
font-size: 30px;
min-height: 400px;
width: 300px;
margin: 5px;
}
<div class="flex-container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<div class="flex-container">
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
<div class="flex-container">
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
Use float:left; with class content as below:
.container {
text-align: center;
display: flex;
flex-direction: column;
}
.content {
float: left;
background-color: #1A1919;
color: white;
height: 400px;
width: 300px;
}
.row{
padding: 5px;
}
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="content">1x1</div>
</div>
<div class="col-md-4">
<div class="content">1x2</div>
</div>
<div class="col-md-4">
<div class="content">1x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="content">2x1</div>
</div>
<div class="col-md-4">
<div class="content">2x2</div>
</div>
<div class="col-md-4">
<div class="content">2x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="content">3x1</div>
</div>
<div class="col-md-4">
<div class="content">3x2</div>
</div>
<div class="col-md-4">
<div class="content">3x3</div>
</div>
</div>
</div>
If I'm reading your request correctly, you are just asking how to make it look like the boxes are in the center of the page, and they are evenly spaced. see if this is what you're looking for:
.container {
text-align: center;
display: flex;
flex-direction: column;
}
.content {
background-color: #1A1919;
color: white;
height: 400px;
width: 300px;
}
.col-md-4 {
margin: 5px -10px 0px -4px;;
}
play with the numbers until you get the desired location.
Though I would strongly suggest that you add your own class in addition to col-md-4 to the boxes, which will prevent this new setting to col-md-4 from affecting any future use of this bootstrap class.
in other words . . .
CSS:
.container {
text-align: center;
display: flex;
flex-direction: column;
}
.content {
background-color: #1A1919;
color: white;
height: 400px;
width: 300px;
}
.box-move {
margin: 5px -10px 0px -4px;;
}
and HTML:
<div class="container">
<div class="row">
<div class="col-md-4 box-move">
<div class="content">1x1</div>
</div>
<div class="col-md-4 box-move">
<div class="content">1x2</div>
</div>
<div class="col-md-4 box-move">
<div class="content">1x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4 box-move">
<div class="content">2x1</div>
</div>
<div class="col-md-4 box-move">
<div class="content">2x2</div>
</div>
<div class="col-md-4 box-move">
<div class="content">2x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4 box-move">
<div class="content">3x1</div>
</div>
<div class="col-md-4 box-move">
<div class="content">3x2</div>
</div>
<div class="col-md-4 box-move">
<div class="content">3x3</div>
</div>
</div>
</div>
You can remove a lot of the stuff there and simplify it to make it responsive width a set margin:
.contents {
background-color: black;
color: white;
height: 500px;
margin: 20px 0px;
}
<div class="container-fluid text-center">
<div class="row">
<div class="col-md-4">
<div class="contents">1x1</div>
</div>
<div class="col-md-4">
<div class="contents">1x2</div>
</div>
<div class="col-md-4">
<div class="contents">1x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="contents">2x1</div>
</div>
<div class="col-md-4">
<div class="contents">2x2</div>
</div>
<div class="col-md-4">
<div class="contents">2x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="contents">3x1</div>
</div>
<div class="col-md-4">
<div class="contents">3x2</div>
</div>
<div class="col-md-4">
<div class="contents">3x3</div>
</div>
</div>
</div>
</div>
I got give a jsfiddle that asked the following:
Four Column Layout: Using a Bootstrap class, edit these divs from stacked to a 4 column layout
HTML:
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
<div class="c"></div>
<div class="a"></div>
<div class="d"></div>
<div class="b"></div>
CSS:
div{
height: 50px;
min-width: 50px;
}
div.a{
background: #00FF00;
}
div.b{
background: #1234FF;
}
div.c{
background: #FbbF00;
}
div.d{
background: #FF3344;
}
For my answer I did the following:
HTML:
<div class="row-fluid">
<div class="span 3">
<div class="a"></div>
<div class="b"></div>
</div>
<div class="span 3">
<div class="c"></div>
<div class="d"></div>
</div>
<div class="span 3">
<div class="c"></div>
<div class="a"></div>
</div>
<div class="span 3">
<div class="d"></div>
<div class="b"></div>
</div>
CSS:
div{
height: 50px;
min-width: 50px;
display: inline-block;
}
div.a{
background: #00FF00;
}
div.b{
background: #1234FF;
}
div.c{
background: #FbbF00;
}
div.d{
background: #FF3344;
}
But I was told I was wrong with no explanation. Does anyone know how to achieve four stacked columns using bootstrap for the above code?
Here you go with the solution https://jsfiddle.net/yczxm9px/1/
.div{
height: 50px;
}
div.a{
background: #00FF00;
}
div.b{
background: #1234FF;
}
div.c{
background: #FbbF00;
}
div.d{
background: #FF3344;
}
<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-xs-3 col-sm-3 col-md-3 col-lg-3 div a">
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 div b">
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 div c">
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 div d">
</div>
</div>
</div>
All the class are bootstrap class.
xs for Extra Small Screen
sm for Small Screen
md for Medium Screen
lg for Large Screen.