Problems using Card-img-overlay with card-columns - html

I'm using Bootstrap 4.4 to create a card column:
<!DOCTYPE html>
<html>
<head>
<title>Problems using Card-img-overlay with card-columns</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div class="card-columns" style="padding-top: 2%;">
<div class="card">
<img class="card-img" src="https://source.unsplash.com/user/erondu/1920x1080" style="opacity: 65%;">
<div class="card-img-overlay">
<h4 class="card-title">Card Title</h4>
<h6 class="card-subtitle">Subtítulo do cartão</h6>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien dui, feugiat et lorem quis, fringilla maximus nisl. Vivamus sed est pulvinar, aliquet purus ut, dictum elit.</p>
<a class="btn btn-outline-light" href="">Leia mais</a>
</div>
</div>
<div class="card bg-danger text-white mb-2">
<div class="card-header">
Cabeçalho do cartão
</div>
<div class="card-body">
<h4 class="card-title">Título do cartão</h4>
<h6 class="card-subtitle">Subtítulo do cartão</h6>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien dui, feugiat et lorem quis, fringilla maximus nisl. Vivamus sed est pulvinar, aliquet purus ut, dictum elit.</p>
<a class="btn btn-outline-light" href="">Leia mais</a>
</div>
</div>
<div class="card bg-primary text-white mb-2">
<div class="card-header">
Cabeçalho do cartão
</div>
<div class="card-body">
<h4 class="card-title">Título do cartão</h4>
<h6 class="card-subtitle">Subtítulo do cartão</h6>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien dui, feugiat et lorem quis, fringilla maximus nisl. Vivamus sed est pulvinar, aliquet purus ut, dictum elit.</p>
<a class="btn btn-outline-light" href="">Leia mais</a>
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">Título do cartão</h4>
<h6 class="card-subtitle">Subtítulo do cartão</h6>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien dui, feugiat et lorem quis, fringilla maximus nisl. Vivamus sed est pulvinar, aliquet purus ut, dictum elit.</p>
<a class="btn btn-outline-primary" href="">Leia mais</a>
</div>
</div>
<div class="card">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" href="">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="">Link 3</a>
</li>
</ul>
</div>
<div class="card-body">
<h4>Título do cartão</h4>
<h6>Subtítulo do cartão</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien dui, feugiat et lorem quis, fringilla maximus nisl. Vivamus sed est pulvinar, aliquet purus ut, dictum elit.</p>
<a class="btn btn-outline-danger btn-block" href="">Leia mais</a>
</div>
</div>
<div class="card bg-success text-white mb-2">
<div class="card-header">
Cabeçalho do cartão
</div>
<div class="card-body">
<h4 class="card-title">Título do cartão</h4>
<h6 class="card-subtitle">Subtítulo do cartão</h6>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien dui, feugiat et lorem quis, fringilla maximus nisl. Vivamus sed est pulvinar, aliquet purus ut, dictum elit.</p>
<a class="btn btn-outline-success" href="">Leia mais</a>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
The problem is with the card I use Card-img-overlay. When the screen has a higher resolution, the display occurs as expected:
When the screen is smaller:
Part of the meat and its contents are omitted. I tried padding top but it doesn't work properly.
Besides, I can't seem to make the image fit. I tried for a vertically larger image but all I can get is that the card occupies the space corresponding to the height of the image.
How do I prevent the content from being overlaid by another card? and so that the image occupies all the space of the card always?


It is because the parent div element of card-img-overlay is not set to relative and has no fixed height. Set a minimum height for the parent div element (which is .card) so that it will not shrink when the viewport gets smaller.
.card {
min-height: 300px;
position: relative;
}
https://jsfiddle.net/svwb6r31/


