I am trying to center all columns in a row Horizontally center in bootstrap 4.
the first row is correctly aligned center, but the 2nd row columns, not working properly, although I used same class for it.
my code as below
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
.bg{
background: url('bg.jpg') center / cover no-repeat;
height: 600px;
}
.row1{
padding-top: 200px;
}
.row2{
padding-top: 100px;
}
img{
box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
border-radius: 6px;
}
.img1{
height: 164px;
}
.img2{
height: 258px;
width: 238px;
}
</style>
</head>
<body>
<div class="container-fluid bg">
<div class="row justify-content-center row1">
<img src="img1.jpg" class="img1" alt="Italian Trulli">
</div>
<div class="row justify-content-center row2">
<div class="col col-lg-2">
<img src="img1.jpg" class="img2" alt="Italian Trulli">
</div>
<div class="col col-lg-2">
<img src="img1.jpg" class="img2" alt="Italian Trulli">
</div>
<div class="col col-lg-2">
<img src="factory.jpg" class="img2" alt="Italian Trulli">
</div>
</div>
</div>
</body>
</html>
The result as below (2nd row is not correctly aligned)
cols are centered horizontally. It's just that the image sizes you set in your css do not cover the entire width of the col. So, ' visually' it appears that they are not centered. Remember, with the code you shared you are centering horizontally the col divs, not the images
See example below
As you can see the cols ( red border ) are centered horizontally inside the row ( blue border ), but the imgs are smaller in width so they are not centered
.bg{
background: url('bg.jpg') center / cover no-repeat;
height: 600px;
}
.col {
overflow: hidden;
}
.row {
border:1px solid blue
}
img{
box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
border-radius: 6px;
}
.img1{
height: 164px;
}
.img2{
height:50px;
width: 50px;
}
.col {
border:1px solid red;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container-fluid bg">
<div class="row justify-content-center row2">
<div class="col col-2">
<img class="img2" src="https://via.placeholder.com/150" />
</div>
<div class="col col-2">
<img class="img2" src="https://via.placeholder.com/150" />
</div>
<div class="col col-2">
<img class="img2" src="https://via.placeholder.com/150" />
</div>
</div>
</div>
Related
This question already has answers here:
Why isn't object-fit working in flexbox?
(5 answers)
Closed 4 years ago.
I wrote this responsive image gallery code with using of flexbox
I set background-color style of every flexbox_item to cyan , to show the dimensions of every flexbox_item block :
background-color: cyan;
Now i want images to fill their blocks , so i used :
object-fit: fill;
But it doesn't work!
I tried many things but still images not filling their blocks ! please help . here is the code :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<style>
.main_container {
position: relative;
margin: 0 5% 0% 5%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
}
.flexbox_container {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: stretch;
align-content: stretch;
}
.flexbox_item {
background-color: cyan;
flex-basis: 25%;
object-fit: fill;
}
img {
vertical-align: middle;
}
</style>
<body>
<div class="main_container">
<div class="flexbox_container">
<div class="flexbox_item">
<img src="http://oi43.tinypic.com/14ida8p.jpg" style="width:100%" alt="First Photo">
</div>
<div class="flexbox_item">
<img src="http://oi67.tinypic.com/2qd0ms0.jpg" style="width:100%" alt="Second Photo">
</div>
<div class="flexbox_item">
<img src="http://oi39.tinypic.com/xpzzc.jpg" style="width:100%" alt="Third Photo">
</div>
<div class="flexbox_item">
<img src="http://oi64.tinypic.com/2qd0sc0.jpg" style="width:100%" alt="Fourth Photo">
</div>
<div class="flexbox_item">
<img src="http://oi49.tinypic.com/35kick3.jpg" style="width:100%" alt="Fifth Photo">
</div>
<div class="flexbox_item">
<img src="http://oi65.tinypic.com/2qd1hjs.jpg" style="width:100%" alt="Sixth Photo">
</div>
</div>
</div>
</body>
</html>
The object-fit property is set on the div .flexbox_item wrapping the images, they actually fill the boxes. But the images are not set to fill these divs, so they stay the same.
you can add width: 100%; height: 100%; to the images for that.
NOTE: fill will stretch your images if dimensions are not square, you can try with cover so that the initial ration is kept (image are cropped so they can fill the container)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<style>
.main_container {
position: relative;
margin: 0 5% 0% 5%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
}
.flexbox_container {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: stretch;
align-content: stretch;
}
.flexbox_item {
background-color: cyan;
flex-basis: 25%;
object-fit: fill;
}
img {
vertical-align: middle;
width: 100%;
height: 100%;
}
</style>
<body>
<div class="main_container">
<div class="flexbox_container">
<div class="flexbox_item">
<img src="http://oi43.tinypic.com/14ida8p.jpg" style="width:100%" alt="First Photo">
</div>
<div class="flexbox_item">
<img src="http://oi67.tinypic.com/2qd0ms0.jpg" style="width:100%" alt="Second Photo">
</div>
<div class="flexbox_item">
<img src="http://oi39.tinypic.com/xpzzc.jpg" style="width:100%" alt="Third Photo">
</div>
<div class="flexbox_item">
<img src="http://oi64.tinypic.com/2qd0sc0.jpg" style="width:100%" alt="Fourth Photo">
</div>
<div class="flexbox_item">
<img src="http://oi49.tinypic.com/35kick3.jpg" style="width:100%" alt="Fifth Photo">
</div>
<div class="flexbox_item">
<img src="http://oi65.tinypic.com/2qd1hjs.jpg" style="width:100%" alt="Sixth Photo">
</div>
</div>
</div>
</body>
</html>
Try using background-size: cover
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<style>
.main_container {
position: relative;
margin: 0 5% 0% 5%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
}
.flexbox_container {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: stretch;
align-content: stretch;
}
.flexbox_item {
background-color: cyan;
flex-basis: 25%;
object-fit: fill;
}
img {
width: 100%;
background-size: cover;
object-fit: cover;
height: 100%;
overflow: hidden;
background-attachment: fixed;
background-position: center;
}
</style>
<body>
<div class="main_container">
<div class="flexbox_container">
<div class="flexbox_item">
<img src="http://oi43.tinypic.com/14ida8p.jpg" style="width:100%" alt="First Photo">
</div>
<div class="flexbox_item">
<img src="http://oi67.tinypic.com/2qd0ms0.jpg" style="width:100%" alt="Second Photo">
</div>
<div class="flexbox_item">
<img src="http://oi39.tinypic.com/xpzzc.jpg" style="width:100%" alt="Third Photo">
</div>
<div class="flexbox_item">
<img src="http://oi64.tinypic.com/2qd0sc0.jpg" style="width:100%" alt="Fourth Photo">
</div>
<div class="flexbox_item">
<img src="http://oi49.tinypic.com/35kick3.jpg" style="width:100%" alt="Fifth Photo">
</div>
<div class="flexbox_item">
<img src="http://oi65.tinypic.com/2qd1hjs.jpg" style="width:100%" alt="Sixth Photo">
</div>
</div>
</div>
</body>
</html>
How can I make adjacent col divs in the same row at equal heights and responsive using google materialize css, I want to make a facebook like place where to add pictures & images,
my CSS and HTML is below:
.topSpace{
margin-top: 0.75rem;
}
.drop{
margin: 0.75rem !important;
padding: 0.5rem !important;
background-color: rgb(248, 246, 244);
}
.dashed {
border: 3px dashed rgba(219, 211, 193, 0.74);
border-radius: 10px;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<div class="row drop dashed">
<div class="col s6 m4 l3 topSpace red">
<div class="center-align valign-wrapper">
<img class="responsive-img" src="http://via.placeholder.com/150x250">
</div>
</div>
<div class="col s6 m4 l3 topSpace red">
<div class="center-align valign-wrapper">
<img class="responsive-img" src="http://via.placeholder.com/150x250">
</div>
</div>
<div class="col s6 m4 l3 topSpace green">
<div class="center-align valign-wrapper">
<img class="responsive-img" src="http://via.placeholder.com/250x150">
</div>
</div>
<div class="col s6 m4 l3 topSpace dashed center-align">
<a onclick="alert('Add')" style="cursor: pointer;">
<i class="large material-icons addPicture">add</i>
</a>
</div>
</div>
You can specify height, min-height. I have used height 250px. you can use of your own.Use css:
.topSpace{
margin-top: 0.75rem;
min-height:250px;
height:250px;
}
.topSpace img{
min-height:250px;
height:250px;
}
.drop{
margin: 0.75rem !important;
padding: 0.5rem !important;
background-color: rgb(248, 246, 244);
}
.dashed {
border: 3px dashed rgba(219, 211, 193, 0.74);
border-radius: 10px;
}
or check here
I'm trying to place a calender inside a transparent div container, however I'm having some issues, i want each calender box to form a row that takes up 100% in width in the transparent box. So basically at the moment the page looks like this:
screenshot.
What you probably noticed is if you look at container with the "click on the images text" is that the box is wider than the rows under it.
This is the CSS code for the calender: Basically everything relating to .transbox has something to do with the transparent box. The calender days are the classes .weekdayssttart and weekdays. The remaining classes are the calender days with numbering. So since there is 7 days a week i just thought that I had to divide 100/7 which is 14.2857142857 and set each box type to that width in percentage. However this is the result i get: screenshot2. What I obviously notice is that the row is to small to contain the calender boxes, does anyone have an idea to fix this? Sorry for my bad english.
.transbox {
background: #fff;
padding: 2%;
width: 70%;
margin-left: 15%;
margin-bottom: 1%;
position: relative;
background-color:rgba(255,255,255,.9);
border-radius: 5px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,.9);
overflow: auto;
}
.transbox p {
color: darkslategray;
margin-bottom: 2%;
font-size:13px;
}
.transbox img {
width:100%;
height: 100%;
}
.weekdaysstart {
width: 14%;
height: 20px;
background-color:floralwhite;
border: 1px solid darkslategrey;
text-align:center;
float: left;
}
.weekdays {
width: 14%;
height: 20px;
background-color:floralwhite;
border: 1px solid darkslategrey;
text-align:center;
float: left;
}
.hint {
width: 99%;
height: 20px;
background-color:floralwhite;
border: 1px solid darkslategrey;
text-align:center;
padding-top: 5px;
}
.one {
background-color: floralwhite;
width: 14%;
height: 100px;
float: left;
border: 1px solid darkslategrey;
color: darkslategrey;
}
.nextrow {
background-color: floralwhite;
width: 14%;
height: 100px;
float: left;
clear:left;
border: 1px solid darkslategrey;
color: darkslategrey;
}
.nextmonth {
background-color: floralwhite;
width: 14%;
height: 100px;
float: left;
border: 1px solid darkslategrey;
color: darkslategrey;
}
.lastrow {
width: 14%;
height: 100px;
float: left;
border: 1px solid darkslategrey;
color: darkslategrey;
background-color: floralwhite;
margin-bottom:2%;
}
.pancakes {
width: 14%;
height: 100px;
float:left;
background: url(images/pancakes.jpeg);
background-size: cover;
border: 1px solid darkslategrey;
}
.meatballs {
width: 14%;
height: 100px;
float:left;
border: 1px solid darkslategrey;
background: url(images/kotbulls.jpg);
background-size: cover;
}
<!DOCTYPE html>
<html>
<head>
<title>Tasty recipes</title>
<link href="reset.css" rel="stylesheet" type="text/css">
<link href="stylesheet.css" rel="stylesheet" type="text/css">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
</head>
<body>
<ul>
<li>HOME</li>
<li>RECIPES</li>
<li>CALENDAR</li>
<li class="tastyrecipes">Tasty Recipes</li>
</ul>
<h1>Calendar</h1>
<h3>November 2017</h3>
<div class = "transbox">
<div class="hint">
<p>Click on the image of a dish to go to its recipe-page.</p>
</div>
<div class="weekdaysstart">
<p>Monday</p>
</div>
<div class="weekdays">
<p>Tuesday</p>
</div>
<div class="weekdays">
<p>Wednesday</p>
</div>
<div class="weekdays">
<p>Thursday</p>
</div>
<div class="weekdays">
<p>Friday</p>
</div>
<div class="weekdays">
<p>Saturday</p>
</div>
<div class="weekdays">
<p>Sunday</p>
</div>
<div class="nextrow">
<p>30</p>
</div>
<div class="one">
<p>31</p>
</div>
<div class="one">
<p>1</p>
</div>
<div class="one">
<p>2</p>
</div>
<div class="one">
<p>3</p>
</div>
<div class="one">
<p>4</p>
</div>
<div class="one">
<p>5</p>
</div>
<div class="nextrow">
<p>6</p>
</div>
<a href="meatballs.html">
<div class="meatballs">
<p>7</p>
</div>
</a>
<div class="one">
<p>8</p>
</div>
<div class="one">
<p>9</p>
</div>
<div class="one">
<p>10</p>
</div>
<div class="one">
<p>11</p>
</div>
<div class="one">
<p>12</p>
</div>
<div class="nextrow">
<p>13</p>
</div>
<div class="one">
<p>14</p>
</div>
<div class="one">
<p>15</p>
</div>
<div class="one">
<p>16</p>
</div>
<div class="one">
<p>17</p>
</div>
<div class="one">
<p>18</p>
</div>
<div class="one">
<p>19</p>
</div>
<div class="nextrow">
<p>20</p>
</div>
<div class="one">
<p>21</p>
</div>
<div class="one">
<p>22</p>
</div>
<div class="one">
<p>23</p>
</div>
<div class="one">
<p>24</p>
</div>
<a href="pancakes.html">
<div class="pancakes">
<p>25</p>
</div>
</a>
<div class="one">
<p>26</p>
</div>
<div class="nextrow">
<p>27</p>
</div>
<div class="lastrow">
<p>28</p>
</div>
<div class="lastrow">
<p>29</p>
</div>
<div class="lastrow">
<p>30</p>
</div>
<div class="nextmonth">
<p>1</p>
</div>
<div class="nextmonth">
<p>2</p>
</div>
<div class="nextmonth">
<p>3</p>
</div>
</div>
</body>
</html>
Like Matthew JohnSon said, you could do this using flexbox. I'm not totally sure, but I believe the calc() function will let it fit.
.transbox {
width: 100%;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
}
.weekdaysstart, .weekdays {
width: calc(100% / 7);
}
Edit
I changed the names of the classes to those of your html classes.
You should use a clearfix container per each row.
https://css-tricks.com/snippets/css/clear-fix, and try to use flex instead of float, set each .row display: flex, and then set flex-grow: 1; flex-shrink: 1; flex-basis: auto; to the elements inside the row.
I have two divs that supposed to be on one line. one div is 1/3 the width of the line and the second is 2/3rd width. what isnt the second bigger div floating up to be on the same line as the smaller one.
.home {
border: 4px solid gray;
background-image: radial-gradient(circle, rgba(0, 0, 0, 0), rgba(0, 0, 0, .3)), url('https://unsplash.it/1024/768');
background-size: cover;
background-repeat: none;
background-position: center center;
}
.top {
background: black;
}
.bottom {
background: blue;
}
.left-nav {
border: 1px solid gray;
}
.right-content {
border: 1px dashed purple;
height: 100px;
}
<!--Primary Page Layout
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<section class="home">
<!--Middle Row-->
<div class="row">
<!--Top Row-->
<div class="twelve columns top u-full-width">
<h4 class="heading"><span class="demphasize">Teacher Application Submission for </span>Dwayne Neckles</h4>
</div>
<!--Navigation-->
<div class="left-nav one-third column">
<nav>
<ul>
<li>Home
</li>
<li>Biography
</li>
<li>Community
</li>
<li>Leadership
</li>
</ul>
</nav>
</div>
<div class="right-content two-thirds column">
</div>
<!--Footer Row-->
<div class="twelve columns u-full-width">
<h6 class="byline demphasize">Developed For</h6>
<img src="https://unsplash.it/204/52" width="204" height="52" alt="logo">
</div>
</div>
</section>
You need to wrap rows in <div class="row">...</div>
.home {
border: 4px solid gray;
background-image: radial-gradient(
circle,
rgba(0,0,0,0),
rgba(0,0,0,.3)
),url('https://unsplash.it/1024/768');
background-size: cover;
background-repeat: none;
background-position: center center;
}
.top{
background: black;
}
.bottom{
background
}
.left-nav {
border: 1px solid gray;
}
.right-content {
border: 1px dashed purple;
height: 100px;
}
<link href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/skeleton.2.02.css" rel="stylesheet"/>
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css" rel="stylesheet"/>
<!--Primary Page Layout
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<section class="home">
<!--Middle Row-->
<div class="row">
<!--Top Row-->
<div class="twelve columns top u-full-width">
<h4 class="heading"><span class="demphasize">Teacher Application Submission for </span>Dwayne Neckles</h4>
</div>
</div>
<!--Navigation-->
<div class="row">
<div class="left-nav one-third column">
<nav>
<ul>
<li>Home</li>
<li>Biography</li>
<li>Community</li>
<li>Leadership</li>
</ul>
</nav>
</div>
<div class="right-content two-thirds column">
</div>
</div>
<!--Footer Row-->
<div class="row">
<div class="twelve columns u-full-width">
<h6 class="byline demphasize">Developed For</h6><img src="https://unsplash.it/204/52" width="204" height="52" alt="logo">
</div>
</div>
</section>
I want to create a bookcase like this
I've done some bit and the code is as follows
HTML
enter code here
<html>
<head>
<link rel="stylesheet" type="text/css" href="bookshelf.css" />
</head>
<body>
<div id="bookshelf">
<div class="shelf">
<div class="column" style="border-top:8px solid #444;">
<div class="rand">
<div class="inside"></div>
</div>
</div>
<div class="column">
<div class="rand">
<div class="rand-border"></div>
<div class="inside"></div></div>
</div>
</div>
<div class="column">
<div class="rand">
<div class="inside"></div>
</div>
</div>
<div class="column">
<div class="rand">
<div class="inside"></div></div>
</div>
</div>
<div class="column">
<div class="rand">
<div class="inside"></div></div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
.shelf {
width:360px;
margin: 50px auto;
box-shadow:5px 5px 50px #000;
}
.shelf .column {
border-style:solid;
border-width:0 10px 8px 8px;
border-color:#444 #444 #444 #444;
}
.shelf .column .rand {
border-bottom:100px solid #888;
border-right:1px solid #555;
}
.shelf .column .inside {
border-style:solid;
border-color:#000 #222 #666 #111;
height:100px;
background:url(wood.jpg) repeat;
box-shadow:inset 5px 5px 20px #000, inset 2px -2px 20px #111;
}
Problem: I want the book holder i.e. he base of each rack as shown in the image. Would love to have some ideas about this. currently my bookcase looks like the image below.
!bookcase screenshot