Hello everyone so i'm making a website as a project and in one of the parts i'm putting a list group with the name of the item and on the right the image of said item. I did it already using Pingendo but the text is not align with the image correctly.
This is the code i have atm:
<div class="container">
<div class="row">
<div class="col-sm-2"> </div>
<div class="col-sm-8">
<!-- Page Content -->
<div class="container">
<div class="row text-center text-lg-left">
<div class="col-md-12">
<div class="list-group my-3">
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
<div class="w-100">
<h4 class="mb-1 text-center">Arduino Uno</h4>
</div>
<img class="d-block float-right img-thumbnail img-fluid" src="https://pingendo.com/assets/photos/wireframe/photo-1.jpg" width="150" height="150" > </a>
</a>
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
<div class="w-100">
<h5 class="mb-1 text-center">Breadboard</h5>
</div>
<img class="d-block float-right img-thumbnail img-fluid" src="https://pingendo.com/assets/photos/wireframe/photo-1.jpg" width="60" height="60" > </a>
</a>
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
<div class="w-100">
<h5 class="mb-1 text-center">Product</h5>
</div>
<img class="d-block float-right img-thumbnail img-fluid" src="https://pingendo.com/assets/photos/wireframe/photo-1.jpg" width="60" height="60" > </a>
</a>
</div>
and this is how it looks on the website:
Basically what i'm trying to do is to put both text and image aligned on the same line so i doesn't look the text on the top and the image below.
Thanks in advance.
Remove '.flex-column' class form .list-group-item
and add '.d-flex'.
also remove duplicate closing
a
tag form your code
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <div class="container"> <div class="row"> <div class="col-sm-2"> </div> <div class="col-sm-8"> <!-- Page Content --> <div class="container"> <div class="row text-center text-lg-left"> <div class="col-md-12"> <div class="list-group my-3"> <a href="#" class="list-group-item list-group-item-action d-flex align-items-start"> <div class="w-100"> <h4 class="mb-1 text-center">Arduino Uno</h4> </div> <img class="d-block float-right img-thumbnail img-fluid" src="https://pingendo.com/assets/photos/wireframe/photo-1.jpg" width="60" height="60" > </a> <a href="#" class="list-group-item list-group-item-action d-flex align-items-start"> <div class="w-100"> <h5 class="mb-1 text-center">Breadboard</h5> </div> <img class="d-block float-right img-thumbnail img-fluid" src="https://pingendo.com/assets/photos/wireframe/photo-1.jpg" width="60" height="60" > </a> <a href="#" class="list-group-item list-group-item-action d-flex align-items-start"> <div class="w-100"> <h5 class="mb-1 text-center">Product</h5> </div> <img class="d-block float-right img-thumbnail img-fluid" src="https://pingendo.com/assets/photos/wireframe/photo-1.jpg" width="60" height="60" > </a> </div>
if you want text and image into center
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <div class="container"> <div class="row"> <div class="col-sm-2"> </div> <div class="col-sm-8"> <!-- Page Content --> <div class="container"> <div class="row text-center text-lg-left"> <div class="col-md-12"> <div class="list-group my-3"> <a href="#" class="list-group-item list-group-item-action d-flex align-items-center"> <div class="w-100"> <h4 class="mb-0 text-center">Arduino Uno</h4> </div> <img class="d-block float-right img-thumbnail img-fluid" src="https://pingendo.com/assets/photos/wireframe/photo-1.jpg" width="60" height="60" > </a> <a href="#" class="list-group-item list-group-item-action d-flex align-items-center"> <div class="w-100"> <h5 class="mb-0 text-center">Breadboard</h5> </div> <img class="d-block float-right img-thumbnail img-fluid" src="https://pingendo.com/assets/photos/wireframe/photo-1.jpg" width="60" height="60" > </a> <a href="#" class="list-group-item list-group-item-action d-flex align-items-center"> <div class="w-100"> <h5 class="mb-0 text-center">Product</h5> </div> <img class="d-block float-right img-thumbnail img-fluid" src="https://pingendo.com/assets/photos/wireframe/photo-1.jpg" width="60" height="60" > </a> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.