Hello I was making a website for a friend and for some reason when you run it doesn't show space in between it. If you run it in HTML it shows a space but if you go to the website he published it doesn't show that. The website he published it on is: https://xploit.gq/ . Does anyone have a fix for this?
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="generator" content="Mobirise v5.1.4, mobirise.com">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<link rel="shortcut icon" href="assets/images/logo5.png" type="image/x-icon">
<meta name="description" content="">
<title>Home</title>
<link rel="stylesheet" href="assets/web/assets/mobirise-icons2/mobirise2.css">
<link rel="stylesheet" href="assets/tether/tether.min.css">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap-grid.min.css">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap-reboot.min.css">
<link rel="stylesheet" href="assets/theme/css/style.css">
<link rel="preload" as="style" href="assets/mobirise/css/mbr-additional.css">
<link rel="stylesheet" href="assets/mobirise/css/mbr-additional.css" type="text/css">
</head>
<body>
<section class="header19 cid-scBqiokqjK mbr-fullscreen" id="header19-0">
<div class="container">
<div class="media-container">
<div class="col-md-12 align-center">
<h1 class="mbr-section-title mbr-white mbr-bold mbr-fonts-style mb-3 display-1">Xploits</h1>
<p class="mbr-text mbr-white mbr-fonts-style display-7">Roblox exploits at its finest.</p>
<div class="mbr-section-btn align-center"><a class="btn btn-primary display-4" href="#bottom">Learn More</a></div>
<div class="row justify-content-center">
<div class="col-12 col-md-6 col-lg-3">
<div class="card-wrapper">
<div class="card-box align-center">
<span class="mbr-iconfont mobi-mbri-code mobi-mbri"></span>
<h4 class="card-title align-center mbr-black mbr-fonts-style display-7">Coded precisely </h4>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-3">
<div class="card-wrapper">
<div class="card-box align-center">
<span class="mbr-iconfont mobi-mbri-cash mobi-mbri"></span>
<h4 class="card-title align-center mbr-black mbr-fonts-style display-7"><strong>It's free!</strong></h4>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-3">
<div class="card-wrapper">
<div class="card-box align-center">
<span class="mbr-iconfont mobi-mbri-key mobi-mbri"></span>
<h4 class="card-title align-center mbr-black mbr-fonts-style display-7"><strong>No key system</strong></h4>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-3">
<div class="card-wrapper">
<div class="card-box align-center">
<span class="mbr-iconfont mobi-mbri-setting-3 mobi-mbri"></span>
<h4 class="card-title align-center mbr-black mbr-fonts-style display-7"><strong>Customizable </strong></h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="gallery3 cid-scF2ip4wCo" id="gallery3-4">
<div class="container-fluid">
<div class="mbr-section-head">
<h4 class="mbr-section-title mbr-fonts-style align-center mb-0 display-2">
<strong>Full-Width Gallery</strong>
</h4>
<h5 class="mbr-section-subtitle mbr-fonts-style align-center mb-0 mt-2 display-5">Images with Title and Text</h5>
</div>
<div class="row mt-4">
<div class="item features-image сol-12 col-md-6 col-lg-3">
<div class="item-wrapper">
<div class="item-img">
<img src="assets/images/features1.jpg">
</div>
<div class="item-content">
<h5 class="item-title mbr-fonts-style display-7">
<strong>Card Title</strong>
</h5>
<p class="mbr-text mbr-fonts-style mt-3 display-7">
Card Text. You don't have to code to create a site with Mobirise Builder. Read more..
</p>
</div>
</div>
</div>
<div class="item features-image сol-12 col-md-6 col-lg-3">
<div class="item-wrapper">
<div class="item-img">
<img src="assets/images/features2.jpg">
</div>
<div class="item-content">
<h5 class="item-title mbr-fonts-style display-7">
<strong>Card Title</strong>
</h5>
<p class="mbr-text mbr-fonts-style mt-3 display-7">
Card Text. You don't have to code to create a site with Mobirise Builder. Read more..
</p>
</div>
</div>
</div>
<div class="item features-image сol-12 col-md-6 col-lg-3">
<div class="item-wrapper">
<div class="item-img">
<img src="assets/images/features3.jpg">
</div>
<div class="item-content">
<h5 class="item-title mbr-fonts-style display-7">
<strong>Card Title</strong>
</h5>
<p class="mbr-text mbr-fonts-style mt-3 display-7">
Card Text. You don't have to code to create a site with Mobirise Builder. Read more..
</p>
</div>
</div>
</div>
<div class="item features-image сol-12 col-md-6 col-lg-3">
<div class="item-wrapper">
<div class="item-img">
<img src="assets/images/features4.jpg" alt="" title="">
</div>
<div class="item-content">
<h5 class="item-title mbr-fonts-style display-7">
<strong>Card Title</strong>
</h5>
<p class="mbr-text mbr-fonts-style mt-3 display-7">
Card Text. You don't have to code to create a site with Mobirise Builder. Read more..
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section style="background-color: #fff; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif; color:#aaa; font-size:12px; padding: 0; align-items: center; display: flex;">
<p style="flex: 0 0 auto; margin:0; padding-right:1rem;">Mobirise site software - Check this</p>
</section>
<script src="assets/web/assets/jquery/jquery.min.js"></script> <script src="assets/popper/popper.min.js"></script> <script src="assets/tether/tether.min.js"></script> <script src="assets/bootstrap/js/bootstrap.min.js"></script> <script src="assets/smoothscroll/smooth-scroll.js"></script> <script src="assets/vimeoplayer/jquery.mb.vimeo_player.js"></script> <script src="assets/theme/js/script.js"></script>
</body>
</html>
All you need to do is add some padding-top like so:
<section class="gallery3 cid-scF2ip4wCo" style="padding-top:10em" id="gallery3-4">
<div class="container-fluid">
<div class="mbr-section-head">
<h4 class="mbr-section-title mbr-fonts-style align-center mb-0 display-2">
<strong>Full-Width Gallery</strong></h4>
<h5 class="mbr-section-subtitle mbr-fonts-style align-center mb-0 mt-2 display-5">Images with Title and Text</h5>
</div>
<div class="row mt-4">
<div class="item features-image сol-12 col-md-6 col-lg-3">
<div class="item-wrapper">
<div class="item-img">
<img src="assets/images/features1.jpg">
</div>
<div class="item-content">
<h5 class="item-title mbr-fonts-style display-7">
<strong>Card Title</strong>
</h5>
<p class="mbr-text mbr-fonts-style mt-3 display-7">
Card Text. You don't have to code to create a site with Mobirise Builder. Read more..</p>
</div>
</div>
</div>
<div class="item features-image сol-12 col-md-6 col-lg-3">
<div class="item-wrapper">
<div class="item-img">
<img src="assets/images/features2.jpg">
</div>
<div class="item-content">
<h5 class="item-title mbr-fonts-style display-7">
<strong>Card Title</strong>
</h5>
<p class="mbr-text mbr-fonts-style mt-3 display-7">
Card Text. You don't have to code to create a site with Mobirise Builder. Read more..</p>
</div>
</div>
</div>
<div class="item features-image сol-12 col-md-6 col-lg-3">
<div class="item-wrapper">
<div class="item-img">
<img src="assets/images/features3.jpg">
</div>
<div class="item-content">
<h5 class="item-title mbr-fonts-style display-7">
<strong>Card Title</strong>
</h5>
<p class="mbr-text mbr-fonts-style mt-3 display-7">
Card Text. You don't have to code to create a site with Mobirise Builder. Read more..</p>
</div>
</div>
</div>
<div class="item features-image сol-12 col-md-6 col-lg-3">
<div class="item-wrapper">
<div class="item-img">
<img src="assets/images/features4.jpg" alt="" title="">
</div>
<div class="item-content">
<h5 class="item-title mbr-fonts-style display-7">
<strong>Card Title</strong>
</h5>
<p class="mbr-text mbr-fonts-style mt-3 display-7">
Card Text. You don't have to code to create a site with Mobirise Builder. Read more..</p>
</div>
</div>
</div>
</div>
</div>
</section>
On the website, it produces the following result:
Related
I made these vertical tabs using HTML + CSS only (because I'm challenging myself not to use ANY SCRIPTING AT ALL). It works but I can't disable the automatic scrolling when I open a section and click on a different section.
I know it's a natural behavior to jump on a different section when using anchor links, but I want to disable this so it would look like normal vertical tabs with scripts on it.
Here's my CodePen for this.
https://codepen.io/bosskeito/pen/qBXzdpX
I'm working on Drupal CMS with Bootstrap 4.6.1
.cstmTabTargetVertical:not(:target) {
display: none;
}
.cstmTabTargetVertical:target {
display: block;
}
.cstmTabBtn {
border-radius: 0 !important;
}
.cstmTabVertical .cstmTabBtn {
width: 100%;
}
.cstmTabTargetVertical:before {
content: "";
display: block;
height: 100px;
margin: -100px 0 0 0;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/css/bootstrap-grid.min.css" integrity="sha512-Xj2sd25G+JgJYwo0cvlGWXoUekbLg5WvW+VbItCMdXrDoZRWcS/d40ieFHu77vP0dF5PK+cX6TIp+DsPfZomhw==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/css/bootstrap-reboot.min.css" integrity="sha512-ioOlrrQQ3fZN/A7N2rZVm6JXp/Lg7xtda9OaRKornjBcuTW/UqIhTlPyngcGQGrQTOhJgmSltKM4v3Ne03WPug==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/css/bootstrap.min.css" integrity="sha512-T584yQ/tdRR5QwOpfvDfVQUidzfgc2339Lc8uBDtcp/wYu80d7jwBgAxbyMh0a9YM9F8N3tdErpFI8iaGx6x5g==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="dFullWidth">
<div class="row">
<div class="col-lg-12 px-0 dBGLightGray">
<div class="container-fluid px-0">
<div class="dContainer1270">
<div class="row mx-auto cstmMobileNarrow">
<div class="col-md-12 my-3">
<p class="dh2 dFontDarkGray mb-0 pb-4">General Information Sheet 1</p>
</div>
<div class="col-md-2 cstmTabVertical">
<a href="#GSI_2021" class="cstmTabBtn mb-2 animButtonSlide animSlideLeft animHover dButtonWhite">
<p class="dh5 mb-0 dFontOrange animHover">2021</p>
</a>
<a href="#GSI_2020" class="cstmTabBtn mb-2 animButtonSlide animSlideLeft animHover dButtonWhite">
<p class="dh5 mb-0 dFontOrange animHover">2020</p>
</a>
</div>
<div class="col-md-10">
<div class="cstmTabTargetVertical" id="GSI_2021">
<div class="row container-fluid px-3">
<div class="col-lg-12">
<p class="dh2 dFontDarkGray pb-4 mb-0">2021</p>
</div>
<div class="col-md-6">
<div class="row container-fluid px-0">
<div class="col-md-12 py-3 px-0">
<div class="row cstmMobileNarrow">
<div class="col-md">
<p class="m-0 dh5"><a class="dLinkOrange animHover" href="https://www.facebook.com/" target="_blank">placeholder link 1</a></p>
<p class="m-0 dp">November 18, 2021</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="cstmTabTargetVertical" id="GSI_2020">
<div class="row container-fluid px-3">
<div class="col-lg-12">
<p class="dh2 dFontDarkGray pb-4 mb-0">2020</p>
</div>
<div class="col-md-6">
<div class="row container-fluid px-0">
<div class="col-md-12 py-3 px-0">
<div class="row cstmMobileNarrow">
<div class="col-md">
<p class="m-0 dh5"><a class="dLinkOrange animHover" href="https://www.facebook.com/" target="_blank">placeholder link 2</a></p>
<p class="m-0 dp">November 18, 2021</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="dFullWidth">
<div class="row">
<div class="col-lg-12 px-0 dBGLightGray">
<div class="container-fluid px-0">
<div class="dContainer1270 py-5">
<div class="row mx-auto py-5 cstmMobileNarrow">
<div class="col-md-12 my-3">
<p class="dh2 dFontDarkGray mb-0 pb-4">General Information Sheet 2</p>
</div>
<div class="col-md-2 cstmTabVertical">
<a href="#GSA_2021" class="cstmTabBtn mb-2 animButtonSlide animSlideLeft animHover dButtonWhite">
<p class="dh5 mb-0 dFontOrange animHover">2021</p>
</a>
<a href="#GSA_2020" class="cstmTabBtn mb-2 animButtonSlide animSlideLeft animHover dButtonWhite">
<p class="dh5 mb-0 dFontOrange animHover">2020</p>
</a>
</div>
<div class="col-md-10">
<div class="cstmTabTargetVertical" id="GSA_2021">
<div class="row container-fluid px-3">
<div class="col-lg-12">
<p class="dh2 dFontDarkGray pb-4 mb-0">2021</p>
</div>
<div class="col-md-6">
<div class="row container-fluid px-0">
<div class="col-md-12 py-3 px-0">
<div class="row cstmMobileNarrow">
<div class="col-md">
<p class="m-0 dh5"><a class="dLinkOrange animHover" href="https://www.facebook.com/" target="_blank">placeholder link 1</a></p>
<p class="m-0 dp">November 18, 2021</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="cstmTabTargetVertical" id="GSA_2020">
<div class="row container-fluid px-3">
<div class="col-lg-12">
<p class="dh2 dFontDarkGray pb-4 mb-0">2020</p>
</div>
<div class="col-md-6">
<div class="row container-fluid px-0">
<div class="col-md-12 py-3 px-0">
<div class="row cstmMobileNarrow">
<div class="col-md">
<p class="m-0 dh5"><a class="dLinkOrange animHover" href="https://www.facebook.com/" target="_blank">placeholder link 2</a></p>
<p class="m-0 dp">November 18, 2021</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="dFullWidth">
<div class="row">
<div class="col-lg-12 px-0 dBGLightGray">
<div class="container-fluid px-0">
<div class="dContainer1270">
<div class="row mx-auto cstmMobileNarrow">
<div class="col-md-12 my-3">
<p class="dh2 dFontDarkGray mb-0 pb-4">General Information Sheet 3</p>
</div>
<div class="col-md-2 cstmTabVertical">
<a href="#GSB_2021" class="cstmTabBtn mb-2 animButtonSlide animSlideLeft animHover dButtonWhite">
<p class="dh5 mb-0 dFontOrange animHover">2021</p>
</a>
<a href="#GSB_2020" class="cstmTabBtn mb-2 animButtonSlide animSlideLeft animHover dButtonWhite">
<p class="dh5 mb-0 dFontOrange animHover">2020</p>
</a>
</div>
<div class="col-md-10">
<div class="cstmTabTargetVertical" id="GSB_2021">
<div class="row container-fluid px-3">
<div class="col-lg-12">
<p class="dh2 dFontDarkGray pb-4 mb-0">2021</p>
</div>
<div class="col-md-6">
<div class="row container-fluid px-0">
<div class="col-md-12 py-3 px-0">
<div class="row cstmMobileNarrow">
<div class="col-md">
<p class="m-0 dh5"><a class="dLinkOrange animHover" href="https://www.facebook.com/" target="_blank">placeholder link 1</a></p>
<p class="m-0 dp">November 18, 2021</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="cstmTabTargetVertical" id="GSB_2020">
<div class="row container-fluid px-3">
<div class="col-lg-12">
<p class="dh2 dFontDarkGray pb-4 mb-0">2020</p>
</div>
<div class="col-md-6">
<div class="row container-fluid px-0">
<div class="col-md-12 py-3 px-0">
<div class="row cstmMobileNarrow">
<div class="col-md">
<p class="m-0 dh5"><a class="dLinkOrange animHover" href="https://www.facebook.com/" target="_blank">placeholder link 2</a></p>
<p class="m-0 dp">November 18, 2021</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
how can I fix these cards so that they are the same size and width?
Because if I add more text to a product on a card, the body goes lower, but the edges of the card remain the same.
I would like the body to be aligned regardless of content
It's possible?
<div class="card-body">
<div class="product-name col-12 no-padding">
<a
class="unset"
:title="product.name"
:href="`${baseUrl}/${product.slug}`">
<span class="fs16">{{ product.name.substring(0,20) }} <br> {{ product.name.substring(21,40) }} <br> {{ product.name.substring(41,60) }} <br> {{ product.name.substring(61,81) }} </span>
</a>
</div>
<div class="sticker new" v-if="product.new">
{{ product.new }}
</div>
<div class="product-price fs16" v-html="product.priceHTML"></div>
<div
class="product-rating col-12 no-padding"
v-if="product.totalReviews && product.totalReviews > 0">
<star-ratings :ratings="product.avgRating"></star-ratings>
<a class="fs14 align-top unset active-hover" :href="`${$root.baseUrl}/reviews/${product.slug}`">
{{ __('products.reviews-count', {'totalReviews': product.totalReviews}) }}
</a>
</div>
<div class="product-rating col-12 no-padding" v-else>
<span class="fs14" v-text="product.firstReviewText"></span>
</div>
<vnode-injector :nodes="getDynamicHTML(product.addToCartHtml)"></vnode-injector>
</div>
</div>
I am presenting a case with pure CSS + HTML. The idea is that you can see how to format the cards so that the bodies are the same size.
HTML
<div class="container">
<!-- Page Features -->
<div class="row text-center">
<div class="col-lg-4 col-md-6 mb-4">
<div class="card h-100">
<img class="card-img-top" src="https://dummyimage.com/600x400/000/fff&text=1" >
<div class="card-body">
<h4 class="card-title">card 1</h4>
<p class="card-text">product1 </p>
<p class="card-text">product1 </p>
<p class="card-text">product1 </p>
</div>
<div class="card-footer">
+info
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-4">
<div class="card h-100">
<img class="card-img-top" src="https://dummyimage.com/600x400/000/fff&text=2" >
<div class="card-body">
<h4 class="card-title">card 1</h4>
<p class="card-text">product1 </p>
<p class="card-text">product1 </p>
<p class="card-text">product1 </p>
<p class="card-text">product1 </p>
<p class="card-text">product1 </p>
</div>
<div class="card-footer">
+info
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-4">
<div class="card h-100">
<img class="card-img-top" src="https://dummyimage.com/600x400/000/fff&text=3" >
<div class="card-body">
<h4 class="card-title">card 1</h4>
<p class="card-text">product1 </p>
<p class="card-text">product1 </p>
<p class="card-text">product1 </p>
<p class="card-text">product1 </p>
<p class="card-text">product1 </p>
<p class="card-text">product1 </p>
<p class="card-text">product1 </p>
</div>
<div class="card-footer">
+info
</div>
</div>
</div>
</div>
</div>
run # codeply
The key class is h-100 # card tag.
Good luck!
I want the three images to be side-by-side (on desktop), with the headings and paragraph text to be beneath each respective image.
Does anyone know why it wouldn't be working for me? I presume my code is incorrect somehow
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="portfolio-container">
<section class="portfolio">
<div class="row">
<div class="col-12 my-5">
<h2 class="text-uppercase">Portfolio</h2>
</div>
</div>
<div class="row">
<div class="col-12 col-md-6 col-lg-4">
<div class="media">
<div class="d-none d-sm-block">
<img src="images/whiskey-drop.png" class="rounded-circle mr-3" height=50 width=50>
</div>
<div class="media-body">
<h3>Whiskey Drop</h3>
<h4>HTML, CSS, Bootstrap</h4>
<p>An e-commerce website for a premium whiskey service.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-md-6 col-lg-4">
<div class="media">
<div class="d-none d-sm-block">
<img src="images/rosie-odenkirk.png" class="rounded-circle mr-3" height=50 width=50>
</div>
<div class="media-body">
<h3>Resume</h3>
<h4>HTML, CSS, Bootstrap</h4>
<p>A responsive and user friendly resume showcasing a sample candidate in the best light possible.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-12 d-md-none d-lg-block col-lg-4">
<div class="media">
<div class="d-none d-sm-block">
<img src="images/flappy-bird.png" class="rounded-circle mr-3" height=50 width=50>
</div>
<div class="media-body">
<h3>Flappy Bird</h3>
<h4>Python and Django</h4>
<p>A fun and interactive game where you are in control of a bird as you navigate through tight spaces.</p>
</div>
</div>
</div>
You are creating a new row for every item
Instead, put the col's in one row:
<div class="row">
<div class="col-4">
</div>
<div class="col-4">
</div>
<div class="col-4">
</div>
</div>
You don't need a new <div class="row"></div> around every <div class="col-lg-4"></div>. You can just wrap it around the entire lot to clear the floats.
<div class="row">
<div class="col-12 my-5">
<h2 class="text-uppercase">Portfolio</h2>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="media">
<div class="d-none d-sm-block">
<img src="images/whiskey-drop.png" class="rounded-circle mr-3" height=50 width=50>
</div>
<div class="media-body">
<h3>Whiskey Drop</h3>
<h4>HTML, CSS, Bootstrap</h4>
<p>An e-commerce website for a premium whiskey service.</p>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="media">
<div class="d-none d-sm-block">
<img src="images/rosie-odenkirk.png" class="rounded-circle mr-3" height=50 width=50>
</div>
<div class="media-body">
<h3>Resume</h3>
<h4>HTML, CSS, Bootstrap</h4>
<p>A responsive and user friendly resume showcasing a sample candidate in the best light possible.</p>
</div>
</div>
</div>
<div class="col-12 d-md-none d-lg-block col-lg-4">
<div class="media">
<div class="d-none d-sm-block">
<img src="images/flappy-bird.png" class="rounded-circle mr-3" height=50 width=50>
</div>
<div class="media-body">
<h3>Flappy Bird</h3>
<h4>Python and Django</h4>
<p>A fun and interactive game where you are in control of a bird as you navigate through tight spaces.</p>
</div>
</div>
</div>
</div>
Also make sure that you wrap your height and width values with "" too.
I need space between the cards as shown in the picture, how do I add spacing so that structure remains the same
<div class="container" style="padding: 16px;">
<div class="row">
<div class="center">
<div class="card text-white bg-primary mb-r" style="width:100px;height:100px;margin: auto;">
<div class="card-body">
<h4 class="card-title">DEL</h4>
<h7 class="card-text" style="align-content:flex-end">916</h7>
</div>
</div>
</div>
<div class="center">
<div class="card text-white bg-primary mb-r" style="width:100px;height:100px;margin: auto;">
<div class="card-body">
<h4 class="card-title">DEL</h4>
<h7 class="card-text" style="align-content:flex-end">916</h7>
</div>
</div>
</div>
<div class="center">
<div class="card text-white bg-primary" style="width:100px;height:100px;margin: auto;">
<div class="card-body">
<h4 class="card-title">DEL</h4>
<h7 class="card-text" style="align-content:flex-end">916</h7>
</div>
</div>
</div>
<div class="center">
<div class="card text-white bg-primary" style="width:100px;height:100px;margin: auto;">
<div class="card-body">
<h4 class="card-title">DEL</h4>
<h7 class="card-text" style="align-content:flex-end">916</h7>
</div>
</div>
</div>
</div>
</div>
The picture below is the code I have written, I need spacing between them.
To have spacing between cards just use standard Bootstrap layout, that is using row and columns. Columns have gutters by default. Read more: https://getbootstrap.com/docs/4.3/layout/overview/
There were many errors like <h7> tags, using incorrect css properties etc. Just go through my code and see the changes I made.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-3">
<div class="card w-100 text-white bg-primary">
<div class="card-body">
<h4 class="card-title">DEL</h4>
<h6 class="card-text">916</h6>
</div>
</div>
</div>
<div class="col-3">
<div class="card w-100 text-white bg-primary">
<div class="card-body">
<h4 class="card-title">DEL</h4>
<h6 class="card-text">916</h6>
</div>
</div>
</div>
<div class="col-3">
<div class="card w-100 text-white bg-primary">
<div class="card-body">
<h4 class="card-title">DEL</h4>
<h6 class="card-text">916</h6>
</div>
</div>
</div>
<div class="col-3">
<div class="card w-100 text-white bg-primary">
<div class="card-body">
<h4 class="card-title">DEL</h4>
<h6 class="card-text">916</h6>
</div>
</div>
</div>
</div>
</div>
I know you asked that the structure didn't change however I believe some edits needed to be made, here is a jsFiddle with some suggestions: https://jsfiddle.net/kcozqd9L/2/
CSS
.container{
padding: 16px;
}
.card{
position: relative;
display: inline-block;
width:100px;
height:100px;
margin: auto;
}
/*.card-body{
}
.card-title{
}*/
.card-text{
align-content:flex-end
}
HTML
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container">
<div class="row">
<div class="center">
<div class="card text-white bg-primary mb-r">
<div class="card-body">
<h4 class="card-title">DEL</h4>
<h6 class="card-text">916</h6>
</div>
</div>
<div class="card text-white bg-primary mb-r">
<div class="card-body">
<h4 class="card-title">DEL</h4>
<h6 class="card-text">916</h6>
</div>
</div>
<div class="card text-white bg-primary">
<div class="card-body">
<h4 class="card-title">DEL</h4>
<h6 class="card-text">916</h6>
</div>
</div>
<div class="card text-white bg-primary">
<div class="card-body">
<h4 class="card-title">DEL</h4>
<h6 class="card-text">916</h6>
</div>
</div>
</div>
</div>
</div>
I try to adding an ellipsis on title if it's too long. I want respect the responsive layout and I don't want adding fix width to card-title.
I use text-truncate to add ellipsis on card title.
Cards are in column to use image at left of text.
<div class="container">
<div class="row">
#foreach($posts as $post)
<div class="col-lg-6 p-1">
<div class="card border-0">
<div class="row no-gutters">
<div class="col-auto">
<img src="{{ $post->featured_image ? $post->featured_image : '/images/placeholder-image.png' }}" class="img-fluid" width="150" height="150" alt="{{ $post->title }}" style="width: 150px; height: 150px; object-fit: cover;">
</div>
<div class="col">
<div class="card-body">
<h3 class="card-title text-truncate">{{ $post->title }}</h3>
<p class="card-text m-0">{{ $post->short_summary }}</p>
<small>{{ $post->published_at->format('M d') }} — {{ $post->read_time }}</small>
</div>
</div>
</div>
</div>
</div>
#endforeach
</div>
</div>
But if I add text-truncate class, the title and content are down.
You're missing overflow: hidden; on <div class="col">. The content will always take its full width if you do not set the overflow of its parent container to hidden when using flexbox.
.col-special {
overflow: hidden;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<div class="container">
<div class="row">
<div class="col-lg-6 p-1">
<div class="card border-0">
<div class="row no-gutters">
<div class="col-auto">
<img src="https://via.placeholder.com/150x150" class="img-fluid" width="150" height="150" alt="{{ $post->title }}" style="object-fit: cover;">
</div>
<div class="col col-special">
<div class="card-body">
<h3 class="card-title text-truncate">Comment écrire une "story" complète ?</h3>
<p class="card-text m-0">Une story, c'est en faite, simplement une histoire qui racoute ce que vous voule...</p>
<small>Apr 07 — 1 min read</small>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Use flex-nowrap on the inner row. This will prevent the col & col-auto from wrapping.
<div class="col-lg-6 p-1">
<div class="card border-0">
<div class="row no-gutters flex-nowrap">
<div class="col-auto">
<img src="//placehold.it/400" class="img-fluid" width="150" height="150" alt="" style="width: 150px; height: 150px; object-fit: cover;">
</div>
<div class="col">
<div class="card-body">
<h3 class="card-title text-truncate">title is longer</h3>
<p class="card-text m-0">summary</p>
<small>read time</small>
</div>
</div>
</div>
</div>
</div>
https://www.codeply.com/go/szhxXTLETa
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="card">
<div class="row no-gutters">
<div class="col-2">
<img src="//placehold.it/200" class="img-fluid" alt="">
</div>
<div class="col-4">
<div class="card-block px-2">
<h4 class="card-title text-truncate">Title</h4>
<p class="card-text text-truncate">Description</p>
</div>
</div>
<div class="col-2">
<img src="//placehold.it/200" class="img-fluid" alt="">
</div>
<div class="col-4">
<div class="card-block px-2">
<h4 class="card-title text-truncate">Title long textlong textlong textlong text</h4>
<p class="card-text text-truncate">long textlong textlong textlong textlong text</p>
</div>
</div>
</div>
</div>
</div>