I'm creating a grid to display images of a team. I have a grid of images and I need to position my bottom 2 images below the top 2 middle images - basically centralizing the bottom 2. How can I achieve this? I've added my HTML and CSS below. Any help will be appreciated. Thanks.
.team-grids .team-img {
overflow: hidden;
position: relative;
display: block;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="team">
<div class="container">
<div class="w3l-heading">
<h3>Our Team</h3>
</div>
<div class="team-row">
<div class="col-md-3 team-grids">
<div class="team-img">
<img class="img-responsive" src="https://via.placeholder.com/200x200" alt="">
<div class="captn">
<div class="captn-top">
<h4>Edwards Doe</h4>
<p>description</p>
</div>
</div>
</div>
</div>
<div class="col-md-3 team-grids">
<div class="team-img">
<img class="img-responsive" src="https://via.placeholder.com/200x200" alt="">
<div class="captn">
<div class="captn-top">
<h4>Mark Sophia</h4>
<p>description</p>
</div>
</div>
</div>
</div>
</div>
</div>
Done. Just need to add text-align: center; , see the example below :D
.team-grids .team-img {
overflow: hidden;
position: relative;
display: block;
text-align: center;
}
<div class="team">
<div class="container">
<div class="w3l-heading">
<h3>Our Team</h3>
</div>
<div class="team-row">
<div class="col-md-3 team-grids">
<div class="team-img">
<img class="img-responsive" src="~/Content/Images/t1.jpg" alt="">
<div class="captn">
<div class="captn-top">
<h4>Edwards Doe</h4>
<p>description</p>
</div>
</div>
</div>
</div>
<div class="col-md-3 team-grids">
<div class="team-img">
<img class="img-responsive" src="~/Content/Images/t1.jpg" alt="">
<div class="captn">
<div class="captn-top">
<h4>Mark Sophia</h4>
<p>description</p>
</div>
</div>
</div>
</div>
</div>
</div>
Try to add these rules display: flex; and justify-content: center; to .team-row class like below
.team-row{
display: flex;
justify-content: center;
}
Run the Code snippet bellow :
.team-row{
display: flex;
justify-content: center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="team">
<div class="container">
<div class="w3l-heading">
<h3>Our Team</h3>
</div>
<div class="team-row">
<div class="col-md-3 team-grids">
<div class="team-img">
<img class="img-responsive" src="https://via.placeholder.com/200x200" alt="">
<div class="captn">
<div class="captn-top">
<h4>Edwards Doe</h4>
<p>description</p>
</div>
</div>
</div>
</div>
<div class="col-md-3 team-grids">
<div class="team-img">
<img class="img-responsive" src="https://via.placeholder.com/200x200" alt="">
<div class="captn">
<div class="captn-top">
<h4>Mark Sophia</h4>
<p>description</p>
</div>
</div>
</div>
</div>
</div>
</div>
you can try adding this:
.team-grids {
margin: 0 auto;
}
edited: my bad, pls try this one.
add justify-content-md-center
.team-grids .team-img {
overflow: hidden;
position: relative;
display: block;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css" />
<div class="team">
<div class="container">
<div class="w3l-heading">
<h3>Our Team</h3>
</div>
<div class="row team-row justify-content-sm-center">
<div class="col-md-3 col-sm-3 team-grids">
<div class="team-img">
<img class="img-responsive" src="https://gyazo.com/2fac18f9f6395e4815234d5512de6cba.png" alt="">
<div class="captn">
<div class="captn-top">
<h4>Edwards Doe</h4>
<p>description</p>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-3 team-grids">
<div class="team-img">
<img class="img-responsive" src="https://gyazo.com/2fac18f9f6395e4815234d5512de6cba.png" alt="">
<div class="captn">
<div class="captn-top">
<h4>Mark Sophia</h4>
<p>description</p>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-3 team-grids">
<div class="team-img">
<img class="img-responsive" src="https://gyazo.com/2fac18f9f6395e4815234d5512de6cba.png" alt="">
<div class="captn">
<div class="captn-top">
<h4>Mark Sophia</h4>
<p>description</p>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-3 team-grids">
<div class="team-img">
<img class="img-responsive" src="https://gyazo.com/2fac18f9f6395e4815234d5512de6cba.png" alt="">
<div class="captn">
<div class="captn-top">
<h4>Mark Sophia</h4>
<p>description</p>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-3 team-grids">
<div class="team-img">
<img class="img-responsive" src="https://gyazo.com/2fac18f9f6395e4815234d5512de6cba.png" alt="">
<div class="captn">
<div class="captn-top">
<h4>Mark Sophia</h4>
<p>description</p>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-3 team-grids">
<div class="team-img">
<img class="img-responsive" src="https://gyazo.com/2fac18f9f6395e4815234d5512de6cba.png" alt="">
<div class="captn">
<div class="captn-top">
<h4>Mark Sophia</h4>
<p>description</p>
</div>
</div>
</div>
</div>
</div>
</div>
.team-grids .team-img {
overflow: hidden;
position: relative;
display: block;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="team">
<div class="container">
<div class="w3l-heading">
<h3>Our Team</h3>
</div>
<div class="team-row row justify-content-center">
<div class="col-sm-6 col-md-3 team-grids">
<div class="team-img mx-auto">
<img class="img-fluid" src="https://via.placeholder.com/200x200" alt="">
<div class="captn">
<div class="captn-top">
<h4>Edwards Doe</h4>
<p>description</p>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3 team-grids">
<div class="team-img mx-auto">
<img class="img-fluid" src="https://via.placeholder.com/200x200" alt="">
<div class="captn">
<div class="captn-top">
<h4>Mark Sophia</h4>
<p>description</p>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3 team-grids">
<div class="team-img mx-auto">
<img class="img-fluid" src="https://via.placeholder.com/200x200" alt="">
<div class="captn">
<div class="captn-top">
<h4>Mark Sophia</h4>
<p>description</p>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3 team-grids">
<div class="team-img mx-auto">
<img class="img-fluid" src="https://via.placeholder.com/200x200" alt="">
<div class="captn">
<div class="captn-top">
<h4>Mark Sophia</h4>
<p>description</p>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3 team-grids">
<div class="team-img mx-auto">
<img class="img-fluid" src="https://via.placeholder.com/200x200" alt="">
<div class="captn">
<div class="captn-top">
<h4>Mark Sophia</h4>
<p>description</p>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3 team-grids">
<div class="team-img mx-auto">
<img class="img-fluid" src="https://via.placeholder.com/200x200" alt="">
<div class="captn">
<div class="captn-top">
<h4>Mark Sophia</h4>
<p>description</p>
</div>
</div>
</div>
</div>
</div>
</div>
Three changes to your code:
1) Add class row and justify-content-center alongwith team-row. Columns are always used in combination with rows in Bootstrap.
2) Add class img-fluid, because img-responsive is a Bootstrap 3 class which is changed to img-fluid in Bootstrap 4.
3) Add class mx-auto to team-img in case you need to center the image in column. For text, you can use text-center.
Related
I am trying to place text at the bottom of the image but it's placed at side of the image
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-xl-4">
<div class="d-flex justify-content-center">
<img src="https://via.placeholder.com/150">
<h4>A</h4>
</div>
</div>
<div class="col-xl-4">
<div class="d-flex justify-content-center">
<img src="https://via.placeholder.com/150">
<h4>B</h4>
</div>
</div>
</div>
</div>
</div>
I suggest using semantic HTML with text-center class:
<figure>
<img src="https://via.placeholder.com/150">
<figcaption class="text-center">B</figcaption>
</figure>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-xl-4">
<div class="d-flex justify-content-center">
<figure>
<img src="https://via.placeholder.com/150">
<figcaption class="text-center">A</figcaption>
</figure>
</div>
</div>
<div class="col-xl-4">
<div class="d-flex justify-content-center">
<figure>
<img src="https://via.placeholder.com/150">
<figcaption class="text-center">B</figcaption>
</figure>
</div>
</div>
</div>
</div>
</div>
Take a look this picture:
2nd column is at right, it looks the height isn't equal to the first column I need to figure out how 2nd column should get the same height as the first column.
My HTML:
<div class="row"">
<div class="col-8">
<div class="row">
<div class="col-12 mb-2">
<div class="imgcontainer">
<img src="https://loremflickr.com/1280/720" class="img-fluid" alt="Picture">
<div class="top-left">Top Left</div>
</div>
</div>
<div class="col-12">
<div class="imgcontainer">
<img src="https://loremflickr.com/1280/720" class="img-fluid" alt="Picture">
<div class="top-left">Top Left</div>
</div>
</div>
</div>
</div>
<div class="col-4">
<div class="row">
<div class="col-12">
<div class="imgcontainer">
<img src="https://loremflickr.com/1280/720" class="img-fluid" alt="Picture">
<div class="top-left">Top Left</div>
</div>
</div>
<div class="col-12">
<div class="imgcontainer">
<img src="https://loremflickr.com/1280/720" class="img-fluid" alt="Picture">
<div class="top-left">Top Left</div>
</div>
</div>
<div class="col-12">
<div class="imgcontainer">
<img src="https://loremflickr.com/1280/720" class="img-fluid" alt="Picture">
<div class="top-left">Top Left</div>
</div>
</div>
</div>
</div>
</div>
Use the flexbox utils to make the right column display:flex, flex-direction: column...
<div class="container-fluid">
<div class="row">
<div class="col-8">
<div class="row">
<div class="col-12 mb-2">
<div class="imgcontainer">
<img src="https://loremflickr.com/1280/720" class="img-fluid" alt="Picture">
<div class="top-left">Top Left</div>
</div>
</div>
<div class="col-12">
<div class="imgcontainer">
<img src="https://loremflickr.com/1280/720" class="img-fluid" alt="Picture">
<div class="top-left">Top Left</div>
</div>
</div>
</div>
</div>
<div class="col-4 d-flex flex-column">
<div class="row flex-fill justify-content-between">
<div class="col-12">
<div class="imgcontainer">
<img src="https://loremflickr.com/1280/720" class="img-fluid" alt="Picture">
<div class="top-left">Top Left</div>
</div>
</div>
<div class="col-12">
<div class="imgcontainer">
<img src="https://loremflickr.com/1280/720" class="img-fluid" alt="Picture">
<div class="top-left">Top Left</div>
</div>
</div>
<div class="col-12 d-flex align-items-end">
<div class="imgcontainer">
<img src="https://loremflickr.com/1280/720" class="img-fluid" alt="Picture">
<div class="top-left">Top Left</div>
</div>
</div>
</div>
</div>
</div>
</div>
https://www.codeply.com/go/hlHhjz3K1Q
You can try something like this:
<div class="container">
<div class="d-md-flex">
<div class="flex flex-row flex-nowrap">
<img src="https://i.imgur.com/exWWySt.png">
<img src="https://i.imgur.com/exWWySt.png">
</div>
<div class="flex-column">
<img src="https://i.imgur.com/exWWySt.png" height="300">
<img src="https://i.imgur.com/exWWySt.png" height="300">
<img src="https://i.imgur.com/exWWySt.png" height="300">
</div>
</div>
</div>
Codepen
I'm a student. And I have used Bootstrap 3.3.7 and after moved to v4.1. In this version, columns are not floating automatically to right. So I used d-inline-block class. I created 4 blocks with 3 of columns for each. The number of columns in a row is equal to 12. Then the last column jumps to the new line instead of wrap to the previous column. But this code works fine with Bootstrap 3.3.7. Also, I used 2 columns just for one block, and when the number of columns is smaller than 12, there is no problem. I couldn't find any proper solution on google. Please help. Thank you.
Example:
https://jsfiddle.net/EshanRajapakshe/3aeaeohb/
My code is:
<section class="popular-templates-section">
<div class="container-fluid">
<div class="col-lg-12 col-md-12">
<div class="popular-templates-title">
<h4>Most Popular Templates</h4>
</div>
<div class="popular-templates">
<div class="col-lg-3 col-md-3 d-inline-block">
<div class="template-img">
<img src="assets/images/template-thumb/template-1.jpg" alt="">
</div>
</div>
<div class="col-lg-3 col-md-3 d-inline-block">
<div class="template-img">
<img src="assets/images/template-thumb/template-1.jpg" alt="">
</div>
</div>
<div class="col-lg-3 col-md-3 d-inline-block">
<div class="template-img">
<img src="assets/images/template-thumb/template-1.jpg" alt="">
</div>
</div>
<div class="col-lg-3 col-md-3 d-inline-block">
<div class="template-img">
<img src="assets/images/template-thumb/template-1.jpg" alt="">
</div>
</div>
</div>
</div>
</div>
</section>
Wrap your .cols inside a .row like this
<div class="row">
<div class="col-lg-6">6 cols</div>
<div class="col-lg-6">6 cols</div>
</div>
Also remove the d-inline-block class from cols.
In your particular case:
<section class="popular-templates-section">
<div class="container-fluid">
<div class="row">
<div class="col">
<div class="popular-templates-title">
<h4>Most Popular Templates</h4>
</div>
</div>
</div>
<div class="popular-templates">
<div class="row">
<div class="col-lg-3 col-md-3">
<div class="template-img">
<img class="img-fluid" src="assets/images/template-thumb/template-1.jpg" alt="">
</div>
<div class="template-info">
<div class="template-name-type">
<h6 class="template-name">Web Design Inspiration</h6>
<h6 class="template-type">HTML5 Template</h6>
<h6 class="template-more-details">MORE DETAILS</h6>
</div>
<div class="template-price-type">
<h5 class="template-price">$78</h5>
<div class="template-type-icons">
<img src="assets/images/icons/responsive-devices.png" alt="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Responsive Website">
<img src="assets/images/icons/bootstrap.png" alt="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Bootstrap 4 Template">
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3">
<div class="template-img">
<img class="img-fluid" src="assets/images/template-thumb/template-1.jpg" alt="">
</div>
<div class="template-info">
<div class="template-name-type">
<h6 class="template-name">Web Design Inspiration</h6>
<h6 class="template-type">HTML5 Template</h6>
<h6 class="template-more-details">MORE DETAILS</h6>
</div>
<div class="template-price-type">
<h5 class="template-price">$78</h5>
<div class="template-type-icons">
<img src="assets/images/icons/responsive-devices.png" alt="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Responsive Website">
<img src="assets/images/icons/bootstrap.png" alt="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Bootstrap 4 Template">
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3">
<div class="template-img">
<img class="img-fluid" src="assets/images/template-thumb/template-1.jpg" alt="">
</div>
<div class="template-info">
<div class="template-name-type">
<h6 class="template-name">Web Design Inspiration</h6>
<h6 class="template-type">HTML5 Template</h6>
<h6 class="template-more-details">MORE DETAILS</h6>
</div>
<div class="template-price-type">
<h5 class="template-price">$78</h5>
<div class="template-type-icons">
<img src="assets/images/icons/responsive-devices.png" alt="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Responsive Website">
<img src="assets/images/icons/bootstrap.png" alt="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Bootstrap 4 Template">
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3">
<div class="template-img">
<img class="img-fluid" src="assets/images/template-thumb/template-1.jpg" alt="">
</div>
<div class="template-info">
<div class="template-name-type">
<h6 class="template-name">Web Design Inspiration</h6>
<h6 class="template-type">HTML5 Template</h6>
<h6 class="template-more-details">MORE DETAILS</h6>
</div>
<div class="template-price-type">
<h5 class="template-price">$78</h5>
<div class="template-type-icons">
<img src="assets/images/icons/responsive-devices.png" alt="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Responsive Website">
<img src="assets/images/icons/bootstrap.png" alt="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Bootstrap 4 Template">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Also added the class img-fluid to imgs so it won't be bigger than its container.
Bootstrap-v4 Grid system Docs
Here is the updated fiddle link
I edited ur html, removed un necessary classes.
Also if u want all columns to be of same size on all devices, u only need one col-{number} class
Also there is no col-xs-{class} in bootstrap 4. Instead of that, use col-{number}
<section class="popular-templates-section">
<div class="container-fluid">
<div class="popular-templates-title">
<h4>Most Popular Templates</h4>
</div>
<div class="popular-templates">
<div class="row m-0">
<div class="col-3 blue">
<div class="template-img">
<img src="assets/images/template-thumb/template-1.jpg" alt="">
</div>
</div>
<div class="col-3 black">
<div class="template-img">
<img src="assets/images/template-thumb/template-1.jpg" alt="">
</div>
</div>
<div class="col-3 blue">
<div class="template-img">
<img src="assets/images/template-thumb/template-1.jpg" alt="">
</div>
</div>
<div class="col-3 black">
<div class="template-img">
<img src="assets/images/template-thumb/template-1.jpg" alt="">
</div>
</div>
</div>
</div>
</div>
</section>
You are facing issues basically because of the improper semantics of Bootstrap grid used by you. Find below the corrected code, it will help for sure.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="author" content="Akash Kumar">
<meta name="url" content="http://akashshivanand.com">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css">
.blue {
padding: 5px;
background: blue;
}
.black {
padding: 5px;
background: black;
}
</style>
<title> by EshanRajapakshe</title>
</head>
<body>
<section class="popular-templates-section">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="popular-templates-title">
<h4>Most Popular Templates</h4>
</div>
<div class="popular-templates">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 d-inline-block blue">
<div class="template-img">
<img src="assets/images/template-thumb/template-1.jpg" alt="">
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 d-inline-block black">
<div class="template-img">
<img src="assets/images/template-thumb/template-1.jpg" alt="">
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 d-inline-block blue">
<div class="template-img">
<img src="assets/images/template-thumb/template-1.jpg" alt="">
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 d-inline-block black">
<div class="template-img">
<img src="assets/images/template-thumb/template-1.jpg" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
I need to made this div in bootstrap 3 as shows in image...
I need to display 4 icons/images in one row and another 4 icons in another row in smaller screen/mobile view..i dont know any error in my code..
please help me to make this as shown as in image.
<section class="container-fluid">
<div class="row" style="background-color:#034ea2;">
<div class="col-md-2"></div>
<div class="col-md-1 text-center ">
<div class="im1">
<img src="/images/speaker.png" alt="1" class="siz">
</div>
<div class="textt">
<h6>Sound insultion</h6>
</div>
</div>
<div class="col-md-1 text-center" >
<div class="im1">
<img src="/images/renewable-energy.png" alt="1" class="siz">
</div>
<div class="textt">
<h6>Save energy</h6>
</div>
</div>
<div class="col-md-1 text-center">
<div class="im1">
<img src="/images/window.png" alt="1" class="siz">
</div>
<div class="textt">
<h6>Prevent Dust Buildup</h6>
</div>
</div>
<div class="col-md-1 text-center">
<div class="im1">
<img src="/images/stormy.png" alt="1" class="siz">
</div>
<div class="textt">
<h6>Storm Resistant</h6>
</div>
</div>
<div class="col-md-1 text-center">
<div class="im1">
<img src="/images/hotel-elevator.png" alt="1" class="siz">
</div>
<div class="textt">
<h6>Elegant Looks</h6>
</div>
</div>
<div class="col-md-1 text-center">
<div class="im1">
<img src="/images/umb.png" alt="1" class="siz">
</div>
<div class="textt">
<h6>Blocks Seepage</h6>
</div>
</div>
<div class="col-md-1 text-center">
<div class="im1">
<img src="/images/sun.png" alt="1" class="siz">
</div>
<div class="textt">
<h6>Thermal Insulation</h6>
</div>
</div>
<div class="col-md-1 text-center">
<div class="im1">
<img src="/images/maintenance.png" alt="1" class="siz">
</div>
<div class="textt">
<h6>Low maintenance</h6>
</div>
</div>
<div class="col-md-2">
</div>
</div>
</section>
styles
.im1{
padding-top: 8px;
padding-left: 8px;
}
.siz{
width: 40px;
}
.textt{
font-size: 15px;
color:#ffffff;
font-family: 'Times New Roman', Times, serif !important;
}
Here is the image
how to make this image using bootstrap grid system...
I created a code for you. I hope it will help to you.
https://codepen.io/myco27/pen/OvMdGp
img{
width: 100%;
}
.img1{
width: calc(100% / 8);
float:left;
}
#media (max-width: 860px) {
.img1{
width: calc(100% / 4);
float:left;
}
}
<section class="container-fluid">
<div class="row" style="background-color:#034ea2;">
<div class="img1 text-center">
<img src="https://webfoundation.org/docs/2017/03/March-12-Letter.jpg" alt="1">
</div>
<div class="img1 text-center">
<img src="https://webfoundation.org/docs/2017/03/March-12-Letter.jpg" alt="1">
</div>
<div class="img1 text-center">
<img src="https://webfoundation.org/docs/2017/03/March-12-Letter.jpg" alt="1">
</div>
<div class="img1 text-center">
<img src="https://webfoundation.org/docs/2017/03/March-12-Letter.jpg" alt="1">
</div>
<div class="img1 text-center">
<img src="https://webfoundation.org/docs/2017/03/March-12-Letter.jpg" alt="1">
</div>
<div class="img1 text-center">
<img src="https://webfoundation.org/docs/2017/03/March-12-Letter.jpg" alt="1">
</div>
<div class="img1 text-center">
<img src="https://webfoundation.org/docs/2017/03/March-12-Letter.jpg" alt="1">
</div>
<div class="img1 text-center">
<img src="https://webfoundation.org/docs/2017/03/March-12-Letter.jpg" alt="1">
</div>
</div>
</section>
First bootstrap runs in a 12 grid sysytem that is defined or can be broken down into 2,3, or 4 segements...basically any divisor of 12. In your case, to get the first four images in a row (in a small device), we split the grid by 3 i.e "col-md-3" for each image wrapper and "col-lg-1" (for large devices) e.g using a snippet from your code
<div class="col-lg-1 col-md-3 text-center">
<div class="im1">
<img src="/images/hotel-elevator.png" alt="1" class="siz">
</div>
<div class="textt">
<h6>Elegant Looks</h6>
</div>
</div>
Then avoid splitting the grid at the main <div class="col-md-2"></div> wrapper, simply leave it as <div class="row justify-content-md-center"></div>.
This should work just fine.
NB: The number of images willbe only 8 in this container
For Your CSS is simply modify the following
.siz{
width: 100%;
}
Try This. it has 8 div in 1 row. as shown in image
<style>
.main{
background:#034da2;
}
</style>
<div class="col-md-12 main">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-3">
<img src="image" alt="your image"/>
</div>
<div class="col-md-3">
<img src="image" alt="your image"/>
</div>
<div class="col-md-3">
<img src="image" alt="your image"/>
</div>
<div class="col-md-3">
<img src="image" alt="your image"/>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-3">
<img src="image" alt="your image"/>
</div>
<div class="col-md-3">
<img src="image" alt="your image"/>
</div>
<div class="col-md-3">
<img src="image" alt="your image"/>
</div>
<div class="col-md-3">
<img src="image" alt="your image"/>
</div>
</div>
</div>
</div>
</div>
</div>
Hi guys I need help in organizing a group of images using the bootstrap grid layout.
In the image there is the result I want reach: https://i.stack.imgur.com/RuJud.png
My code produces this result: https://i.stack.imgur.com/ZDa2Z.png
The position of the images is wrong, can you help me watching my code?
<div class="container">
<div class="row game-group-titles">
<div class="col-md-6">
<h4>GIOCHI PREFERITI</h4>
<div class="row">
<div class="col-md-12 giocogrosso">
<img src="../lggioco.png" alt="">
</div>
</div>
<div class="row">
<div class="col-md-6 giocopiccoloo">
<img src="../giocoo.png" alt="">
</div>
<div class="col-md-6 giocopiccolo">
<img src="../giocoo.png" alt="">
</div>
</div>
<div class="row">
<div class="col-md-6 giocopiccoloo">
<img src="../giocoo.png" alt="">
</div>
<div class="col-md-6 giocopiccolo">
<img src="../giocoo.png" alt="">
</div>
</div>
</div>
<div class="col-md-6">
<h4>CURRENTLY PLAYING</h4>
<div class="row">
<div class="col-md-12 giocogrosso">
<img src="../lggioco.png" alt="">
</div>
</div>
<div class="row">
<div class="col-md-6 giocopiccoloo">
<img src="../giocoo.png" alt="">
</div>
<div class="col-md-6 giocopiccolo">
<img src="../giocoo.png" alt="">
</div>
</div>
<div class="row">
<div class="col-md-6 giocopiccoloo">
<img src="../giocoo.png" alt="">
</div>
<div class="col-md-6 giocopiccolo">
<img src="../giocoo.png" alt="">
</div>
</div>
</div>
</div>
</div>
Not sure if this is what you were looking for
.row {
background: blue;
max-width: 410px;
}
.no-gutters {
margin-right: 0;
margin-left: 0;
> .col, > [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
}
<h4>GIOCHI PREFERITI</h4>
<div class="row no-gutters">
<div class="col-12 giocogrosso">
<img src="http://via.placeholder.com/410x190" alt="">
</div>
<div class="col-xs-6 giocopiccoloo">
<img src="http://via.placeholder.com/205x95" alt="">
</div>
<div class="col-xs-6 giocopiccoloo">
<img src="http://via.placeholder.com/205x95" alt="">
</div>
<div class="col-xs-6 giocopiccoloo">
<img src="http://via.placeholder.com/205x95" alt="">
</div>
<div class="col-xs-6 giocopiccolo">
<img src="http://via.placeholder.com/205x95" alt="">
</div>
</div>