I have a row of bootstrap cards, but the '.card-text' is not displayed properly. I tried giving more space to '.card-text' to let it display correctly but nothing is changing. Here is the code:
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/stackoverflow/1/css.css"/>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<div id="skills_container">
<div style="width: 18rem;">
<img src="/img/fotos-index/optimizadas/html.webp" alt="...">
<div >
<h5 >HTML</h5>
<p >Basic and complex HTML tags for different uses.</p>
</div>
</div>
<div style="width: 18rem;">
<img src="/img/fotos-index/optimizadas/css.webp" alt="...">
<div >
<h5 >CSS</h5>
<p >Knowledge in CSS displays, Responsive design and animations</p>
</div>
</div>
<div style="width: 18rem;">
<img src="/img/fotos-index/optimizadas/cambridge.webp" alt="...">
<div >
<h5 >B1 Cambridge English</h5>
<p >Cambridge B1 Degree English Level.</p>
</div>
</div>
<div style="width: 18rem;">
<img src="/img/fotos-index/optimizadas/js.webp" alt="...">
<div >
<h5 >Javascript Client Basics</h5>
<p >Basic usage of js in client</p>
</div>
</div>
<div style="width: 18rem;">
<img src="/img/fotos-index/optimizadas/python.webp" alt="...">
<div >
<h5 >Python Basics</h5>
<p >Knowledge in basic uses of python</p>
</div>
</div>
<div style="width: 18rem;">
<img src="/img/fotos-index/optimizadas/marketing.webp" alt="...">
<div >
<h5 >Analytics and Markeing</h5>
<p >Analytics and Digital Marketing knowledge.</p>
</div>
</div>
</div>
</body>
</html>
CSS:
#skills_container{
width:96vw;
display:flex;
overflow-y: hidden;
overflow-x:auto;
white-space:nowrap;
padding:1rem;
border:1px solid;
border-radius:1rem;
}
.card{
display:inline-block;
margin:0 2px;
}
/* .card-text{
} */
If you like to, you can directly go to the hosted site on: https://paucabrera.com/stackoverflow/1/
CodePudding user response：
Try this
#skills_container{
width:96vw;
display:flex;
overflow-y: hidden;
overflow-x:auto;
white-space:nowrap;
padding:1rem;
border:1px solid;
border-radius:1rem;
}
.card{
display:inline-block;
margin:0 2px;
}
.card-body{
white-space: normal;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/stackoverflow/1/css.css"/>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<div id="skills_container">
<div style="width: 18rem;">
<img src="/img/fotos-index/optimizadas/html.webp" alt="...">
<div >
<h5 >HTML</h5>
<p >Basic and complex HTML tags for different uses.</p>
</div>
</div>
<div style="width: 18rem;">
<img src="/img/fotos-index/optimizadas/css.webp" alt="...">
<div >
<h5 >CSS</h5>
<p >Knowledge in CSS displays, Responsive design and animations</p>
</div>
</div>
<div style="width: 18rem;">
<img src="/img/fotos-index/optimizadas/cambridge.webp" alt="...">
<div >
<h5 >B1 Cambridge English</h5>
<p >Cambridge B1 Degree English Level.</p>
</div>
</div>
<div style="width: 18rem;">
<img src="/img/fotos-index/optimizadas/js.webp" alt="...">
<div >
<h5 >Javascript Client Basics</h5>
<p >Basic usage of js in client</p>
</div>
</div>
<div style="width: 18rem;">
<img src="/img/fotos-index/optimizadas/python.webp" alt="...">
<div >
<h5 >Python Basics</h5>
<p >Knowledge in basic uses of python</p>
</div>
</div>
<div style="width: 18rem;">
<img src="/img/fotos-index/optimizadas/marketing.webp" alt="...">
<div >
<h5 >Analytics and Markeing</h5>
<p >Analytics and Digital Marketing knowledge.</p>
</div>
</div>
</div>
</body>
</html>