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>
Related
I created a bootstrap grid that has 3 rows with the following layout.
All I'm trying to do is add a bit of margin between them but as you can see, the columns and rows are not longer properly aligned.
Is there a way to fix it or maybe there's a better way to achieve what I want?
#featured {
margin-bottom: 15px;
}
.featured-1 {
height: 200px;
}
.featured-2 {
height: 50%;
margin-left: 5px;
}
.featured-3 {
height: 50%;
margin-left: 5px;
margin-top: 5px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<div class="container">
<div class="row featured-1" id="featured">
<div class="col-md-7 col-sm-12 bg-warning">
Featured 1
</div>
<div class="col-md-5">
<div class="row featured-2">
<div class="col-md-12 col-sm-12 bg-danger">
Featured 2
</div>
</div>
<div class="row featured-3">
<div class="col-md-12 col-sm-12 bg-success">
Featured 3
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12 bg-primary">For reference</div>
</div>
</div>
The official bootstrap document recommended the use of Gutter.
you can do this like below:
.featured-1 {
height: 200px;
}
.featured-2, .featured-3 {
height: 50%;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container">
<div class="row featured-1" id="featured">
<div class="col-md-7 col-sm-12 bg-warning">
Featured 1
</div>
<div class="col-md-5 px-4">
<div class="row featured-2">
<div class="col-md-12 col-sm-12 bg-danger">
Featured 2
</div>
</div>
<div class="row featured-3">
<div class="col-md-12 col-sm-12 bg-success gy-2">
Featured 3
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 bg-primary gy-2">For reference</div>
</div>
</div>
There's already padding on the columns, which acts as gutters. I'd put the background on your column content instead.
#featured {
margin-bottom: 15px;
}
.featured-1>div {
height: 200px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<div class="container">
<div class="row" id="featured">
<div class="col-7 featured-1">
<div class="bg-warning">Featured 1</div>
</div>
<div class="col-5 d-flex flex-column">
<div class="featured-2 flex-grow-1 bg-danger mb-1">Featured 2</div>
<div class="featured-3 flex-grow-1 bg-success mt-1">Featured 3</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="bg-primary">For reference</div>
</div>
</div>
</div>
i've been experimenting with the bootstrap grid system, than i encountred this issue with the "col-xxl" class, can you advise on why this happened and how to overcome this?
<style>
[class*="col"] {
padding: 1rem;
background-color: #33b5e5;
border: 2px solid #fff;
color: #fff;
}
</style>
<div class="alert alert-primary" role="alert">
A simple primary alert—check it out!
</div>
<div class="container-fluid text-center ">
<div class="row">
<div class="row">
<div class="col-xxl">col1-xxl</div>
<div class="col-xxl">col2-xxl</div>
</div>
<div class="col-xl">col1-xl</div>
<div class="col-xl">col2-xl</div>
</div><div class="row">
<div class="col-lg">col1-lg</div>
<div class="col-lg">col2-lg</div>
</div>
<div class="row">
<div class="col-md">col1-md</div>
<div class="col-md">col2-md</div>
</div>
<div class="row">
<div class="col-sm">col1-sm</div>
<div class="col-sm">col2-sm</div>
</div>
</div>
the code i worked on
You had an additional row class wrapped around your div(s). Additionally, you forgot to wrap a row class around your col-xl. See code snippet below:
[class*="col"] {
padding: 1rem;
background-color: #33b5e5;
border: 2px solid #fff;
color: #fff;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
<div class="container-fluid text-center ">
<div class="row">
<div class="col-xxl">col1-xxl</div>
<div class="col-xxl">col2-xxl</div>
</div>
<div class="row">
<div class="col-xl">col1-xl</div>
<div class="col-xl">col2-xl</div>
</div>
<div class="row">
<div class="col-lg">col1-lg</div>
<div class="col-lg">col2-lg</div>
</div>
<div class="row">
<div class="col-md">col1-md</div>
<div class="col-md">col2-md</div>
</div>
<div class="row">
<div class="col-sm">col1-sm</div>
<div class="col-sm">col2-sm</div>
</div>
</div>
You have placed class row 2 times which at col-xxl and the same is missing above col-xl..
please refer snippet and code for your reference..
also I've attached snap for details..
[class*="col"] { padding: 1rem; background-color: #33b5e5; border: 2px solid #fff; color: #fff; }
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
<div class="alert alert-primary text-center" role="alert">
A simple primary alert—check it out!
</div>
<div class="container-fluid text-center ">
<div class="row">
<div class="col-xxl">col1-xxl</div>
<div class="col-xxl">col2-xxl</div>
</div>
<div class="row">
<div class="col-xl">col1-xl</div>
<div class="col-xl">col2-xl</div>
</div>
<div class="row">
<div class="col-lg">col1-lg</div>
<div class="col-lg">col2-lg</div>
</div>
<div class="row">
<div class="col-md">col1-md</div>
<div class="col-md">col2-md</div>
</div>
<div class="row">
<div class="col-sm">col1-sm</div>
<div class="col-sm">col2-sm</div>
</div>
</div>
Thanks..
I have made this layout with bootstrap
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-md-2 leftsidebar">left</div>
<div class="col-md-8">
<div class="row">
<div class="col-md-12 header">header</div>
</div>
<div class="row">
<div class="col-md-12 content">content</div>
</div>
<div class="row">
<div class="col-md-12 footer">footer</div>
</div>
</div>
<div class="col-md-2 rightsidebar">right</div>
</div>
</div>
Content should always fill out the page, so I want to get something along the lines of:
Use code as below (run and see in full page):
html,body{
height:100%;
}
.leftsidebar{
background:orange;
}
.rightsideba{
background:green;
}
.vh-100{
height: 100vh!important;
}
.footer{
position: absolute;
bottom: 0;
width: 100%;
background:red;
}
.content{
background:skyblue;
height: calc(100% - (30px));
}
.vw-100{
width:100vw;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container-fluid h-100">
<div class="row">
<div class="col-md-2 leftsidebar vh-100">left</div>
<div class="col-md-8">
<div class="row header">
<div class="col-md-12 h-100">header</div>
</div>
<div class="row content">
<div class="col-md-12">content</div>
</div>
<div class="row footer">
<div class="col-md-12 h-100">footer</div>
</div>
</div>
<div class="col-md-2 rightsideba vh-100 vw-100">right</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.
I do not want divs to come side by side. how can i solve this
search about -- > false
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="row ">
<div class="col-md-8 "></div>
<div class="col-md-4 d-flex justify-content-start">
<div class="search">
<p>search</p>
</div>
<div class="about">
<p>about</p>
</div>
</div>
</div>
Have you tried a <br/> tag between the divs?
Remove class="col-md-4" from div
.search {border: 1px solid #000; display: block!important;}
.about {border: 1px solid #000; display: block!important;}
<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-md-8 ">
</div>
<div class="col-md-4">
<div class="search">
<p>search</p>
</div>
<div class="about">
<p>about</p>
</div>
</div>
</div>
on your CSS div { display: block; } , or you can give property to your classes, like:
.search { display: block;}
.about { display: block;}
if you want just to test if it works you can write it directly on the html, but change it to the CSS file as soon as you see that it works:
<div style="display: block;" class="search">
<p>search</p>
</div>
<div style="display: block;" class="about">
<p>about</p>
</div>
.search {border: 1px solid #000; display: block!important;}
.about {border: 1px solid #000; display: block!important;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row ">
<div class="col-md-8 ">
</div>
<div class="col-md-4 d-flex justify-content-start">
<div class="search">
<p>search</p>
</div>
<div class="about">
<p>about</p>
</div>
</div>
</div>
You can try adding this css style to the div elements:
div{
clear:both;
}
It works perfectly in my browser. <div> tag is a block element by default. I think you should update your browser instead.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row ">
<div class="col-md-8 ">
</div>
<div class="col-md-4">
<div class="search">
<p>search</p>
</div>
<div class="about">
<p>about</p>
</div>
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row ">
<div class="col-md-8 ">
</div>
<div class="col-md-4 d-flex justify-content-start">
<div class="search">
<p>search</p>
</div>
<div class="about">
<p>about</p>
</div>
</div>
</div>
d-flex justify-content-start -- if i add this code it does not work