I think bootstrap way to impliment this idea is not the best one. Element with position: absolute is taking out of DOM and can't be fit with it's content.
I suggest to replace .card-img-overlay with .card-body and instead of <img> make div with image as it's background and parametrs as in snippet.
.bg-img {
opacity: 65%;
background: no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-image: url(https://source.unsplash.com/user/erondu/1920x1080);
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.bg-img + .card-body {
position: relative;
z-index: 1;
}
<!DOCTYPE html>
<html>
<head>
<title>Problems using Card-img-overlay with card-columns</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div class="card-columns" style="padding-top: 2%;">
<div class="card">
<div class="bg-img"></div>
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<h6 class="card-subtitle">Subtítulo do cartão</h6>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien dui, feugiat et lorem quis, fringilla maximus nisl. Vivamus sed est pulvinar, aliquet purus ut, dictum elit.</p>
<a class="btn btn-outline-light" href="">Leia mais</a>
</div>
</div>
<div class="card bg-danger text-white mb-2">
<div class="card-header">
Cabeçalho do cartão
</div>
<div class="card-body">
<h4 class="card-title">Título do cartão</h4>
<h6 class="card-subtitle">Subtítulo do cartão</h6>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien dui, feugiat et lorem quis, fringilla maximus nisl. Vivamus sed est pulvinar, aliquet purus ut, dictum elit.</p>
<a class="btn btn-outline-light" href="">Leia mais</a>
</div>
</div>
<div class="card bg-primary text-white mb-2">
<div class="card-header">
Cabeçalho do cartão
</div>
<div class="card-body">
<h4 class="card-title">Título do cartão</h4>
<h6 class="card-subtitle">Subtítulo do cartão</h6>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien dui, feugiat et lorem quis, fringilla maximus nisl. Vivamus sed est pulvinar, aliquet purus ut, dictum elit.</p>
<a class="btn btn-outline-light" href="">Leia mais</a>
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">Título do cartão</h4>
<h6 class="card-subtitle">Subtítulo do cartão</h6>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien dui, feugiat et lorem quis, fringilla maximus nisl. Vivamus sed est pulvinar, aliquet purus ut, dictum elit.</p>
<a class="btn btn-outline-primary" href="">Leia mais</a>
</div>
</div>
<div class="card">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" href="">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="">Link 3</a>
</li>
</ul>
</div>
<div class="card-body">
<h4>Título do cartão</h4>
<h6>Subtítulo do cartão</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien dui, feugiat et lorem quis, fringilla maximus nisl. Vivamus sed est pulvinar, aliquet purus ut, dictum elit.</p>
<a class="btn btn-outline-danger btn-block" href="">Leia mais</a>
</div>
</div>
<div class="card bg-success text-white mb-2">
<div class="card-header">
Cabeçalho do cartão
</div>
<div class="card-body">
<h4 class="card-title">Título do cartão</h4>
<h6 class="card-subtitle">Subtítulo do cartão</h6>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien dui, feugiat et lorem quis, fringilla maximus nisl. Vivamus sed est pulvinar, aliquet purus ut, dictum elit.</p>
<a class="btn btn-outline-success" href="">Leia mais</a>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>

Related

Two or more columns with flex gap in tailwind

I created a custom class with .columns with those properties:
.columns {
#apply flex flex-wrap gap-4 sm:gap-8 lg:gap-10
}
When I do basis-1/2 and put some items init I have only one column.
I understand it is because of the gap that extends the width but how can I do it work with a gap on row and column?
Here is the whole code (There will be more items but didn't want to make this post that long):
<div class="columns">
<div class="basis-1/2">
<div class="bg-white rounded-lg p-10">
<div class="flex flex-col text-left">
<div class="mb-6">
<img src="https://picsum.photos/id/237/536/35" alt="Test" class="rounded w-12 h-12">
</div>
<h4 class="typo-h4 mb-4">
Title
</h4>
<p class="typo-p1 mb-8">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer finibus sodales commodo. Curabitur arcu arcu, pretium quis eros eu, lobortis convallis nulla. Curabitur gravida est odio, eget ornare tortor eleifend in. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam non molestie elit. </p>
<a href="#" class="typo-l1 pb-4">
Read more →
</a>
</div>
</div>
</div>
</div>

As far as for the row/column, if you want both the card in the same row including the gap classes you had given, just replace flex-wrap with flex-row.
Code given below
<script src="https://cdn.tailwindcss.com"></script>
<div class="flex flex-row gap-4 sm:gap-8 lg:gap-10">
<div class="basis-1/2">
<div class="bg-yellow-50 rounded-lg p-10">
<div class="flex flex-col text-left">
<div class="mb-6">
<img src="https://picsum.photos/id/237/536/35" alt="Test" class="rounded w-12 h-12">
</div>
<h4 class="typo-h4 mb-4">
Title
</h4>
<p class="typo-p1 mb-8">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer finibus sodales commodo. Curabitur arcu arcu, pretium quis eros eu, lobortis convallis nulla. Curabitur gravida est odio, eget ornare tortor eleifend in. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam non molestie elit. </p>
<a href="#" class="typo-l1 pb-4">
Read more →
</a>
</div>
</div>
</div>
<div class="basis-1/2">
<div class="bg-yellow-50 rounded-lg p-10">
<div class="flex flex-col text-left">
<div class="mb-6">
<img src="https://picsum.photos/id/237/536/35" alt="Test" class="rounded w-12 h-12">
</div>
<h4 class="typo-h4 mb-4">
Title
</h4>
<p class="typo-p1 mb-8">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer finibus sodales commodo. Curabitur arcu arcu, pretium quis eros eu, lobortis convallis nulla. Curabitur gravida est odio, eget ornare tortor eleifend in. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam non molestie elit. </p>
<a href="#" class="typo-l1 pb-4">
Read more →
</a>
</div>
</div>
</div>
</div>
Please see code in full view
You can also achieve the same thing in the same column just by changing the flex direction from row to col.

How to make text fill div without overflowing?

I am trying to fill the text in the grids such that it is readable on all kinds of devices. I also want the text to be center aligned (vertically and horizontally).
HTML:
<div class="d-none d-lg-block">
<div class="container-fluid">
<div class="row">
<div class="col-lg-3">
<h1 class="display-6">Solar Tracker</h1>
<div class="v-align">
<p class="text">The Solar Tracker is a device that that controls the positioning of a Solar Panel as to utilize the maximum amount of sunlight available. </p>
<button onclick="window.location.href='projects/solar_tracker.html'" type="button" class="btn btn-primary" style="margin:0 auto;display:block;">Learn More</button>
</div>
</div>
<div class="col-lg-3 alternate_2">
<h1 class="display-6">Plant Grower</h1>
<div class="v-align">
<p class="text">A controlled environment to grow plants indoors, using an Arduino, a grow light, and various sensors.</p>
<button onclick="window.location.href='projects/plant.html'" type="button" class="btn btn-primary" style="margin:0 auto;display:block;">Learn More</button>
</div>
</div>
<div class="col-lg-3">
<h1 class="display-6">Home Automation</h1>
<div class="v-align">
<p class="text">Home Automation is building systems which allow us to digitally control the appliances in our homes.</p>
<button onclick="window.location.href='projects/home_automation.html'" type="button" class="btn btn-primary" style="margin:0 auto;display:block;">Learn More</button>
</div>
</div>
<div class="col-lg-3 alternate_2">
<h1 class="display-6">PCB Design</h1>
<div class="v-align">
<p class="text">PCB stands for Printed Circuit Board. A printed circuit board mechanically supports and electrically connects electrical or electronic components using conductive tracks, pads and other features etched from one or more sheet layers of copper laminated onto and/or between sheet layers of a non-conductive substrate.</p>
<button onclick="window.location.href='projects/pcb_design.html'" type="button" class="btn btn-primary" style="margin:0 auto;display:block;">Learn More</button>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-3 alternate_2">
<h1 class="display-6">Studio Griot</h1>
<div class="v-align">
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dui ultrices, ornare mauris in, ultricies sapien. Proin dictum urna quis mauris pharetra, sit amet aliquam diam suscipit. In congue.</p>
<button onclick="window.location.href='internships/studio_griot.html'" type="button" class="btn btn-primary" style="margin:0 auto;display:block;">Learn More</button>
</div>
</div>
<div class="col-lg-3">
<h1 class="display-6">Web Development</h1>
<div class="v-align">
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dui ultrices, ornare mauris in, ultricies sapien. Proin dictum urna quis mauris pharetra, sit amet aliquam diam suscipit. In congue.</p>
<button onclick="window.location.href='projects/web_development.html'" type="button" class="btn btn-primary" style="margin:0 auto;display:block;">Learn More</button>
</div>
</div>
<div class="col-lg-3 alternate_2">
<h1 class="display-6">Data Visualisation</h1>
<div class="v-align">
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dui ultrices, ornare mauris in, ultricies sapien. Proin dictum urna quis mauris pharetra, sit amet aliquam diam suscipit. In congue.</p>
<button onclick="window.location.href='projects/data_visualisation.html'" type="button" class="btn btn-primary" style="margin:0 auto;display:block;">Learn More</button>
</div>
</div>
<div class="col-lg-3">
<h1 class="display-6">Stem CS Labs</h1>
<div class="v-align">
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dui ultrices, ornare mauris in, ultricies sapien. Proin dictum urna quis mauris pharetra, sit amet aliquam diam suscipit. In congue.</p>
<button onclick="window.location.href='internships/stem_cs.html'" type="button" class="btn btn-primary" style="margin:0 auto;display:block;">Learn More</button>
</div>
</div>
</div>
</div>
CSS:
#media(min-width:1100px){
.row{
height: 50vh;
}
.col-lg-3{
text-align: center;
position: relative;
}
.v-align{
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
}
}
#media(min-width:750px){
.row{
height: 50vh;
}
}
.alternate_2{
background-color: rgb(250,244,246);
}
.display-6{
padding-top: 20px;
}
.text{
text-align: center;
}
Desktop Output:
Laptop Output:
iPad Output:
As you can see in all the outputs, the text within the grid is either too small to read (desktop), overflowing from the grid (laptop), or changes the grid size (iPad). What I am trying to do it to keep make the text readable and centered, along with retaining the grid shape of the page, on all devices. How can I do this?
Thank you

Using flexbox and auto margins we can align vertically and horizontally.
Demo
[flex]{
width:400;
height:200px;
border:1px solid;
display:flex;
}
[flex]>span{
margin:auto;
}
<p flex><span>Some text</span><p>
auto margins will consume white space evenly on all sides, We can do the same using alignment Properties However since flexbox does true centering it that would case the same issue as the one you're facing related
.row {
height: 50vh;
}
.col-lg-3 {
text-align: center;
}
.alternate_2 {
background-color: rgb(250,244,246);
}
.display-6 {
padding-top: 20px;
}
.text {
text-align: center;
}
/* New */
.col-lg-3 {
text-align: center;
overflow:auto;
height:100%;
display: flex;
flex-direction: column;
}
/* Former .v-align class, Now manages centering on both axis*/
.centerVH{
margin:auto;
/* Since the text fills all the width, We Must reduce it's width */
max-width:75%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-none d-lg-block">
<div class="container-fluid">
<div class="row">
<div class="col-lg-3">
<h1 class="display-6">Solar Tracker</h1>
<div class="centerVH"><p class="text">The Solar Tracker is a device that that controls the positioning of a Solar Panel as to utilize the maximum amount of sunlight available. </p>
<button onclick="window.location.href='projects/solar_tracker.html'" type="button" class="btn btn-primary">Learn More</button>
</div>
</div>
<div class="col-lg-3 alternate_2">
<h1 class="display-6">Plant Grower</h1>
<div class="centerVH"><p class="text">A controlled environment to grow plants indoors, using an Arduino, a grow light, and various sensors.</p>
<button onclick="window.location.href='projects/plant.html'" type="button" class="btn btn-primary">Learn More</button>
</div>
</div>
<div class="col-lg-3">
<h1 class="display-6">Home Automation</h1>
<div class="centerVH"><p class="text">Home Automation is building systems which allow us to digitally control the appliances in our homes.</p>
<button onclick="window.location.href='projects/home_automation.html'" type="button" class="btn btn-primary">Learn More</button>
</div>
</div>
<div class="col-lg-3 alternate_2">
<h1 class="display-6">PCB Design</h1>
<div class="centerVH"><p class="text">PCB stands for Printed Circuit Board. A printed circuit board mechanically supports and electrically connects electrical or electronic components using conductive tracks, pads and other features etched from one or more sheet layers of copper laminated onto and/or between sheet layers of a non-conductive substrate.</p>
<button onclick="window.location.href='projects/pcb_design.html'" type="button" class="btn btn-primary">Learn More</button>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-3 alternate_2">
<h1 class="display-6">Studio Griot</h1>
<div class="centerVH"><p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dui ultrices, ornare mauris in, ultricies sapien. Proin dictum urna quis mauris pharetra, sit amet aliquam diam suscipit. In congue.</p>
<button onclick="window.location.href='internships/studio_griot.html'" type="button" class="btn btn-primary">Learn More</button>
</div>
</div>
<div class="col-lg-3">
<h1 class="display-6">Web Development</h1>
<div class="centerVH"><p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dui ultrices, ornare mauris in, ultricies sapien. Proin dictum urna quis mauris pharetra, sit amet aliquam diam suscipit. In congue.</p>
<button onclick="window.location.href='projects/web_development.html'" type="button" class="btn btn-primary">Learn More</button>
</div>
</div>
<div class="col-lg-3 alternate_2">
<h1 class="display-6">Data Visualisation</h1>
<div class="centerVH"><p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dui ultrices, ornare mauris in, ultricies sapien. Proin dictum urna quis mauris pharetra, sit amet aliquam diam suscipit. In congue.</p>
<button onclick="window.location.href='projects/data_visualisation.html'" type="button" class="btn btn-primary">Learn More</button>
</div>
</div>
<div class="col-lg-3">
<h1 class="display-6">Stem CS Labs</h1>
<div class="centerVH"><p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dui ultrices, ornare mauris in, ultricies sapien. Proin dictum urna quis mauris pharetra, sit amet aliquam diam suscipit. In congue.</p>
<button onclick="window.location.href='internships/stem_cs.html'" type="button" class="btn btn-primary">Learn More</button>
</div>
</div>
</div>
</div>
An issue will arise when 50vh on .row would be shorter than the text, I made .col-lg-3 scrollable when that happens, However it's up to you how you want to deal with it.

I suggest not to over complicate things in CSS, there are better ways, and more reliable, to do this. Use CSS Flex for example.
.alternate_2 {
background-color: rgb(250,244,246);
}
.row {
display: flex;
flex-wrap: wrap;
text-align: center;
}
.col-lg-3 {
width: 100%;
padding: 2vw;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.v-align, .text {
flex-grow: 1;
display: flex;
flex-direction: column;
}
.text {
justify-content: center;
}
#media(min-width: 500px) {
.col-lg-3 {
width: 50%;
}
}
#media(min-width: 1200px) {
.col-lg-3 {
width: 25%;
}
}
<div class="d-none d-lg-block">
<div class="container-fluid">
<div class="row">
<div class="col-lg-3">
<h1 class="display-6">Solar Tracker</h1>
<div class="v-align">
<p class="text">The Solar Tracker is a device that that controls the positioning of a Solar Panel as to utilize the maximum amount of sunlight available. </p>
<button onclick="window.location.href='projects/solar_tracker.html'" type="button" class="btn btn-primary" style="margin:0 auto;display:block;">Learn More</button>
</div>
</div>
<div class="col-lg-3 alternate_2">
<h1 class="display-6">Plant Grower</h1>
<div class="v-align">
<p class="text">A controlled environment to grow plants indoors, using an Arduino, a grow light, and various sensors.</p>
<button onclick="window.location.href='projects/plant.html'" type="button" class="btn btn-primary" style="margin:0 auto;display:block;">Learn More</button>
</div>
</div>
<div class="col-lg-3">
<h1 class="display-6">Home Automation</h1>
<div class="v-align">
<p class="text">Home Automation is building systems which allow us to digitally control the appliances in our homes.</p>
<button onclick="window.location.href='projects/home_automation.html'" type="button" class="btn btn-primary" style="margin:0 auto;display:block;">Learn More</button>
</div>
</div>
<div class="col-lg-3 alternate_2">
<h1 class="display-6">PCB Design</h1>
<div class="v-align">
<p class="text">PCB stands for Printed Circuit Board. A printed circuit board mechanically supports and electrically connects electrical or electronic components using conductive tracks, pads and other features etched from one or more sheet layers of copper laminated onto and/or between sheet layers of a non-conductive substrate.</p>
<button onclick="window.location.href='projects/pcb_design.html'" type="button" class="btn btn-primary" style="margin:0 auto;display:block;">Learn More</button>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-3 alternate_2">
<h1 class="display-6">Studio Griot</h1>
<div class="v-align">
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dui ultrices, ornare mauris in, ultricies sapien. Proin dictum urna quis mauris pharetra, sit amet aliquam diam suscipit. In congue.</p>
<button onclick="window.location.href='internships/studio_griot.html'" type="button" class="btn btn-primary" style="margin:0 auto;display:block;">Learn More</button>
</div>
</div>
<div class="col-lg-3">
<h1 class="display-6">Web Development</h1>
<div class="v-align">
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dui ultrices, ornare mauris in, ultricies sapien. Proin dictum urna quis mauris pharetra, sit amet aliquam diam suscipit. In congue.</p>
<button onclick="window.location.href='projects/web_development.html'" type="button" class="btn btn-primary" style="margin:0 auto;display:block;">Learn More</button>
</div>
</div>
<div class="col-lg-3 alternate_2">
<h1 class="display-6">Data Visualisation</h1>
<div class="v-align">
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dui ultrices, ornare mauris in, ultricies sapien. Proin dictum urna quis mauris pharetra, sit amet aliquam diam suscipit. In congue.</p>
<button onclick="window.location.href='projects/data_visualisation.html'" type="button" class="btn btn-primary" style="margin:0 auto;display:block;">Learn More</button>
</div>
</div>
<div class="col-lg-3">
<h1 class="display-6">Stem CS Labs</h1>
<div class="v-align">
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dui ultrices, ornare mauris in, ultricies sapien. Proin dictum urna quis mauris pharetra, sit amet aliquam diam suscipit. In congue.</p>
<button onclick="window.location.href='internships/stem_cs.html'" type="button" class="btn btn-primary" style="margin:0 auto;display:block;">Learn More</button>
</div>
</div>
</div>
</div>
</div>

Can't seem to get my bootstrap grid/flex-boxes right

I'm using Bootstrap 4 and I'm trying to build a website for a client but I can't seem to get the grid to behave/expand as I want it to.
Here's a rough sketch of what I'm trying to achieve.
Desktop Layout Sketch:
Mobile Layout Sketch:
Here's a code snippet that I currently have that works on Desktop sizes but completly breaks down when the size goes mobile.
<div class="container">
<div class="row">
<div class="col-sm">
<h1 class="main-cap">Your Caption. Goes Here.</h1>
<div class="d-flex main-desc flex-grow-0">Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Vivamus in nisl
tempor, porttitor quam eu, lacinia nibh. Etiam
interdum est magna, vel ullamcorper arcu
dignissim sit amet. Nullam commodo elementum
felis, id congue dui facilisis sit amet. </div>
</div>
<div class="col-sm hidden-xs">
<img src="assets/vectors/graphic.svg" class="img-fluid graphic-50px" alt="Engineering Graphic">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-6 style="padding-left: 30px;">
<button type="button" class="learn-more btn btn-outline-primary btn-block btn-lg">
Learn more
<i class="material-icons arrow-right">keyboard_arrow_right</i>
</button>
</div>
</div>
<div class="row">
<div class="socials col-xs-6"></div>
<div class="email-form col-xs-6"></div>
</div>
Any help is appreciated.
Thanks.

Your code had tags and double quotes missing... to get the effect you want, you'd have to insert (either "the image" or "the description & buttons") twice and toggle it at the appropriate breakpoint...
code snippet below:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-12 col-md-6">
<h1 class="main-cap">Your Caption. Goes Here.</h1>
<div class="col-12 col-md-6 d-block d-sm-block d-md-none" style='border:1px solid pink'>
<img src="https://www.akberiqbal.com/Jumbo.jpg" class="img-fluid graphic-50px" alt="Engineering Graphic">
</div>
<div class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus in nisl tempor, porttitor quam eu, lacinia nibh. Etiam interdum est magna, vel ullamcorper arcu dignissim sit amet. Nullam commodo elementum felis, id congue dui facilisis sit amet.
</div>
<button type="button" class="learn-more btn btn-primary ">
Learn more
<i class="material-icons arrow-right">keyboard_arrow_right</i>
</button>
</div>
<div class="col-12 col-md-6 d-none d-sm-none d-md-block" style='border:1px solid red'>
<img src="https://www.akberiqbal.com/Jumbo.jpg" class="img-fluid graphic-50px" alt="Engineering Graphic">
</div>
</div>
</div>

hover function not able to implement when I click on the image

I came across a hover menu and trying to implement but not able to get the desired effect. On Click on the company logo, a dropdown should appear.
my code:
.client-container{
position: relative;
display: inline-block;
}
.client-content {
display: none;
position: absolute;
background-color: #fff;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
top:0;
transition:337ms ease-in-out;
}
.client-container:hover .client-content {
display: block;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-12 mt-5">
<h2 class="text-center">Our Clients</h2>
</div>
</div>
<div class="row">
<div class="col-lg-3 text-center client-container">
<img src="http://pngimg.com/uploads/sony_logo/sony_logo_PNG2.png" width="100" height="80">
<div class="client-content p-4">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis dui vitae placerat vehicula. Aliquam ante lectus, suscipit non eros eu, mattis tempus turpis. Curabitur iaculis hendrerit dolor quis ultricies. Donec dignissim rutrum lectus
et dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi.</p>
<a class="btn btn-custom">Read More</a>
</div>
</div>
<div class="col-lg-3 text-center">
<img src="images/tracfone-1.png">
</div>
<div class="col-lg-3 text-center">
<img src="images/health.png">
</div>
<div class="col-lg-3 text-center">
<img src="images/Homepage_slice_4_logo3_color.png">
</div>
</div>
<div class="row">
<div class="col-lg-3 text-center">
<img src="images/Homepage_slice_4_logo2_color.png">
</div>
<div class="col-lg-3 text-center">
<img src="images/Cnetric_Client_Logo_DKSH-1.png">
</div>
<div class="col-lg-3 text-center">
<img src="images/Cnetric_Client_Logo_david-jones-1.png">
</div>
<div class="col-lg-3 text-center">
<img src="images/canon.png">
</div>
</div>
<div class="row">
<div class="col-lg-3 text-center">
<img src="images/roche.png">
</div>
<div class="col-lg-3 text-center">
<img src="images/coles.png">
</div>
<div class="col-lg-3 text-center">
<img src="images/Cnetric_Client_Logo_helicord.png">
</div>
<div class="col-lg-3 text-center">
<img src="images/telstra.png">
</div>
</div>
<div class="row">
<div class="col-lg-12 text-center text-center">
<button class="btn btn-warning">All Clients</button>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
Can anybody help me in this issue.In my case hover menu is coming but its hiding the logo.I'm did try with z index but still nothing is happening. It's totally hidden. I'm totally out in the dark how to proceed with this one.Thank You

Just remove the position absolute;
.client-container{
position: relative;
display: inline-block;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
top:0;
background-color: #fff;
transition:337ms ease-in-out;
min-height: 80px;
}
.client-content {
display: none;
min-width: 160px;
}
.client-container:hover .client-content {
display: block;
}
.client-container:hover {
position: absolute;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-12 mt-5">
<h2 class="text-center">Our Clients</h2>
</div>
</div>
<div class="row">
<div class="col-lg-3 text-center client-container">
<img src="http://pngimg.com/uploads/sony_logo/sony_logo_PNG2.png" width="100" height="80">
<div class="client-content p-4">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis dui vitae placerat vehicula. Aliquam ante lectus, suscipit non eros eu, mattis tempus turpis. Curabitur iaculis hendrerit dolor quis ultricies. Donec dignissim rutrum lectus
et dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi.</p>
<a class="btn btn-custom">Read More</a>
</div>
</div>
<div class="col-lg-3 text-center">
<img src="images/tracfone-1.png">
</div>
<div class="col-lg-3 text-center">
<img src="images/health.png">
</div>
<div class="col-lg-3 text-center">
<img src="images/Homepage_slice_4_logo3_color.png">
</div>
</div>
<div class="row">
<div class="col-lg-3 text-center">
<img src="images/Homepage_slice_4_logo2_color.png">
</div>
<div class="col-lg-3 text-center">
<img src="images/Cnetric_Client_Logo_DKSH-1.png">
</div>
<div class="col-lg-3 text-center">
<img src="images/Cnetric_Client_Logo_david-jones-1.png">
</div>
<div class="col-lg-3 text-center">
<img src="images/canon.png">
</div>
</div>
<div class="row">
<div class="col-lg-3 text-center">
<img src="images/roche.png">
</div>
<div class="col-lg-3 text-center">
<img src="images/coles.png">
</div>
<div class="col-lg-3 text-center">
<img src="images/Cnetric_Client_Logo_helicord.png">
</div>
<div class="col-lg-3 text-center">
<img src="images/telstra.png">
</div>
</div>
<div class="row">
<div class="col-lg-12 text-center text-center">
<button class="btn btn-warning">All Clients</button>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

Just change top:0 in your code.
.client-container{
position: relative;
display: inline-block;
}
.client-content {
display: none;
position: absolute;
background-color: #fff;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
top: 80px; /* img's height */
left: 0;
width: 100%;
transition:337ms ease-in-out;
}
.client-container:hover .client-content {
display: block;
}
/* i added border for reference */
.client-container:hover, .client-content{border: 1px solid}.client-container:hover{border-bottom-color:transparent}.client-content{border-top-color:transparent}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-12 mt-5">
<h2 class="text-center">Our Clients</h2>
</div>
</div>
<div class="row">
<div class="col-lg-3 text-center client-container">
<img src="http://pngimg.com/uploads/sony_logo/sony_logo_PNG2.png" width="100" height="80">
<div class="client-content p-4">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis dui vitae placerat vehicula. Aliquam ante lectus, suscipit non eros eu, mattis tempus turpis. Curabitur iaculis hendrerit dolor quis ultricies. Donec dignissim rutrum lectus
et dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi.</p>
<a class="btn btn-custom">Read More</a>
</div>
</div>
<div class="col-lg-3 text-center">
<img src="images/tracfone-1.png">
</div>
<div class="col-lg-3 text-center">
<img src="images/health.png">
</div>
<div class="col-lg-3 text-center">
<img src="images/Homepage_slice_4_logo3_color.png">
</div>
</div>
<div class="row">
<div class="col-lg-3 text-center">
<img src="images/Homepage_slice_4_logo2_color.png">
</div>
<div class="col-lg-3 text-center">
<img src="images/Cnetric_Client_Logo_DKSH-1.png">
</div>
<div class="col-lg-3 text-center">
<img src="images/Cnetric_Client_Logo_david-jones-1.png">
</div>
<div class="col-lg-3 text-center">
<img src="images/canon.png">
</div>
</div>
<div class="row">
<div class="col-lg-3 text-center">
<img src="images/roche.png">
</div>
<div class="col-lg-3 text-center">
<img src="images/coles.png">
</div>
<div class="col-lg-3 text-center">
<img src="images/Cnetric_Client_Logo_helicord.png">
</div>
<div class="col-lg-3 text-center">
<img src="images/telstra.png">
</div>
</div>
<div class="row">
<div class="col-lg-12 text-center text-center">
<button class="btn btn-warning">All Clients</button>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

Try This:
.client-container{
position: relative;
display: inline-block;
}
.client-content {
display: none;
position: absolute;
background-color: #fff;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
top:0;
transition:337ms ease-in-out;
}
.client-container:hover .client-content {
display: block;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-12 mt-5">
<h2 class="text-center">Our Clients</h2>
</div>
</div>
<div class="row">
<div class="col-lg-3 text-center client-container">
<img src="https://www.gstatic.com/webp/gallery/1.sm.jpg" width="80%" height="auto">
<div class="client-content p-4">
<img src="https://www.gstatic.com/webp/gallery/1.sm.jpg" width="100%" height="auto">
<p style="padding-top: 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis dui vitae placerat vehicula. Aliquam ante lectus, suscipit non eros eu, mattis tempus turpis. Curabitur iaculis hendrerit dolor quis ultricies. Donec dignissim rutrum lectus
et dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi.</p>
<a class="btn btn-custom">Read More</a>
</div>
</div>
<div class="col-lg-3 text-center client-container">
<img src="https://www.gstatic.com/webp/gallery/2.sm.jpg" width="80%" height="auto">
<div class="client-content p-4">
<img src="https://www.gstatic.com/webp/gallery/2.sm.jpg" width="100%" height="auto">
<p style="padding-top: 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis dui vitae placerat vehicula. Aliquam ante lectus, suscipit non eros eu, mattis tempus turpis. Curabitur iaculis hendrerit dolor quis ultricies. Donec dignissim rutrum lectus
et dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi.</p>
<a class="btn btn-custom">Read More</a>
</div>
</div>
<div class="col-lg-3 text-center client-container">
<img src="https://www.gstatic.com/webp/gallery/3.sm.jpg" width="80%" height="auto">
<div class="client-content p-4">
<img src="https://www.gstatic.com/webp/gallery/3.sm.jpg" width="100%" height="auto">
<p style="padding-top: 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis dui vitae placerat vehicula. Aliquam ante lectus, suscipit non eros eu, mattis tempus turpis. Curabitur iaculis hendrerit dolor quis ultricies. Donec dignissim rutrum lectus
et dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi.</p>
<a class="btn btn-custom">Read More</a>
</div>
</div>
<div class="col-lg-3 text-center client-container">
<img src="https://www.gstatic.com/webp/gallery/4.sm.jpg" width="80%" height="auto">
<div class="client-content p-4">
<img src="https://www.gstatic.com/webp/gallery/4.sm.jpg" width="100%" height="auto">
<p style="padding-top: 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis dui vitae placerat vehicula. Aliquam ante lectus, suscipit non eros eu, mattis tempus turpis. Curabitur iaculis hendrerit dolor quis ultricies. Donec dignissim rutrum lectus
et dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi.</p>
<a class="btn btn-custom">Read More</a>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-3 text-center client-container">
<img src="https://www.gstatic.com/webp/gallery/5.sm.jpg" width="80%" height="auto">
<div class="client-content p-4">
<img src="https://www.gstatic.com/webp/gallery/5.sm.jpg" width="100%" height="auto">
<p style="padding-top: 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis dui vitae placerat vehicula. Aliquam ante lectus, suscipit non eros eu, mattis tempus turpis. Curabitur iaculis hendrerit dolor quis ultricies. Donec dignissim rutrum lectus
et dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi.</p>
<a class="btn btn-custom">Read More</a>
</div>
</div>
<div class="col-lg-3 text-center client-container">
<img src="https://www.gstatic.com/webp/gallery/4.sm.jpg" width="80%" height="auto">
<div class="client-content p-4">
<img src="https://www.gstatic.com/webp/gallery/4.sm.jpg" width="100%" height="auto">
<p style="padding-top: 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis dui vitae placerat vehicula. Aliquam ante lectus, suscipit non eros eu, mattis tempus turpis. Curabitur iaculis hendrerit dolor quis ultricies. Donec dignissim rutrum lectus
et dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi.</p>
<a class="btn btn-custom">Read More</a>
</div>
</div>
<div class="col-lg-3 text-center client-container">
<img src="https://www.gstatic.com/webp/gallery/3.sm.jpg" width="80%" height="auto">
<div class="client-content p-4">
<img src="https://www.gstatic.com/webp/gallery/3.sm.jpg" width="100%" height="auto">
<p style="padding-top: 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis dui vitae placerat vehicula. Aliquam ante lectus, suscipit non eros eu, mattis tempus turpis. Curabitur iaculis hendrerit dolor quis ultricies. Donec dignissim rutrum lectus
et dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi.</p>
<a class="btn btn-custom">Read More</a>
</div>
</div>
<div class="col-lg-3 text-center client-container">
<img src="https://www.gstatic.com/webp/gallery/2.sm.jpg" width="80%" height="auto">
<div class="client-content p-4">
<img src="https://www.gstatic.com/webp/gallery/2.sm.jpg" width="100%" height="auto">
<p style="padding-top: 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis dui vitae placerat vehicula. Aliquam ante lectus, suscipit non eros eu, mattis tempus turpis. Curabitur iaculis hendrerit dolor quis ultricies. Donec dignissim rutrum lectus
et dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi.</p>
<a class="btn btn-custom">Read More</a>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-3 text-center client-container">
<img src="https://www.gstatic.com/webp/gallery/1.sm.jpg" width="80%" height="auto">
<div class="client-content p-4">
<img src="https://www.gstatic.com/webp/gallery/1.sm.jpg" width="100%" height="auto">
<p style="padding-top: 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis dui vitae placerat vehicula. Aliquam ante lectus, suscipit non eros eu, mattis tempus turpis. Curabitur iaculis hendrerit dolor quis ultricies. Donec dignissim rutrum lectus
et dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi.</p>
<a class="btn btn-custom">Read More</a>
</div>
</div>
<div class="col-lg-3 text-center client-container">
<img src="https://www.gstatic.com/webp/gallery/2.sm.jpg" width="80%" height="auto">
<div class="client-content p-4">
<img src="https://www.gstatic.com/webp/gallery/2.sm.jpg" width="100%" height="auto">
<p style="padding-top: 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis dui vitae placerat vehicula. Aliquam ante lectus, suscipit non eros eu, mattis tempus turpis. Curabitur iaculis hendrerit dolor quis ultricies. Donec dignissim rutrum lectus
et dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi.</p>
<a class="btn btn-custom">Read More</a>
</div>
</div>
<div class="col-lg-3 text-center client-container">
<img src="https://www.gstatic.com/webp/gallery/3.sm.jpg" width="80%" height="auto">
<div class="client-content p-4">
<img src="https://www.gstatic.com/webp/gallery/3.sm.jpg" width="100%" height="auto">
<p style="padding-top: 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis dui vitae placerat vehicula. Aliquam ante lectus, suscipit non eros eu, mattis tempus turpis. Curabitur iaculis hendrerit dolor quis ultricies. Donec dignissim rutrum lectus
et dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi.</p>
<a class="btn btn-custom">Read More</a>
</div>
</div>
<div class="col-lg-3 text-center client-container">
<img src="https://www.gstatic.com/webp/gallery/3.sm.jpg" width="80%" height="auto">
<div class="client-content p-4">
<img src="https://www.gstatic.com/webp/gallery/3.sm.jpg" width="100%" height="auto">
<p style="padding-top: 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis dui vitae placerat vehicula. Aliquam ante lectus, suscipit non eros eu, mattis tempus turpis. Curabitur iaculis hendrerit dolor quis ultricies. Donec dignissim rutrum lectus
et dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi.</p>
<a class="btn btn-custom">Read More</a>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 text-center text-center">
<button class="btn btn-warning">All Clients</button>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

How can replace HTML "images/" tags using perl

How can I replace the "images/" of an HTML file to some other word (i.e. "bebe")?
This is my code, but it is not working:
#!/usr/bin/perl
########################################## Carrega Modulos
use LWP::UserAgent;
use LWP::Simple;
$ua = new LWP::UserAgent;
$ua->agent('Mozilla/5.0 (X11; U; NetBSD i386; en-US; rv:1.8.1.12) Gecko/20080301 Firefox/2.0.0.12');
my $pedido1 = new HTTP::Request GET =>"http://localhost/site1/index.html";
my $resposta1 = $ua->request($pedido1) or die "Erro no site scanner\n";
my $res1 = $resposta1->content;
open (OUT, ">>hit.txt"); print OUT "$res1\n"; close(OUT); $cont=$cont+1;
$res1 =~ s/"images"/"bebe"/g;
print $res1;
This my HTML:
<!DOCTYPE html>
Reponsive HTML Template
http://fonts.googleapis.com/css?family=Roboto:400,300,700,100' rel='stylesheet' type='text/css'>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-center navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown"> Pages
<ul class="dropdown-menu">
<li>Home / Fixed</li>
<li>Home + Blog</li>
<li>Portfolio</li>
<li>Typography</li>
<li>Shortcodes</li>
<li>Blog & News</li>
<li>Tables</li>
<li>FAQ</li>
</ul>
</li>
<li>left sidebar</li>
<li>right sidebar</li>
<li>full page</li>
<li>contact us</li>
</ul>
</div>
<!-- /.navbar-collapse -->
<div class="clr"></div>
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<h1 class="navbar-brand"><span>anti</span>que</h1>
</div>
</nav>
<!-- Indicators -->
<div class="carousel-inner">
<div class="item"> <img data-src="images/slider/slider1.jpg" alt="First slide" src="images/slider/slider1.jpg">
<div class="container">
<div class="carousel-caption">
<h1>Vivamus ultricies volutpat egestas. Donec <span>turpis non eros</span> euismod </h1>
<p>Aliquam sit amet lectus sagittis, feugiat neque dictum, rutrum augue. Integer vel egestas urna. </p>
<p><a class="btn btn-default" href="#" role="button">more details</a></p>
</div>
</div>
</div>
<div class="item active"> <img data-src="images/slider/slider2.jpg" alt="Second slide" src="images/slider/slider2.jpg">
<div class="container">
<div class="carousel-caption">
<h1>Donec <span>volutpat mattis</span> odio. Quisque eros. Nullam malesuada. </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. </p>
<p><a class="btn btn-default" href="#" role="button">get started</a></p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon carousel-control-left"></span></a> <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon carousel-control-right"></span></a> </div>
<h2 class="text-center">Phasellus ultrices nulla quis nibh. Quisque a lectus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</h2>
<p class="text-center big-paragraph">Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</div>
<h2><span>our services</span></h2>
<div class="row">
<div class="col-md-4"> <img src="images/icons/ico1.png" alt="icon" class="icon">
<h3>CLEAN FLAT & MINIMAL</h3>
<img src="images/content__images/img1.jpg" alt="image" class="img-rounded img-responsive">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
</div>
<div class="col-md-4"> <img src="images/icons/ico2.png" alt="icon" class="icon">
<h3>FULLY RESPONSIVE</h3>
<img src="images/content__images/img2.jpg" alt="image" class="img-rounded img-responsive">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
</div>
<div class="col-md-4"> <img src="images/icons/ico3.png" alt="icon" class="icon">
<h3>EASY TO CUSTOMIZE</h3>
<img src="images/content__images/img3.jpg" alt="image" class="img-rounded img-responsive">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
</div>
</div>
</div>
<h2 class="text-center"><span>about us</span></h2>
<div class="row text-center">
<div class="col-md-6">
<h3>Donec odio. Quisque volutpat mattis eros.
Nullam malesuada erat. </h3>
<p><small>Praesent semper mod quis eget mi. Etiam eu ante risus. </small></p>
<img src="images/content__images/pic1.jpg" class="img-rounded img-responsive" alt="pic1">
<div class="clearfix"></div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
<p><a class="btn btn-info btn-lg" href="#" role="button">Learn more</a></p>
</div>
<div class="col-md-6">
<h3>Etiam eu ante risus. Aliquam erat volutpat.
Aliquam luctus mattis.</h3>
<p><small>Praesent semper mod quis eget mi. Etiam eu ante risus. </small></p>
<img src="images/content__images/pic2.jpg" class="img-rounded img-responsive" alt="pic2">
<div class="clearfix"></div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
<p><a class="btn btn-info btn-lg" href="#" role="button">Learn more</a></p>
</div>
</div>
</div>
<div class="container">
<h2 class="">Pellentesque egestas sem. Suspendisse commodo ullamcorper magna. Pellentesque egestas sem suspendisse commodo ullamcorper ...</h2>
<p class="">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore eritatis et quasi architecto beatae vitae dicta sunt explicabo.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt.</p>
<p><a class="btn btn-info" href="#" role="button">Buy it</a><a class="btn btn-default" href="#" role="button">Learn More</a></p>
</div>
<h3>About</h3>
<p>We strive to deliver a level of service that exceeds the expectations of our customers. <br />
<br />
If you have any questions about our products or services, please do not hesitate to contact us. We have friendly, knowledgeable representatives available seven days a week to assist you.</p>
</div>
<div class="col-md-3">
<h3>Tweets</h3>
<p><span>Tweet</span> #You<br />
Etiam egestas, ipsum posuere accumsan sollicitudin, nulla mauris volutpat sem, sit amet rutrum risus. </p>
<p><span>Tweet</span> #You<br />
Quisque porta tellus vitae adipiscing molestie. Mauris et lacus blandit, malesuada.</p>
</div>
<div class="col-md-3">
<h3>Mailing list</h3>
<p>Subscribe to our mailing list for offers, news updates and more!</p>
<br />
<form action="#" method="post" class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">your email:</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="your email:">
</div>
<button type="submit" class="btn btn-primary">subscribe</button>
</form>
</div>
<div class="col-md-3">
<h3>Business</h3>
<p>Street<br />
City, State <br />
Country<br />
<br />
Phone: (111) 123-4567<br />
Fax: (111) 123-4567<br />
<br />
</p>
<div class="social__icons"> </div>
</div>
</div>
$('.carousel').carousel({
interval: 3500, // in milliseconds
pause: 'none' // set to 'true' to pause slider on mouse hover
})

Assuming failure is at REGEX.
Remove the quotes from your regular expression.
$res1 =~ s/images/bebe/g;
EDIT:
Looking at inferno's comment, you might want this instead. It will match images inside src and data-source attributes.
$res1 =~ s/(src|data-source)="images\//$1="bebe/g;
Be aware this is removing forward slash after 'images' so if that isn't your intention, you can either remove that part of the pattern or add it back in on the replacement side.
Option #1
$res1 =~ s/(src|data-source)="images/$1="bebe/g; # Removed from pattern
Option #2
$res1 =~ s/(src|data-source)="images\//$1="bebe\//g; # Added back in on replacement