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
Related
I am trying to create 6 icons that have text on the side that falls in two lines. Each icon should be 2 in a line before going on to the next row. See this image: https://imgur.com/a/AxW5aWb
My initial code attempt below which was followed up with a display: inline-block CSS on the text.
My issues are:
Getting the text on the right side to appear in two lines while remaining inline with the icon on the left
Creating multiple icons where two fall in a row at a time
<div class="section">
<img src="/uploads/2023/02/Aargang.svg" class="ikon1" alt="Test">
<div class="ikontext">
Year<br>
<strong>2011</strong>
</div>
</div>
An example using flex.
.container {
display: flex;
width: 320px;
flex-wrap: wrap; // this makes sure items are dropped to the next row when they are out of space
}
.item {
display: flex;
margin-bottom: 20px;
flex-basis: 50%; // this makes sure there are two items per row
}
.icon {
width: 40px;
height: 40px;
background-color: grey;
}
.text {
margin-left: 10px;
}
.text-bottom {
font-weight: bold;
}
<div class="container">
<div class="item">
<div class="icon"></div>
<div class="text">
<div class="text-top">text top</div>
<div class="text-bottom">text bottom</div>
</div>
</div>
<div class="item">
<div class="icon"></div>
<div class="text">
<div class="text-top">text top</div>
<div class="text-bottom">text bottom</div>
</div>
</div>
<div class="item">
<div class="icon"></div>
<div class="text">
<div class="text-top">text top</div>
<div class="text-bottom">text bottom</div>
</div>
</div>
<div class="item">
<div class="icon"></div>
<div class="text">
<div class="text-top">text top</div>
<div class="text-bottom">text bottom</div>
</div>
</div>
<div class="item">
<div class="icon"></div>
<div class="text">
<div class="text-top">text top</div>
<div class="text-bottom">text bottom</div>
</div>
</div>
<div class="item">
<div class="icon"></div>
<div class="text">
<div class="text-top">text top</div>
<div class="text-bottom">text bottom</div>
</div>
</div>
</div>
I want to create flex style UI that looks like this
what I can do so far is split the UI using col-5 col-2 col-5 from bootstrap, and use flex to create the col-5 UI section (left and right), here's my code
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-5">
<div class="d-flex align-items-start">
<div class="avatar me-75">
<i data-feather="upload" class=avatar-icon></i>
</div>
<div>
<p class="mb-0">Lorem ipsum</p>
<p>lorem ipsum dolor sit amet lorem ipsum</p>
</div>
</div>
</div>
<div class="col-2">
<div class="d-flex" style="height: 50px;">
<div class="vr"></div>
</div>
</div>
<div class="col-5">
<div class="d-flex align-items-start">
<div class="avatar me-75">
<i data-feather="user-plus" class=avatar-icon></i>
</div>
<div>
<p class="mb-0">Lorem ipsum</p>
<p>lorem ipsum dolor sit amet lorem ipsum</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Here's the result
the results don't match my expectations, is there a class from bootstrap that I haven't added? or is there another way I can get the result like the mockup I want?
I recommend to remove the col-width given to the vertical border and instead add it separately from the css. Also, use the justify-content-center class of Bootstrap in the div with the d-flex class. I hope this is what you are trying to achieve.
.col-6::after {
content: "";
position: absolute;
border-right: 2px dotted #000;
height: 75px;
top: 10px;
left: 50%;
display: block;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-6">
<div class="d-flex justify-content-center">
<div class="avatar me-75">
<i data-feather="upload" class=avatar-icon></i>
</div>
<div>
<p class="mb-0">Lorem ipsum</p>
<p>lorem ipsum dolor sit amet lorem ipsum</p>
</div>
</div>
</div>
<div class="col-6">
<div class="d-flex justify-content-center">
<div class="avatar me-75">
<i data-feather="user-plus" class=avatar-icon></i>
</div>
<div>
<p class="mb-0">Lorem ipsum</p>
<p>lorem ipsum dolor sit amet lorem ipsum</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I also created a separate code if you choose to achieve this without using Bootsrap or Flex and instead use the CSS Grid Layout. :)
.card-section {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.card-section .card {
display: grid;
grid-template-columns: 100px 1fr;
justify-self: center;
align-items: center;
}
.card-section .card:first-child::after {
content: "";
position: absolute;
border-right: 2px dotted #000;
height: 100px;
top: 10px;
left: 50%;
display: block;
}
.card-section .card .icon-holder {
background: #000;
width: 75px;
height: 75px;
border-radius: 15px;
}
<div class="card-section">
<div class="card">
<div class="icon-holder">
<i class="icon"></i>
</div>
<div class="info">
<h2>
Title
</h2>
<p>
Description
</p>
</div>
</div>
<div class="card">
<div class="icon-holder">
<i class="icon"></i>
</div>
<div class="info">
<h2>
Title
</h2>
<p>
Description
</p>
</div>
</div>
</div>
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>
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 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>