I have a Drupal 8 TWIG file with this code :
<div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4 p-0 text-center">
<i class="far fa-heart fa-lg"></i> {{ product.flag_like_product }}
</div>
Is it possible to exclude the following code :
<div class="flag flag-like-product js-flag-like-product-14 action-flag">
<a title="" href="/fr/flag/details/flag/like_product/14?destination=/fr/boutique/exemple-dune-boutique" class="use-ajax" data-dialog-type="modal" data-dialog-options="{"width":"auto"}" rel="nofollow">
<span class="btn btn-outline-success btn-sm">
<i class="far fa-heart fa-lg"></i> J'aime
</span>
</a>
</div>
Here is the rendering of the code :
<div class="row p-0 m-0">
<div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4 p-0 text-center">
<i class="far fa-heart fa-lg"></i>
<div class="bs-field-like-link">
<div class="flag flag-like-product js-flag-like-product-14 action-flag">
<a title="" href="/fr/flag/details/flag/like_product/14?destination=/fr/boutique/exemple-dune-boutique" class="use-ajax" data-dialog-type="modal" data-dialog-options="{"width":"auto"}" rel="nofollow">
<span class="btn btn-outline-success btn-sm">
<i class="far fa-heart fa-lg"></i> J'aime
</span>
</a>
</div>
</div>
<span class="bs-field-like-count">
1
</span>
</div>
<div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4 p-0 text-center">
<i class="far fa-comment fa-lg"></i> 0
</div>
<div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4 p-0 text-center">
<i class="fas fa-share-alt fa-lg"></i> 0
</div>
</div>
Related
I'm having the below source code in HTML that basically is a Bootstrap card:
<div class="card shadow-none card-fluid mb-3 mb-md-5">
<div class="row">
<div class="col-md-3 col-lg-3 mb-3 mb-sm-0">
<img class="img-fluid rounded"
src="{% static 'img url' %}"
alt="Image Description">
</div>
<div class="col-md-9">
<div class="card-header py-md-0 py-lg-0 py-xl-0 pl-0 pr-0">
<h6 class="h5 mb-3">Text of 100 characters Text of 100 characters Text of 100
characters Text of 100 characters Text of 100 characters
</h6>
<p class="font-size-1">
Text of 20 characters.
</p>
</div>
<div class="card-body p-0 px-0 py-md-0 py-lg-0 py-xl-0">
<div class="row">
<div class="col-8 text-left">
<a class="d-inline-flex align-items-center">
<span class="static-rating static-rating-sm d-block mr-2">
<i class="fas fa-star text-warning"></i>
<i class="fas fa-star text-warning"></i>
<i class="fas fa-star text-warning"></i>
<i class="fas fa-star text-warning"></i>
<i class="fas fa-star-half-alt text-warning"></i>
</span>
</a>
<span class="d-inline-block">
<h6 class="mt-0 mb-2">4.95/5
<small class="text-white-70">(1.5k+)</small>
</h6>
</span>
</div>
</div>
</div>
<div class="card-footer p-3 py-md-2 py-lg-2 mt-xl-5">
<div class="row align-items-center">
<div class="col-6">
<button type="button"
class="btn btn-sm btn-link btn-icon-label hover-translate-y-n3">
<span class="btn-inner--icon btn-cust-icon">
<i class="mr-1" data-feather="edit-3"></i>
</span>
<span class="btn-inner--text">Edit</span>
</button>
</div>
<div class="col-6 text-right">
<button type="button"
class="btn btn-xs btn-outline-danger btn-icon-label hover-translate-y-n3">
<span class="btn-inner--icon">
<i data-feather="trash-2"></i>
</span>
<span class="btn-inner--text">Delete</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
The issue I'm facing is that depending on the size of the text within card-header class, the div corresponding to the one having class card-footer it moves up or down. Is there any way to keep the card-footer static and only to limit the size of the text to let's say 120 chars?
Edit
Added the following snippet:
.custom-css {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
/* number of lines to show */
-webkit-box-orient: vertical;
}
<li class="card shadow-none card-fluid mb-3 mb-md-5">
<div class="row">
<div class="col-md-3 col-lg-3 mb-3 mb-sm-0">
<img class="img-fluid rounded" src="{% static 'img url' %}" alt="Image Description">
</div>
<div class="col-md-9">
<div class="card-header py-md-0 py-lg-0 py-xl-0 pl-0 pr-0">
<h6 class="h5 mb-3 custom-css">Text 100 charactersText 100 charactersText 100 charactersText 100 charactersText 100 charactersText 100 charactersText 100 charactersText 100 charactersText 100 characterscharactersText 100 charactersText 100 charactersText 100 charactersText
100 charactersText 100 charactersText 100 charactersText 100 characterscharactersText 100 charactersText 100 charactersText 100 charactersText 100 charactersText 100 charactersText 100 charactersText 100 characters
</h6>
<p class="font-size-1">
Text length medium
</p>
</div>
<div class="card-body p-0 px-0 py-md-0 py-lg-0 py-xl-0">
<div class="row">
<div class="col-8 text-left">
<a class="d-inline-flex align-items-center">
<span class="static-rating static-rating-sm d-block mr-2">
<i class="fas fa-star text-warning"></i>
<i class="fas fa-star text-warning"></i>
<i class="fas fa-star text-warning"></i>
<i class="fas fa-star text-warning"></i>
<i class="fas fa-star-half-alt text-warning"></i>
</span>
</a>
<span class="d-inline-block">
<h6 class="mt-0 mb-2">4.95/5
<small class="text-white-70">(1.5k+ review-uri)</small>
</h6>
</span>
</div>
</div>
</div>
</div>
</div>
</li>
you could give it a min-height and max-height and also min-width and max-width to sort of contain it between these values.
HTML
<div class="container">
<div class="jumbotron">
<div class="row">
<div class="col-2"></div>
<div class="col-2 Jumbooptions" id="create" onclick="location.href='#';">
<p class="efr">Create</p>
<i class="fas fa-plus fa-2x" id="ci"></i>
</div>
<div class="col-2 Jumbooptions" id="add" onclick="location.href='#';">
<p class="efr">Add</p>
<i class="fas fa-address-book fa-2x" id="ai"></i>
</div>
<div class="col-2 Jumbooptions" id="stats" onclick="location.href='#';">
<p class="efr">Statistics</p>
<i class="fas fa-chart-pie fa-2x" id="si"></i>
</div>
<div class="col-2 Jumbooptions" id="export" onclick="location.href='#';">
<p class="efr">Export</p>
<i class="fas fa-file-export fa-2x" id="ei"></i>
</div>
</div>
<div class="row" id="bigger">
<div class="col-2" id=""></div>
<div id="created" class="dropdown col-4">
<h2>CREATE</h2>
<p>as many sheets as you want with ease!</p>
</div>
<div id="addd" class="dropdown col-4">
</div>
<div id="statsd" class="dropdown col-4">
</div>
<div id="exportd" class="dropdown col-4">
</div>
</div>
</div>
</div>
CSS
height:70px !important;
width:700px;
margin-left:47px
}
If I make the "height" any more than 70 the rest of the row goes to the start of the jumbotron
When height is less than 70: https://gyazo.com/6601be928cb893b5355c78fbc792e694
When height is more than 70 (200): https://gyazo.com/6b6f96fa6eadcffc6db3dd427cac8d03
I'm really not sure what to do.
<div class="wrapper">
<div class="container">
<div class="blocks">
<h2 style="text-align: center">Extra Information</h2>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"><i class="fa fa-book fa-2x" aria-hidden="true"></i><br>Reference it for later</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"><i class="fa fa-commenting-o fa-2x" aria-hidden="true"></i><br>Give Feedback</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"><i class="fa fa-info fa-2x" aria-hidden="true"></i><br>Why are annotations so important?</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"><i class="fa fa-magic fa-2x" aria-hidden="true"></i><br>They say Annotation websites are for genius; well this is why you are here!</div>
<br><br><br>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"><i class="fa fa-exchange fa-2x" aria-hidden="true"></i><br>Interaction</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"><i class="fa fa-question-circle fa-2x" aria-hidden="true"></i><br>Information</div>
</div>
</div>
</div>
</div>
It looks like Image 1
How can I make it look like image 2 but with 2 columns, because mine is all stuck with eachother:
First, you can't have more than 12 col by row, so your code is wrong.
Second, please, don't use the "I'll put every class and it'll work" as suggested by my fellow, Bootstrap work on a cascade way, you just have to set on the "until the smallest screen" you want.
If you want 2 col even in xs-, then just use the col-xs-6, no need to set the sm- / md- / lg-.
And last, I don't really understand what you want, this ?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrapper">
<div class="container">
<div class="blocks">
<h2 style="text-align: center">Extra Information</h2>
<div class="row">
<div class="col-xs-6"><i class="fa fa-book fa-2x" aria-hidden="true"></i><br>Reference it for later</div>
<div class="col-xs-6"><i class="fa fa-commenting-o fa-2x" aria-hidden="true"></i><br>Give Feedback</div>
</div>
<div class="row">
<div class="col-xs-6"><i class="fa fa-info fa-2x" aria-hidden="true"></i><br>Why are annotations so important?</div>
<div class="col-xs-6"><i class="fa fa-magic fa-2x" aria-hidden="true"></i><br>They say Annotation websites are for genius; well this is why you are here!</div>
</div>
<div class="row">
<div class="col-xs-6"><i class="fa fa-exchange fa-2x" aria-hidden="true"></i><br>Interaction</div>
<div class="col-xs-6"><i class="fa fa-2x" aria-hidden="true"></i><br></div>
</div>
</div>
</div>
</div>
In bootstrap, .col-md- class is used for medium screens, .col-xs- means extra small and col-sm for small screens
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="wrapper">
<div class="container">
<div class="blocks">
<h2 style="text-align: center">Extra Information</h2>
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6">
<i class="fa fa-book fa-2x" aria-hidden="true"></i><br>Reference it for later
<br>
<i class="fa fa-commenting-o fa-2x" aria-hidden="true"></i><br>Give Feedback
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<i class="fa fa-info fa-2x" aria-hidden="true"></i><br>Why are annotations so important?
<br>
<i class="fa fa-magic fa-2x" aria-hidden="true"></i><br>They say Annotation websites are for genius; well this is why you are here!
</div>
</div>
</div>
</div>
</div>
I need some help, or advice rather. I've been working on creating a really basic recruitment portal for my employer. However it would seem like I'm not setting up the bootstrap scaffolding correctly as the columns seem to be very 'squashed' together when looking at it from a smaller device.
What is confusing me is the fact that I've used xs columns, which I would have assumed would take smaller devices into consideration and as such would adjust the width's of the columns accordingly...
I'd really appreciate it if someone could either tell me what I'm doing wrong or show me how to fix it to make it more responsive.
Here is a pen to a working example and below are the columns (without headers):
<div class="row buffer-top">
<div class="col-xs-2 col-xs-offset-1 text-center">
<div class="thumbnail">
<span class="fa-stack fa-4x"><i class="fa fa-circle fa-stack-2x icon-siteAccess"></i><i class="fa fa-circle-thin fa-stack-2x"></i><i class="fa fa-clipboard fa-stack-1x"></i></span>
<div class="caption">
<h3>Site Access Controllers</h3>
<p><strong>Location:</strong> UK-wide</p>
<p>More infoApply</p>
</div>
</div>
</div>
<div class="col-xs-2 col-xs-offset-1 text-center">
<div class="thumbnail">
<span class="fa-stack fa-4x"><i class="fa fa-circle fa-stack-2x icon-developers"></i><i class="fa fa-circle-thin fa-stack-2x"></i><i class="fa fa-code fa-stack-1x"></i></span>
<div class="caption">
<h3>Software Developers</h3>
<p><strong>Location:</strong> Tunbridge Wells</p>
<p>More infoApply</p>
</div>
</div>
</div>
<div class="col-xs-2 col-xs-offset-1 text-center">
<div class="thumbnail">
<span class="fa-stack fa-4x"><i class="fa fa-circle fa-stack-2x icon-office"></i><i class="fa fa-circle-thin fa-stack-2x"></i><i class="fa fa-building-o fa-stack-1x"></i></span>
<div class="caption">
<h3>Site Access Manager</h3>
<p><strong>Location:</strong> UK-wide</p>
<p>More infoApply</p>
</div>
</div>
</div>
<div class="col-xs-2 col-xs-offset-1 text-center">
<div class="thumbnail">
<span class="fa-stack fa-4x"><i class="fa fa-circle fa-stack-2x icon-consultant"></i><i class="fa fa-circle-thin fa-stack-2x"></i><i class="fa fa-question fa-stack-1x"></i></span>
<div class="caption">
<h3>Site Consultants</h3>
<p><strong>Location:</strong> UK-Wide</p>
<p>More infoApply</p>
</div>
</div>
</div>
</div>
Try below code and see Bootply Demo
You can add col-lg-3 col-md-3 col-sm-6 col-xs-12
col-lg-3 for large device,
col-md-3 for medium device,
col-sm-6 for small-medium device,
col-xs-12 for mobile device
<div class="container-fluid">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 ">
<div class="circle one">
<div class="table-row"> <span>Site Access </span> </div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 ">
<div class="circle two">
<div class="table-row"> <span>Developers</span> </div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="circle three">
<div class="table-row"> <span>Head Office </span> </div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="circle four">
<div class="table-row"> <span>Consultants </span> </div>
</div>
</div>
</div>
<div class="row buffer-top">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 text-center">
<div class="thumbnail">
<span class="fa-stack fa-4x"><i class="fa fa-circle fa-stack-2x icon-siteAccess"></i><i class="fa fa-circle-thin fa-stack-2x"></i><i class="fa fa-clipboard fa-stack-1x"></i></span>
<div class="caption">
<h3>Site Access Controllers</h3>
<p><strong>Location:</strong> UK-wide</p>
<p>More infoApply</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 text-center">
<div class="thumbnail">
<span class="fa-stack fa-4x"><i class="fa fa-circle fa-stack-2x icon-developers"></i><i class="fa fa-circle-thin fa-stack-2x"></i><i class="fa fa-code fa-stack-1x"></i></span>
<div class="caption">
<h3>Software Developers</h3>
<p><strong>Location:</strong> Tunbridge Wells</p>
<p>More infoApply</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 text-center">
<div class="thumbnail">
<span class="fa-stack fa-4x"><i class="fa fa-circle fa-stack-2x icon-office"></i><i class="fa fa-circle-thin fa-stack-2x"></i><i class="fa fa-building-o fa-stack-1x"></i></span>
<div class="caption">
<h3>Site Access Manager</h3>
<p><strong>Location:</strong> UK-wide</p>
<p>More infoApply</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 text-center">
<div class="thumbnail">
<span class="fa-stack fa-4x"><i class="fa fa-circle fa-stack-2x icon-consultant"></i><i class="fa fa-circle-thin fa-stack-2x"></i><i class="fa fa-question fa-stack-1x"></i></span>
<div class="caption">
<h3>Site Consultants</h3>
<p><strong>Location:</strong> UK-Wide</p>
<p>More infoApply</p>
</div>
</div>
</div>
</div>
</div>
col-xs-* classes will persist the layout in smaller widths. You need to use col-sm-* classes. They will break at 767px, so that in smaller devices there will be enough space to show the whole div horizontally.
You can divide it in groups of two, for smaller screens and I guess it looks better without the offset (you could need to adjust your CSS code I guess, since I've seen some margins there): http://codepen.io/denea/pen/EgNprZ
<div class="row buffer-top">
<div class="col-sm-3 col-xs-6 text-center">
<div class="thumbnail">
<span class="fa-stack fa-4x"><i class="fa fa-circle fa-stack-2x icon-siteAccess"></i><i class="fa fa-circle-thin fa-stack-2x"></i><i class="fa fa-clipboard fa-stack-1x"></i></span>
<div class="caption">
<h3>Site Access Controllers</h3>
<p><strong>Location:</strong> UK-wide</p>
<p>More infoApply</p>
</div>
</div>
</div>
<div class="col-sm-3 col-xs-6 text-center">
<div class="thumbnail">
<span class="fa-stack fa-4x"><i class="fa fa-circle fa-stack-2x icon-developers"></i><i class="fa fa-circle-thin fa-stack-2x"></i><i class="fa fa-code fa-stack-1x"></i></span>
<div class="caption">
<h3>Software Developers</h3>
<p><strong>Location:</strong> Tunbridge Wells</p>
<p>More infoApply</p>
</div>
</div>
</div>
<div class="col-sm-3 col-xs-6 text-center">
<div class="thumbnail">
<span class="fa-stack fa-4x"><i class="fa fa-circle fa-stack-2x icon-office"></i><i class="fa fa-circle-thin fa-stack-2x"></i><i class="fa fa-building-o fa-stack-1x"></i></span>
<div class="caption">
<h3>Site Access Manager</h3>
<p><strong>Location:</strong> UK-wide</p>
<p>More infoApply</p>
</div>
</div>
</div>
<div class="col-sm-3 col-xs-6 text-center">
<div class="thumbnail">
<span class="fa-stack fa-4x"><i class="fa fa-circle fa-stack-2x icon-consultant"></i><i class="fa fa-circle-thin fa-stack-2x"></i><i class="fa fa-question fa-stack-1x"></i></span>
<div class="caption">
<h3>Site Consultants</h3>
<p><strong>Location:</strong> UK-Wide</p>
<p>More infoApply</p>
</div>
</div>
</div>
</div>
And for CSS:
.thumbnail {
margin: 0 auto 20px auto;
width: 200px;
height: 350px;
border: 2px solid black;
}
i've a bug when choosing the tablet layout.
It works like a charm on smartphones and desktop but my buttons aren't centered anymore on tablet.
Here's my code :
<body>
<header class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<img src="assets/img/maison.png" alt="logo" class="col-lg-1 col-md-1 col-sm-1 hidden-xs">
<h1 class="text-center">La maison de l'architecte</h1>
</header>
<nav class="">
<div id="left" class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
<img src="assets/img/city1.jpg" alt="Nos réalisations">
</div>
<div id="side1" class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<img src="assets/img/side1.jpg" alt="Nos projets">
</div>
<div id="side2" class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<img src="assets/img/side2.jpg" alt="Notre ambition">
</div>
</nav>
<footer class="text-center">
<a class="btn btn-primary" href="#"><i class="fa fa-twitter fa-2x"></i></a>
<a class="btn btn-primary" href="#"><i class="fa fa-facebook fa-2x"></i></a>
<a class="btn btn-primary" href="#"><i class="fa fa-google-plus fa-2x"></i></a>
<a class="btn btn-primary" href="#"><i class="fa fa-flickr fa-2x"></i></a>
<a class="btn btn-primary" href="#"><i class="fa fa-spotify fa-2x"></i></a>
</footer>
</body>
Just add the row class to the nav <nav class="row">
see fiddle https://jsfiddle.net/g74Ep/472/