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..
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.
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
I use bootstrap. Do I need separate rows with my own classes? Because if I don't I can't set the background of the section for example. Which piece of code is better?
<div class="container">
<nav class="row"></nav>
<section class="row">
<div class="col-sm-3">
some text
</div>
</section>
</div>
<div class="container">
<div class="row">
<nav></nav>
</div>
<div class="row">
<section>
<div class="col-sm-3">
some text
</div>
</section>
</div>
</div>
You can use both and change background of section as you prefer. Just add your own class and set css.
nav{
height:30px !important;
width:100%;
display:block;
background-color: red;
}
.containercolor{
background-color: black;
margin:0px;
}
.row{
margin: 0px !important;
}
.sectionrow{
height: 200px;
}
.colcolor{
background-color: green;
height:100%;
}
.sectionrow{
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav>
</nav>
<div class="container-flex containercolor">
<div class="row sectionrow">
<div class="col-xs-6">
</div>
<div class="col-xs-6 colcolor">
</div>
</div>
</div>
<div class="container-flex ">
<div class="row containercolor">
<nav></nav>
</div>
<div class="row">
<section class="sectionrow">
<div class="col-sm-3">
some text
</div>
</section>
</div>
</div>