I have a small problem, stretched-link doesn't want to work with my card, I tried everything from Bootstrap docs. Tried also removing buttons cause I've read that they don't "live well" with stretched-link. I use django-bootstrap-v5 (is it good to use this btw.?)
This is my code:
<div class="card mb-3" style="width: 81rem;">
<div class="row g-0">
<div class="col-md-4">
<a type="button" class="streched-link" href="{% url 'bloger:post' post.id %}">
<img class="img-fluid" src="...">
</a>
</div>
<div class="col-md-8" style="max-height: 11rem;">
<div class="card-header d-flex bd-highlight">
<small class="text-muted p-1 flex-grow-1">Added {{ post.date_added|timesince:currentdate}} ago.</small>
<small class="text-muted p-1 flex-grow-3">Komentarze: {{ post.blogcomment_set.count }}</small>
</div>
<div class="card-body" style="max-height: 10rem;">
<h4 class="card-title">{{post.title|title}}</h4>
<p class="card-text" style="max-height: 8.4rem;"><i>{{post.truncated_text}}</i></p>
<a class="streched-link btn btn-danger" href="{% url 'bloger:post' post.id %}">Read more</a>
</div>
</div>
</div>
</div>
you are miss-spelling stretched
Related
The webpage is designed using the bootstrap. May I know how to assign the content to the center? I have tried to change mx-auto to mt-5, it work for some pictures but not for all.
Below is the coding
<div class="mx-auto container d-flex" style="min-height: 500px;">
<div class="d-flex justify-content-center" style="flex: 1;">
<img style="max-width: 80%;" src="{{ asset('upload/artworks/' . $artwork->image_url) }}"
/>
</div>
<div style="flex: 1;">
<div class="h-75">
<div class="mb-5">
<h2 class="display-5 mb-4">
{{ $artwork->name }}
</h2>
<p class="text-muted">
{{ $artwork->description }}
</p>
</div>
</div>
</div>
</div>
If I understand correctly you are looking for both the image and content columns to vertically center their content.
The bootstrap class align-items-center is what you need here. See example below using your original markup.
EDIT:
Updated to support larger images using img-fluid and gap-5 classes
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="mx-auto container d-flex align-items-center gap-5" style="min-height: 500px;">
<div class="d-flex justify-content-center" style="flex: 1;">
<img src="https://source.unsplash.com/1000x1000" class="img-fluid"
/>
</div>
<div style="flex: 1;">
<div class="h-75">
<div class="mb-5">
<h2 class="display-5 mb-4">
{{ $artwork->name }}
</h2>
<p class="text-muted">
{{ $artwork->description }}
</p>
</div>
</div>
</div>
</div>
Based on your question, probably you can try justify-content-between.
I have the following html for a website page built with Bootstrap:
{{ define "main" }}
{{ $pageurl := .Permalink }}
<div class="col-xs-12 col-sm-8 col-md-9 content-column white-background">
{{ partial "mobile_nav_toggle.html" . }}
<div class="row">
<div class="col-lg-8">
<div class="jumbotron">
<h1 class="display-4">{{ .Title }}</h1>
<p class="lead">
<h3 style="font-weight:100;"> — was made by <i>{{ .Params.author }}</i></h3>
</p>
<hr class="my-4">
<p style="font-size:20px;">Who is a student of <strong>{{ .Params.major }}</strong>, when they were in their year <strong>{{ .Params.year }}.</strong></p>
</div>
<div class="content-column-content">
<br>
<h4>Project Abstract:</h4>
<hr>
<p>{{ .Params.description }}</p>
<hr>
<div class="row" style="padding-top:100px;">
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Reach out to them</h5>
<p>Copy a link to this page to save or reach out to them to learn more:</p>
<button type="button" onclick="copyStringToClipboard({{ $pageurl }});
" style="border-radius:2px;padding:10px;" class="btn btn-primary ">Copy Link</button>
Contact Them
</div>
</div>
</div>
<div class="col-sm-6" style="background:#f2f2f2;">
<div class="card">
<div class="card-body">
<h5 class="card-title">Browse More By:</h5>
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
{{ .Params.major }} <span class="badge badge-primary badge-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Year {{ .Params.year }} Students <span class="badge badge-primary badge-pill">2</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
{{ .Params.tools }} <span class="badge badge-primary badge-pill">1</span>
</li>
</ul>
</div>
</div>
</div>
</div>
<br>
</div>
</div>
</div>
{{ end }}
I don't know how to add a new column to this. I've tried copying <div class="col-xs-12 col-sm-8 col-md-9 content-column white-background"> and adding things inside it, but it just adds it below the existing content. Essentially, I want to have a new sticky column where the 'Browse more` box appears next to the jumbotron.
try this
{{ define "main" }}
{{ $pageurl := .Permalink }}
<div class="col-xs-12 col-sm-8 col-md-9 content-column white-background">
{{ partial "mobile_nav_toggle.html" . }}
<div class="row">
<div class="col-lg-8">
<div class="jumbotron">
<h1 class="display-4">{{ .Title }}</h1>
<p class="lead">
<h3 style="font-weight:100;"> — was made by <i>{{ .Params.author }}</i></h3>
</p>
<hr class="my-4">
<p style="font-size:20px;">Who is a student of <strong>{{ .Params.major }}</strong>, when they were
in their year <strong>{{ .Params.year }}.</strong></p>
</div>
<div class="content-column-content">
<br>
<h4>Project Abstract:</h4>
<hr>
<p>{{ .Params.description }}</p>
<hr>
<div class="row" style="padding-top:100px;">
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Reach out to them</h5>
<p>Copy a link to this page to save or reach out to them to learn more:</p>
<button type="button" onclick="copyStringToClipboard({{ $pageurl }});
" style="border-radius:2px;padding:10px;" class="btn btn-primary ">Copy Link</button>
<a href="#" class="btn btn-primary"
style="background:#353535;border-color:#353535;border-radius:2px;padding:10px;">Contact
Them</a>
</div>
</div>
</div>
<div class="col-sm-6" style="background:#f2f2f2;">
</div>
</div>
<br>
</div>
</div>
<div class="col-lg-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Browse More By:</h5>
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
{{ .Params.major }} <span class="badge badge-primary badge-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Year {{ .Params.year }} Students <span
class="badge badge-primary badge-pill">2</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
{{ .Params.tools }} <span class="badge badge-primary badge-pill">1</span>
</li>
</ul>
</div>
</div>
</div>
</div>
{{ end }}
for more info about bootstrap layout grids refer here
You need to manage 12 columns per row. You added this div for the first column
<div class="col-xs-12 col-sm-8 col-md-9 content-column white-background"></div>
Now you need to use this div.
<div class="col-xs-12 col-sm-4 col-md-3 content-column white-background"></div>
If I use "col-md-7" then I will add "col-md-5" for the second column.
Now i have this:
<div class="row row-cols-1 row-cols-md-2 g-4">
{{#each stories}}
<div class="col">
<div class="card shadow-sm">
<img class="card-img-top" src="{{ image }}">
<div class="card-body">
<p class="card-text">{{ description }}</p>
<div class="d-flex justify-content-between align-items-center">
Читать
<small class="text-muted">author</small>
</div>
</div>
</div>
</div>
{{/each}}
</div>
And it looks like:
Now
I want the cards to be under each other: Reference
if you wanna put every card under each other you should put w-100 to each of cards or change your code like this :
<div class="row g-4">
{{#each stories}}
<div class="col-lg-12 mx-auto">
<div class="card shadow-sm">
<img class="card-img-top" src="{{ image }}">
<div class="card-body">
<p class="card-text">{{ description }}</p>
<div class="d-flex justify-content-between align-items-center">
Читать
<small class="text-muted">author</small>
</div>
</div>
</div>
</div>
{{/each}}
</div>
I am used two images button and place them in a a tag in the same bootstrap column. However this is how they look like:
This is my code:
<body>
<div class="backgroundImage">
<div class="text-right p-3">
<b>{{ __('Be A Dealer') }}</b>
</div>
<div class="container mt-4 mb-4">
<div class="row">
<div class="col-4 col-md-4 mx-auto my-auto">
<img class="mw-100" src="{{ asset('storage/logo/Bujishu_logo.png') }}" alt="Bujishu">
</div>
</div>
</div>
<div class="container">
<div class="row mb-4">
<div class="col-12 col-md-8 offset-md-2 text-center">
<h2 class="bujishu-motto">
A home is made of
<i>
<p class="bujishu-recursive">hopes</p>
</i>
and
<i>
<p class="bujishu-recursive">dreams</p>
</i>
</h2>
<h2 class="bujishu-motto">
Let us
<i>
<p class="bujishu-recursive">inspire</p>
</i>
you to build the perfect home!
</h2>
</div>
</div>
<div class="row mt-4">
<div class="col-6 col-md-4 offset-md-3 ">
<img class="landing_button" src="{{ asset('storage/buttons/Login-Icon.png') }}" alt="Login">
{{-- </div>
<div class="col-6 col-md-4 "> --}}
<img class="landing_button" src="{{ asset('storage/buttons/Sign-Up.png') }}" alt="Sign Up">
</div>
</div>
</div>
</div>
</div>
</body>
How do I align so the next two buttons are next to each other with some spacing between them as well?
Use d-flex and class in your col.
<div class="col-6 col-md-4 offset-md-3 d-flex">
You can also add pl-3 class to SIGN UP button for the space between the buttons.
If you are using Bootstrap 4 it will work if you use two columns, each of size 6 or you can change the size of columns accordingly.
<body>
<div class="backgroundImage">
<div class="text-right p-3">
<b>{{ __('Be A Dealer') }}</b>
</div>
<div class="container mt-4 mb-4">
<div class="row">
<div class="col-4 col-md-4 mx-auto my-auto">
<img class="mw-100" src="{{ asset('storage/logo/Bujishu_logo.png') }}" alt="Bujishu">
</div>
</div>
</div>
<div class="container">
<div class="row mb-4">
<div class="col-12 col-md-8 offset-md-2 text-center">
<h2 class="bujishu-motto">
A home is made of
<i>
<p class="bujishu-recursive">hopes</p>
</i>
and
<i>
<p class="bujishu-recursive">dreams</p>
</i>
</h2>
<h2 class="bujishu-motto">
Let us
<i>
<p class="bujishu-recursive">inspire</p>
</i>
you to build the perfect home!
</h2>
</div>
</div>
<div class="row mt-4">
<div class="col-6 col-md-6">
<img class="landing_button" src="{{ asset('storage/buttons/Login-Icon.png') }}" alt="Login">
</div>
<div class="col-6 col-md-6">
<img class="landing_button" src="{{ asset('storage/buttons/Login-Icon.png') }}" alt="Sign Up">
</div>
</div>
</div>
</div>
</body>
the entire row columns are about 12 columns so it should be col-md-6 or add d-flex to the row itself.
<div class="row mt-4">
<div class="col-6 col-md-6 ">
<img class="landing_button" src="{{ asset('storage/buttons/Login-Icon.png') }}" alt="Login">
</div>
<div class="col-6 col-md-6 ">
<img class="landing_button" src="{{ asset('storage/buttons/Sign-Up.png') }}" alt="Sign Up">
</div>
</div>
I want to show the content in my website from right to left, I'm trying using Flex from bootstrap but still doesn't work, did javascript library like jquery needed to show content from right to left?
this is the look I want
enter image description here
this is my web look like
enter image description here
this is myhtml
<div class="container">
#foreach ($books as $book)
<div class="d-flex justify-content-center " style="width:150px; direction:rtl">
<div class="card bg-info mb-3" style="width: 18rem;">
<img src="{{ asset("img/books/$book->gambar") }}" width="150" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">{{ $book->judul }}</h5>
<a href="#" class="btn btn-primary" >detail</a>
</div>
</div>
</div>
#endforeach
Bootstrap has a .flex-row-reverse class that can be used to change the direction of a flex row. So you should be able to do something like this:
<div class="container">
<div class="d-flex flex-row-reverse">
#foreach ($books as $book)
<div class="justify-content-center" style="width:150px; direction:rtl">
<div class="card bg-info mb-3" style="width: 18rem;">
<img src="{{ asset('img/books/$book->gambar') }}" width="150" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">{{ $book->judul }}</h5>
<a href="#" class="btn btn-primary" >detail</a>
</div>
</div>
</div>
#endforeach
</div>
</div>