enter image description herei need your help for my bootstrap website. I struggling around to get it working but always got this annoying grid issue? I dont know exactly what it is. The Output eats some of my colores boxes if i lower the size of the screen. (using Firefox, Bootstrap)
.row {
width:100%;
height:15rem;
background-color: green;
margin:0 auto;
margin-top: 3%;
}
.container{
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.col-md-4{
position: relative;
padding:5px;
height:100%;
}
.col-md-12{
height:100%;
}
<div class="container">
<h1>Hello World!</h1>
<div class="row">
<div class="col-md-4" style="background-color:yellow;">
<div class="col-md-12" style="background-color:lightyellow;">
<p>Lorem ipsum...</p>
</div>
</div>
<div class="col-md-4" style="background-color:red;">
<div class="col-md-12" style="background-color:darkred;">
<p>Lorem ipsum...</p>
</div>
</div>
<div class="col-md-4" style="background-color:blue;">
<div class="col-md-12" style="background-color:lightblue;">
<p>Lorem ipsum...</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4" style="background-color:purple;">
<div class="col-md-12" style="background-color:red;">
<p>Lorem ipsum...</p>
</div>
</div>
<div class="col-md-4" style="background-color:pink;">
<div class="col-md-12" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
</div>
<div class="col-md-4" style="background-color:lightblue;">
<div class="col-md-12" style="background-color:blue;">
<p>Lorem ipsum...</p>
</div>
</div>
</div>
</div>
As you can see in the picture below the 2end and 3rd items are hidden under the next row. What i'm doing wrong? The should line up under each otherafter i lower the display size. There should be 6 boxes inside but it only displays 4 of them.Full view should looks like this
elemts got eaten by each other why?Small view for smartpone
behind the red box is some other hidding. I tried alot and failed so hard. Maybe someone can help me.
left and right white space
The height on the row is causing your problems. You could move the height to be on the columns instead (or remove it entirely if you don't need them to be expanded like that).
.row {
width: 100%;
background-color: green;
margin: 0 auto;
margin-top: 3%;
}
.container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.col-md-4 {
position: relative;
padding: 5px;
height: 15rem;
}
.col-md-12 {
height: 15rem;
}
<div class="container">
<h1>Hello World!</h1>
<div class="row">
<div class="col-md-4" style="background-color:yellow;">
<div class="col-md-12" style="background-color:lightyellow;">
<p>Lorem ipsum...</p>
</div>
</div>
<div class="col-md-4" style="background-color:red;">
<div class="col-md-12" style="background-color:darkred;">
<p>Lorem ipsum...</p>
</div>
</div>
<div class="col-md-4" style="background-color:blue;">
<div class="col-md-12" style="background-color:lightblue;">
<p>Lorem ipsum...</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4" style="background-color:purple;">
<div class="col-md-12" style="background-color:red;">
<p>Lorem ipsum...</p>
</div>
</div>
<div class="col-md-4" style="background-color:pink;">
<div class="col-md-12" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
</div>
<div class="col-md-4" style="background-color:lightblue;">
<div class="col-md-12" style="background-color:blue;">
<p>Lorem ipsum...</p>
</div>
</div>
</div>
</div>
Related
I want to create a table using flexbox. The output should be like this:
The code I have tried is:
.row {
display: flex;
}
.field {
flex-grow: 1;
}
<div class="row">
<div class="field">Name</div>
<div class="field">DOB</div>
<div class="field">Address</div>
<div class="field">Telephone Number</div>
<div class="field">Sex</div>
</div>
<div class="row">
<div class="field">Peter Parker</div>
<div class="field">28/02/1991</div>
<div class="fieldgrow">
Lorem ipsum, or lipsum as it is sometimes known, is a dummy text.
</div>
<div class="field">1233</div>
<div class="field">M</div>
</div>
<div class="row">
<div class="field">Peter Parker</div>
<div class="field">28/02/1991</div>
<div class="fieldgrow">
Lorem ipsum, or lipsum as it is sometimes known, is a dummy text.
</div>
<div class="field">1233</div>
<div class="field">M</div>
</div>
I am a newbie to HTML and CSS. Where am I making a mistake? Can anyone please help?
You need to change your HTML and CSS slightly. This looks exactly like an HTML table:
.flex {
display: flex;
}
.row {
flex: 1;
border: 1px solid grey;
}
<div class="flex">
<div class="row">
Name
</div>
<div class="row">
DOB
</div>
<div class="row">
Address
</div>
<div class="row">
Telephone Number
</div>
<div class="row">
Sex
</div>
</div>
<div class="flex">
<div class="row">
Peter Parker
</div>
<div class="row">
28/02/1991
</div>
<div class="row">
Lorem ipsum, or lipsum as it is sometimes known, is a dummy text.
</div>
<div class="row">
1233
</div>
<div class="row">
M
</div>
</div>
<div class="flex">
<div class="row">
Peter Parker
</div>
<div class="row">
28/02/1991
</div>
<div class="row">
Lorem ipsum, or lipsum as it is sometimes known, is a dummy text.
</div>
<div class="row">
1233
</div>
<div class="row">
M
</div>
</div>
you can use CSS as for child div
.row {
display: flex;
flex-wrap: nowrap;
background-color: greenyellow
}
.row>div {
flex-grow: 1;
background-color: #f1f1f1;
width: 100px;
margin: 10px;
line-height: 75px;
font-size: 30px;
}
your table will be generated definatly
Currently I have this (except only 3 boxes next to each other)
However, I am trying to put a small header, an image, and a small description within each box. How can I go about doing this?
Example image
Below the code snippet:
.block {
display: inline-block;
width: 200px;
height: 200px;
background-color: lightgray;
}
.container {
text-align: center;
}
<div class="container">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
You can just add them as elements in your div:
.block {
display: inline-block;
width: 200px;
height: 200px;
background-color: lightgray;
}
.container {
text-align: center;
}
.block img {
width: 100px;
height: 100px;
}
<div class="container">
<div class="block">
<h3>Title 1</h3>
<img src="https://www.scania.org/wp-content/uploads/2018/10/article-10-2.jpg">
<p>Some text</p>
</div>
<div class="block">
<h3>Title 2</h3>
<img src="https://avatarfiles.alphacoders.com/121/121594.jpg">
<p>Some text</p>
</div>
<div class="block">
<h3>Title 2</h3>
<img src="https://i.imgur.com/8G3NXcW.gif">
<p>Some text</p>
</div>
</div>
You can just put them inside the "block" divs as elements. For example like this:
<div class="block">
<h1>Hello</h1>
<img src="asd">
<p>Some text, lorem etc.</p>
</div>
<div class="block">
<h1>Hello again</h1>
<img src="asd">
<p>Some epic text, lorem etc.</p>
</div>
<div class="block">
<h1>Hello hello</h1>
<img src="asd">
<p>Some even more exciting text, lorem etc.</p>
</div>
HTML PART
<div class="container">
<div class="block">
<div class="header">Title</div>
<div class="image"><img src="https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg" alt=""></div>
<div class="description">description</div>
</div>
<div class="block">
<div class="header">Title</div>
<div class="image"><img src="https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg" alt=""></div>
<div class="description">description</div>
</div>
<div class="block">
<div class="header">Title</div>
<div class="image"><img src="https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg" alt=""></div>
<div class="description">description</div>
</div>
<div class="block">
<div class="header">Title</div>
<div class="image"><img src="https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg" alt=""></div>
<div class="description">description</div>
</div>
</div>
CSS PART
.header {
width:100%;
float:left;
}
.image img {
width:100%;
float:left;
}
.description{
width:100%;
float:left;
}
This question already has answers here:
Flex-box: Align last row to grid
(35 answers)
Closed 4 years ago.
i have a container which contain some cards, I want each card to start at left border of container and end at right border , like the below code.
<html>
<style>
.container {
display: flex;
justify-content: space-between;
flex-direction: row;
flex-wrap: wrap;
}
.card{
border:1px solid black;
}
</style>
<body>
<div class="container">
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
</div>
</body>
</html>
but last 2 elements have too much space between them, how can I remove it??
I have tried adding margin-left/right to behave like I want but the corner cards don't touch the border. any help??
Edit: here is what i expect and
and what I get
This is because of the behavior of justify-content: space-between. Learn about the behavior of justify-content visit here
To achieve what you wanted you can set the container as block element and set the children to be floated like float:left.
To avoid the unwanted spaces I removed the margin-left of the .card:first-child and margin-right of the .card:last-child
You can specifically set the number of card content per a row by
setting a common width and clearing the margin space for
nth-child.Currently I made this code for 5 elements per row
.container {
display: block;
width: 100%;
}
.card {
border: 1px solid black;
float: left;
margin: 1px;
padding: 10px 3px;
/*setting width for each and every card element as well as -10px for removing the margin width for 5 elements*/
width: calc( 100% / 5 - 10px);
}
/*first element*/
.container .card:first-child {
margin-left: 0;
}
/*last element of the first row*/
.container .card:nth-child(5n) {
margin-right: 0;
}
/*first-element of the 2nd row*/
.container .card:nth-child(5n+1) {
margin-left: 0;
}
/*last element*/
.container .card:last-child {
margin-right: 0;
}
<div class="container">
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
</div>
I'm not quite sure I re-created your problem, but here is a codepen https://codepen.io/salallegra/pen/mQbBea that might help.
<html>
<style>
.container {
display: flex;
justify-content: space-between;
border-style: solid;
border-width: 1px;
border-color: red;
margin-left: 0px;
margin-right: 0px;
flex-direction: row;
flex-wrap: wrap;
}
.card {
border-style: solid;
border-width: 1px;
border-color: red;
}
body {
margin-left: 0;
margin-right: 0;
}
</style>
<body>
<div class="container">
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
</div>
</body>
</html>
I removed the left and right margin of the body and placed borders around all the cards, and the container itself.
I also checked different view port sizes in Chrome developer tools and the spacing looks fine at different sizes.
I am looking for ways to add in a 3x3 grid of circle icons to my website. Each icon needs to contain a caption text (including sub-caption text) and be spaced evenly apart. The center icons need to be in the center of the webpage.
I unfortunately have been stuck for the last couple of hours, and I have no idea on how to achieve this. I would appreciate any help.
Here is a mostly flexbox grid with square cells and centered content that will evenly space the circle/text.
* {
box-sizing: border-box; margin: 0; padding: 0;
}
.grid {
display: flex;
flex-wrap: wrap;
max-width: 960px;
width: 90%;
margin: auto;
background: #eee;
}
.cell {
flex-basis: 33.3%;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #fff;
}
.cell:before {
padding-bottom: 100%;
display: block;
content: '';
}
.circle {
background: #ccc;
border-radius: 50%;
width: 100px;
height: 100px;
margin: 0 auto 1em;
}
.inner {
text-align: center;
}
<div class="grid">
<div class="cell">
<div class="inner">
<div class="circle"></div>
<div class="caption">
<h2>text</h2>
<h3>sub</h3>
</div>
</div>
</div>
<div class="cell">
<div class="inner">
<div class="circle"></div>
<div class="caption">
<h2>text</h2>
<h3>sub</h3>
</div>
</div>
</div>
<div class="cell">
<div class="inner">
<div class="circle"></div>
<div class="caption">
<h2>text</h2>
<h3>sub</h3>
</div>
</div>
</div>
<div class="cell">
<div class="inner">
<div class="circle"></div>
<div class="caption">
<h2>text</h2>
<h3>sub</h3>
</div>
</div>
</div>
<div class="cell">
<div class="inner">
<div class="circle"></div>
<div class="caption">
<h2>text</h2>
<h3>sub</h3>
</div>
</div>
</div>
<div class="cell">
<div class="inner">
<div class="circle"></div>
<div class="caption">
<h2>text</h2>
<h3>sub</h3>
</div>
</div>
</div>
<div class="cell">
<div class="inner">
<div class="circle"></div>
<div class="caption">
<h2>text</h2>
<h3>sub</h3>
</div>
</div>
</div>
<div class="cell">
<div class="inner">
<div class="circle"></div>
<div class="caption">
<h2>text</h2>
<h3>sub</h3>
</div>
</div>
</div>
<div class="cell">
<div class="inner">
<div class="circle"></div>
<div class="caption">
<h2>text</h2>
<h3>sub</h3>
</div>
</div>
</div>
</div>
This is probably very simple, but my mind is getting tangled with trying to work this out. Spent an hour or so searching this up and it still isn't working.
My HTML code...
<div class="section-container light-bg">
<div class="container">
<div class="row">
<div class="col-md-12">
<h2 style="text-align:center;">Main Title Right Here</h2>
<h4 style="text-align:center;">Slogan text underneath</h4>
</div>
<div class="col-md-3 light-panel">
<h3>TITLE</h3>
<p>TEXT</p>
</div>
<div class="col-md-3 light-panel">
<h3>TITLE</h3>
<p>TEXT</p>
</div>
<div class="col-md-3 light-panel">
<h3>TITLE</h3>
<p>TEXT</p>
</div>
<div class="col-md-3 light-panel">
<h3>TITLE</h3>
<p>TEXT</p>
</div>
</div>
</div>
CSS
.section-container.light-bg {
background-color: #F5F5F5;
color: #444444;
}
.section-container .light-panel {
background-color: #ffffff;
border-radius:10px;
}
This is currently creating a row with 4 columns that are styled slightly.
Any help or explanation of how to correctly do this using Bootstrap 3 would be greatly appreciated :)
Demo Fiddle
The best approach is to add an inner container, then padding on the columns. This ensures Bootstraps functionality remains as intended.
HTML
<div class="section-container light-bg">
<div class="container">
<div class="row">
<div class="col-md-12">
<h2 style="text-align:center;">Main Title Right Here</h2>
<h4 style="text-align:center;">Slogan text underneath</h4>
</div>
<div class="col-md-3 light-panel">
<div class='inner'>
<h3>TITLE</h3>
<p>TEXT</p>
</div>
</div>
<div class="col-md-3 light-panel">
<div class='inner'>
<h3>TITLE</h3>
<p>TEXT</p>
</div>
</div>
<div class="col-md-3 light-panel">
<div class='inner'>
<h3>TITLE</h3>
<p>TEXT</p>
</div>
</div>
<div class="col-md-3 light-panel">
<div class='inner'>
<h3>TITLE</h3>
<p>TEXT</p>
</div>
</div>
</div>
</div>
CSS
.section-container.light-bg {
background-color: #F5F5F5;
color: #444444;
}
.inner {
background-color: #ffffff;
border-radius:10px;
padding:10px;
}
.col-md-3 {
padding:10px;
}
Alternatively
You can use calculated width/margins., no change to your HTML necessary.
E.g. the width of col-md-3 is 100/4=25%. Therefore you can reduce this, say to 20%, and allocate the remaing 5% to your margins.
.col-md-3 {
width:20%;
margin:0 2.5%;
}
I was facing the same issue; and the following worked well for me. Hope this helps someone landing here:
<div class="row">
<div class="col-md-6">
<div class="col-md-12">
Set room heater temperature
</div>
</div>
<div class="col-md-6">
<div class="col-md-12">
Set room heater temperature
</div>
</div>
</div>
This will automatically render some space between the 2 divs.