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
Related
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..
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 got 3 div with 33% width.
<div class="row">
<div class="col-md-4">a</div>
<div class="col-md-4">a</div>
<div class="col-md-4">a</div>
</div>
How can I restrict the 3rd div not to align with the other 2 divs, I want the first 2 div in a row and the 3rd div bottom side using CSS properties??
If you just want the third div to appear on the next line, or "bottom side", then just give it block level display, like so:
.col-md-4 {
display:inline-block;
width:33%;
height:100px;
background-color:red;
}
.block {
display:block;
}
<div class="row">
<div class="col-md-4">1</div>
<div class="col-md-4">2</div>
<div class="col-md-4 block">3</div>
</div>
If this is not what you want then please elaborate on your question.
This is my simple solution. I use CSS Grid in the following code.
HTML code:
<div class="row">
<div class="col-md-4">Text One</div>
<div class="col-md-4">Text Two</div>
<div class="col-md-4">Text Three</div>
</div>
CSS code:
.row {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 10px;
}
.row div:last-child {
grid-column: 1/3;
}
your code:
<div class="row">
<div class="col-md-4">a</div>
<div class="col-md-4">a</div>
<div class="col-md-4">a</div>
</div>
solution:
<div class="row">
<div class="col-md-4" style="display: inline-block;">a</div>
<div class="col-md-4" style="display: inline-block;">a</div>
<div class="col-md-4">a</div>
</div>
You can try this at your css
.col-md-4{
width:33.33%;
display:inline-block;
}
.col-md-4:nth-of-type(3){
display:block;
}
Your code:
<div class="row">
<div class="col-md-4">a</div>
<div class="col-md-4">a</div>
<div class="col-md-4">a</div>
</div>
Solution:
<div class="row">
<div class="col-md-4">a</div>
<div class="col-md-4">a</div>
<div class="col-md-5">a</div>
</div>
<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-6 text-center"> Col-4 </div>
<div class="col-6 text-center"> Col-4 </div>
<div class="col-12 text-center"> Col-12 </div>
</div>
<div class="row">
<div style="display:inline-block;" class="col-md-4">a</div>
<div style="display:inline-block;" class="col-md-4">a</div>
<div style="display:block;" class="col-md-4">a</div>
</div>
Set style of first 2 divs to display:inline-block; and 3rd one to display:block;
Working JSFiddle example
Try this out.
<style>
.col-md-4{
width: 100px;
height: 100px;
background-color: burlywood;
border : 1px solid black;
}
</style>
<div class="row">
<div class="col-md-4">a</div>
<div class="col-md-4">a</div>
<div class="col-md-4">a</div>
</div>
Since you are using bootstrap, it's easy to achieve this as all you need to do is it exceed the 12 cols for a row concept.
Just add col-md-12 to your last div.
<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-4">a1</div>
<div class="col-4">a2</div>
<div class="col-12">a3</div>
</div>
I try to nest multiple rows in a column.
In the end it should look like
The problem is that I centered the whole thing vertically and the css rule seems to apply also on my child rows. How can I stop this alignment and make it look like I want?
Here is what I got so far:
.vertical-center {
min-height: 100%;
min-height: 100vh;
display: flex;
align-items: center;
}
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<div class="row justify-content-center vertical-center">
<div class="col-auto">
<span id="field1">text</span>
</div>
<div class="col-auto">
<span id="field2">text</span>
</div>
<div class="col-auto">
<span id="field3">text</span>
</div>
<div class="col-auto">
<span id="field4">=</span>
</div>
<div class="col-auto">
<div class="row">
<div class="col">
<input type="text" id="field5"/>
</div>
</div>
<div class="row">
<div class="col-auto">
<div id="xy">Bar</div>
</div>
</div>
<div class="row">
<div class="col-auto">
<div id="h">Bar2</div>
</div>
</div>
</div>
</div>
</body>
</html>
Align the container instead of aligning the content. Apply your CSS to the body
body {
min-height: 100%;
min-height: 100vh;
display: flex;
align-items: center;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container"> <!-- this is mandatory when using row -->
<div class="row justify-content-center">
<div class="col-auto">
<span id="field1">text</span>
</div>
<div class="col-auto">
<span id="field2">text</span>
</div>
<div class="col-auto">
<span id="field3">text</span>
</div>
<div class="col-auto">
<span id="field4">=</span>
</div>
<div class="col-auto">
<div class="row">
<div class="col">
<input type="text" id="field5" />
</div>
</div>
<div class="row">
<div class="col-auto">
<div id="xy">Bar</div>
</div>
</div>
<div class="row">
<div class="col-auto">
<div id="h">Bar2</div>
</div>
</div>
</div>
</div>
</div>
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>