I have the following code:
<h2 id="yachts" class="mt-0">Our Yachts</h2>
<div class="card-group">
{{ $pages := sort (where $.Site.RegularPages "Section" "boats") "Weight" "asc" }}
{{ range $pages }}
<div class="card">
<img src="{{ .RelPermalink | safeCSS }}{{ .Params.heroimage | safeCSS }}" class="card-img-top" alt="...">
<div class="card-body clearfix">
<h4 class="card-title">{{ .LinkTitle }}</h4>
<p class="card-text border-light border-top border-bottom">
<span class="row">
<span class="col-6 text-muted text-left">
{{- partialCached "icons/users.svg" . -}}{{ .Params.pax }}
</span>
<span class="col-6 text-muted text-right">
{{- partialCached "icons/bed.svg" . -}}{{ .Params.bunks }}
</span>
</span>
</p>
<p class="card-text">{{ .Description }}</p>
Learn More
</div>
</div>
{{ end }}
</div>
(The logic stuff inside of the {{ tags is Hugo templating markup (Golang) which is irrelevant at this point).
The result of this code looks like this in one of the uses:
I would like to position the buttons on the same level (bottom right of each card).
I tried doing it via position relative on the card and position absolute on the buttons, but that positions them at their current location, not the real bottom of the card. What would be the "flex way" to tell these buttons where they belong?
Try min-height for .card-text
.card-text{
min-height:250px;
}
It turns out that Bootstrap offers the card-footer class that does exactly what I wanted to achieve. Using bg-light or our own class for styling then can make it look right.
<div class="card-footer bg-light">
Learn More
</div>
From the documentation:
When using card groups with footers, their content will automatically line up.
Related
I am making a html based tag filter based on tailwind.
<div class="p-3 border-b">
<div class="flex flex-col space-y-2 mt-2">
<div class="flex flex-row space-x-2 text-sm" v-for="(filter,index) in filters" :key="index">
<div class="w-16 text-base text-gray-700"> {{ filter.label }} </div>
<div class=" flex flex-row space-x-5 text-gray-500 leading-6">
<span class="cursor-pointer"> {{ categoryItem.name }} </span>
</div>
</div>
</div>
</div>
filters:[
{
name:'type',
label:'Type',
category:[
{'name':'All'},
{'name':'Animals, Plants & Land'},
{'name':'Maintenance, Service & Repair'},
{'name':'Management & Planning'},
{'name':'Medical Technology'},
{'name':'Transport'},
{'name':'Storage, Dispatching & Delivery'},
{'name':'Retail Sales & Customer Service'},
{'name':'Medical Technologyy'},
....
]
}
],
However since the number of category list is more than 30 items, the actual html page looks very wired since the tag list grows horizontally instead of breaking space into multiple lines.
how to deal with this?
You can check out the Tailwind CSS line clamp package to solve this problem.
Here is a link on how to use it.
So I'm struggling to format an accordian in bootstrap 4 which I'm using alongside django
The basic issue with my formatting is illustrated in the picture below. The headline in the text is spilling over to outside the column of the accordian. I feel like this should be a simple fix but I can't figure it out. Code pasted below
<div class='col-xs-12 col-md-4'>
<h3> ATP tennis </h3>
<hr/>
<div id="accordion">
{% for obj in tennis %}
<div class="card">
<div class="card-header">
<h5 class="mb-0">
<button class="first1 btn btn-link collapsed newwrap" data-toggle="collapse"
data-artid="{{obj.id}}" data-target="#tnis_{{ obj.id }}" aria-expanded="false"
aria-controls="tnis_{{ obj.id }}">
{{obj.headline}}
</button>
</h5>
</div>
<div id="tnis_{{ obj.id }}" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
<div class="card-body body_pad"><a href='{{obj.url}}' target="_blank" class='body_col'>
{{obj.summary}} </a><br>
<div class="rght3">
<i id="{{obj.id}}" class="likes fa fa-thumbs-up" data-artid="{{obj.id}}" style="font-size:25px;color:#6666ff;"></i>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
I feel like this should in theory be a pretty simple fix. Any help would be much appreciated. The {{obj.headline}} is the culprit that is spilling over (which sits within a button tag)
I would like to displays images s in the image bellow
I do know that I can use laravel chunk() helper function to achieve this which is what I have done but as bellow
#foreach ($images->chunk(4) as $key=>$image)
<div class="row">
#foreach ($image as $item)
#if ($key===0)
<div class="col-md-3">
<div>
<span class="image-block block2">
<a class="image-zoom" href="{{ asset('uploads/property/large/'.$item->path) }}" rel="prettyPhoto[gallery]">
<img src="{{ asset('uploads/property/small/'.$item->path) }}" class="img-responsive" alt="CEC Gallery"></a>
</span>
</div>
</div>
#else
<div class="col-md-4">
<div>
<span class="image-block block2">
<a class="image-zoom" href="{{ asset('uploads/property/large/'.$item->path) }}" rel="prettyPhoto[gallery]">
<img src="{{ asset('uploads/property/small/'.$item->path) }}" class="img-responsive" alt="CEC Gallery"></a>
</span>
</div>
</div>
#endif
#endforeach
</div>
#endforeach
this gives me the following result
From what you can see the rows not stopping at two and staking the remaining images as in the expected image. What could I be doing wrong or how could I do. The images could be as many as 200 and here I am just working with 12
So according to this: https://getbootstrap.com/docs/3.3/css/#grid-column-ordering I should be able to swap the position of the divs based on the viewport.
I tried with the following html (it is twig - but that shouldn't make a difference):
<div class="row">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-xs-12 col-xs-push-12" id="recommend-container">
<h1>
<i class="fas fa-chess-king"></i>
Solomon
</h1>
<hr />
<div id="recommend-contents">
<p>Solomon Recommends:</p>
{% for type,recommend in recommendations %}
<h3>{{ type }}</h3>
<ul>
{% for index,name in recommend %}
<li>{{ name }}</li>
{% endfor %}
</ul>
{% endfor %}
</div>
</div>
<div class="col-md-6 col-xs-12 col-xs-pull-12" id="register-section-container">
<h1>Register</h1>
<hr />
{{ form_start(form) }}
{{ form_row(form.username, { 'attr': {'class': 'form-control login-input', 'placeholder': 'username'} }) }}
{{ form_row(form.email, { 'attr': {'class': 'form-control login-input', 'placeholder': 'email'} }) }}
{{ form_row(form.plainPassword.first, { 'attr': {'class': 'form-control login-input', 'placeholder': 'password'} }) }}
{{ form_row(form.plainPassword.second, { 'attr': {'class': 'form-control login-input', 'placeholder': 'retype password'} }) }}
<div class="register-btn-container">
<button class="btn btn-primary d-inline-block" type="submit">
<i class="fas fa-check"></i>
Register
</button>
<p class="d-inline-block">Already signed up? Login</p>
</div>
{{ form_end(form) }}
</div>
</div>
</div>
</div>
which not only doesn't work on mobile, but creates a weird space between the divs on desktop view? I really don't understand the logic of it, how do I debug or fix? (CSS is the real Isildur's bane)
I believe you issue is du to the fact that Bootstrap is a mobile first framework, and you try to use it as a desktop first one.
You should place divs the way you want them to be displayed on a mobile, THEN pull/push them on larger screen :
<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="container-fluid">
<div class="row">
<!-- LEFT ON DESKTOP -->
<div class="col-xs-12 col-sm-6 col-sm-push-6" id="recommend-container">
I'm on the right on desktop
</div>
<!-- RIGHT ON DESKTOP -->
<div class="col-xs-12 col-sm-6 col-sm-pull-6" id="register-section-container">
I'm on the left on desktop
</div>
</div>
</div>
Here is that will append:
on mobile devices (viewport under 768px width): the .col-xs-12 rule apply so divs should be display on top of each other in the same order as the code.
Then when you reach 768px width (and up): the .col-sm-6 rule apply so you should have the two columns displayed side by side as each column is set to occupy 1/2 of the available space (6/12 to be exact :)).
And as you want to "inverse" the "logical" order of the columns, you add one rule to push the first column on the right (.col-sm-pull-6), and one rule to pull the second column on the left (.col-sm-pull-6).
As long as you don't have rules specific to superior width (aka: "md" and "lg"), the "sm" rule will be used on larger screens.
I want to have two containers, because when I change the size, it also changes the size of the menu. Here's my index http://paste.laravel.com/GN8, I want this part:
#if ($news->count())
#foreach($news as $news)
<div class="container">
<div class="doc-content-box">
<legend>{{ $news->title }} <div id="spaceholder"></div>
<p>
<h6><i class="icon-calendar"></i> {{ $news->created_at }} {{ $news->author }}
</p>
</h6>
</legend>
<div style="margin-top:7px">
<p>{{ $news->content }}</p>
</div>
</div> <!-- /container -->
<div id="spaceholder"> </div>
#endforeach
#else
{{ 'There are no news.' }}
#endif
be width 749px, when I copy the .container which I added before, it just pulls it to the left.
I want it to be something like container-two.
I also have custom CSS that overrides container:
http://paste.laravel.com/JEt
Add the container this styling:
margin: 0 auto;