Bootstrap cards under each other - html

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>

Related

How to align two image in a tag next to each other?

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>

show content from right to left in web (html and css)

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>

How can I align these product cards to grid?

I need to adjust these items to a grid, the first three are aligned but the following are all throughout the webpage the first three are perfectly aligned
I would like to align the rest of the cards like the first three. If someone can help me I would be really grateful.
Thanks. Here is the code below.
<div class="row">
<div class="col-md-4 mb-5">
<h2>Ултразвучни системи:</h2>
</div>
</div>
<!-- /.row -->
<div class="row ">
<div class="col-md-4 mb-5 d-flex align-items-stretch">
<div class="card h-100">
<img class="card-img-top" src="img\herai10.jpg"alt="">
<div class="card-body">
<h4 class="card-title">HERA I10</h4>
<p class="card-text">Акушерство, Гинекологија.</p>
</div>
<div class="card-footer">
Спецификации
</div>
</div>
</div>
<div class="col-md-4 mb-5 d-flex align-items-stretch">
<div class="card h-100">
<img class="card-img-top" src="img\heraw10.jpg" alt="">
<div class="card-body">
<h4 class="card-title">HERA W10</h4>
<p class="card-text">Акушерство, Гинекологија.</p>
</div>
<div class="card-footer">
Спецификации
</div>
</div>
</div>
<div class="col-md-4 mb-5 d-flex align-items-stretch">
<div class="card h-100" >
<img class="card-img-top" src="img\rs85.jpg" alt="">
<div class="card-body">
<h4 class="card-title">RS85</h4>
<p class="card-text">Радиологија.</p>
</div>
<div class="card-footer">
Спецификации
</div>
</div>
</div>
</div>
<div class="col-md-4 mb-5 d-flex align-items-stretch ">
<div class="card h-100">
<img class="card-img-top" src="img\WS80A.jpg" alt="">
<div class="card-body">
<h4 class="card-title">WS80A with Elite</h4>
<p class="card-text">Акушерство, Гинекологија.</p>
</div>
<div class="card-footer">
Спецификации
</div>
</div>
</div>
</div>
<div class="col-md-4 mb-5 d-flex align-items-stretch">
<div class="card h-100">
<img class="card-img-top" src="img\rs80a.jpg" alt="">
<div class="card-body">
<h4 class="card-title">RS80A with Prestige</h4>
<p class="card-text">Радиологија.</p>
</div>
<div class="card-footer">
Спецификации
</div>
</div>
</div>
</div>
<div class="col-md-4 mb-5 d-flex align-items-stretch">
<div class="card h-100">
<img class="card-img-top" src="img\hs70a.jpg" alt="">
<div class="card-body">
<h4 class="card-title">HS70A with Prime</h4>
<p class="card-text">Акушерство, Гинекологија, Кардиоваскуларно, Радиологија.</p>
</div>
<div class="card-footer">
Спецификации
</div>
</div>
</div>
</div>
<div class="col-md-4 mb-5 d-flex align-items-stretch">
<div class="card h-100">
<img class="card-img-top" src="img\hs60.jpg" alt="">
<div class="card-body">
<h4 class="card-title">HS60</h4>
<p class="card-text">Акушерство, Гинекологија, Кардиоваскуларно.</p>
</div>
<div class="card-footer">
Спецификации
</div>
</div>
</div>
</div>
<div class="col-md-4 mb-5 d-flex align-items-stretch">
<div class="card h-100">
<img class="card-img-top" src="img\hs50.jpg" alt="">
<div class="card-body">
<h4 class="card-title">HS50</h4>
<p class="card-text">Акушерство, Гинекологија, Кардиоваскуларно.</p>
</div>
<div class="card-footer">
Спецификации
</div>
</div>
</div>
</div>
<div class="col-md-4 mb-5 d-flex align-items-stretch">
<div class="card h-100">
<img class="card-img-top" src="img\hs40.jpg" alt="">
<div class="card-body">
<h4 class="card-title">HS40</h4>
<p class="card-text">Акушерство, Гинекологија, Кардиоваскуларно.</p>
</div>
<div class="card-footer">
Спецификации
</div>
</div>
</div>
</div>
<div class="col-md-4 mb-5 d-flex align-items-stretch">
<div class="card h-100">
<img class="card-img-top" src="img\hs30.jpg" alt="">
<div class="card-body">
<h4 class="card-title">HS30</h4>
<p class="card-text">Акушерство, Гинекологија, Кардиоваскуларно.</p>
</div>
<div class="card-footer">
Спецификации
</div>
</div>
</div>
</div>
<div class="col-md-4 mb-5 d-flex align-items-stretch">
<div class="card h-100">
<img class="card-img-top" src="img\hm70a.jpg" alt="">
<div class="card-body">
<h4 class="card-title">HM70A with Plus</h4>
<p class="card-text">Акушерство, Гинекологија, Кардиоваскуларно, Точка на Грижење.</p>
</div>
<div class="card-footer">
Спецификации
</div>
</div>
</div>
</div>
<div class="col-md-4 mb-5 d-flex align-items-stretch">
<div class="card h-100">
<img class="card-img-top" src="img\h60.jpg" alt="">
<div class="card-body">
<h4 class="card-title">H60</h4>
<p class="card-text">Акушерство, Гинекологија.</p>
</div>
<div class="card-footer">
Спецификации
</div>
</div>
</div>
</div>
<div class="col-md-4 mb-5 d-flex align-items-stretch">
<div class="card h-100">
<img class="card-img-top" src="img\sonoacer7.jpg" alt="">
<div class="card-body">
<h4 class="card-title">Sonoace R7</h4>
<p class="card-text">Акушерство, Гинекологија.</p>
</div>
<div class="card-footer">
Спецификации
</div>
</div>
</div>
</div>
<!-- /.row -->

There is a extra closing </div> tag that is causing the alignment to break.
<div class="row">
<div class="col-md-4 mb-5">
<h2>Ултразвучни системи:</h2>
</div>
</div>
<!-- /.row -->
<div class="row ">
<div class="col-md-4 mb-5 d-flex align-items-stretch">
<div class="card h-100">
<img class="card-img-top" src="img\herai10.jpg" alt="" />
<div class="card-body">
<h4 class="card-title">HERA I10</h4>
<p class="card-text">Акушерство, Гинекологија.</p>
</div>
<div class="card-footer">
Спецификации
</div>
</div>
</div>
<div class="col-md-4 mb-5 d-flex align-items-stretch">
<div class="card h-100">
<img class="card-img-top" src="img\heraw10.jpg" alt="" />
<div class="card-body">
<h4 class="card-title">HERA W10</h4>
<p class="card-text">Акушерство, Гинекологија.</p>
</div>
<div class="card-footer">
Спецификации
</div>
</div>
</div>
<div class="col-md-4 mb-5 d-flex align-items-stretch">
<div class="card h-100">
<img class="card-img-top" src="img\rs85.jpg" alt="" />
<div class="card-body">
<h4 class="card-title">RS85</h4>
<p class="card-text">Радиологија.</p>
</div>
<div class="card-footer">
Спецификации
</div>
</div>
</div>
<div class="col-md-4 mb-5 d-flex align-items-stretch ">
<div class="card h-100">
<img class="card-img-top" src="img\WS80A.jpg" alt="" />
<div class="card-body">
<h4 class="card-title">WS80A with Elite</h4>
<p class="card-text">Акушерство, Гинекологија.</p>
</div>
<div class="card-footer">
Спецификации
</div>
</div>
</div>
<div class="col-md-4 mb-5 d-flex align-items-stretch">
<div class="card h-100">
<img class="card-img-top" src="img\rs80a.jpg" alt="" />
<div class="card-body">
<h4 class="card-title">RS80A with Prestige</h4>
<p class="card-text">Радиологија.</p>
</div>
<div class="card-footer">
Спецификации
</div>
</div>
</div>
<div class="col-md-4 mb-5 d-flex align-items-stretch">
<div class="card h-100">
<img class="card-img-top" src="img\hs70a.jpg" alt="" />
<div class="card-body">
<h4 class="card-title">HS70A with Prime</h4>
<p class="card-text">
Акушерство, Гинекологија, Кардиоваскуларно, Радиологија.
</p>
</div>
<div class="card-footer">
Спецификации
</div>
</div>
</div>
<div class="col-md-4 mb-5 d-flex align-items-stretch">
<div class="card h-100">
<img class="card-img-top" src="img\hs60.jpg" alt="" />
<div class="card-body">
<h4 class="card-title">HS60</h4>
<p class="card-text">Акушерство, Гинекологија, Кардиоваскуларно.</p>
</div>
<div class="card-footer">
Спецификации
</div>
</div>
</div>
<div class="col-md-4 mb-5 d-flex align-items-stretch">
<div class="card h-100">
<img class="card-img-top" src="img\hs50.jpg" alt="" />
<div class="card-body">
<h4 class="card-title">HS50</h4>
<p class="card-text">Акушерство, Гинекологија, Кардиоваскуларно.</p>
</div>
<div class="card-footer">
Спецификации
</div>
</div>
</div>
<div class="col-md-4 mb-5 d-flex align-items-stretch">
<div class="card h-100">
<img class="card-img-top" src="img\hs40.jpg" alt="" />
<div class="card-body">
<h4 class="card-title">HS40</h4>
<p class="card-text">Акушерство, Гинекологија, Кардиоваскуларно.</p>
</div>
<div class="card-footer">
Спецификации
</div>
</div>
</div>
<div class="col-md-4 mb-5 d-flex align-items-stretch">
<div class="card h-100">
<img class="card-img-top" src="img\hs30.jpg" alt="" />
<div class="card-body">
<h4 class="card-title">HS30</h4>
<p class="card-text">Акушерство, Гинекологија, Кардиоваскуларно.</p>
</div>
<div class="card-footer">
Спецификации
</div>
</div>
</div>
<div class="col-md-4 mb-5 d-flex align-items-stretch">
<div class="card h-100">
<img class="card-img-top" src="img\hm70a.jpg" alt="" />
<div class="card-body">
<h4 class="card-title">HM70A with Plus</h4>
<p class="card-text">
Акушерство, Гинекологија, Кардиоваскуларно, Точка на Грижење.
</p>
</div>
<div class="card-footer">
Спецификации
</div>
</div>
</div>
<div class="col-md-4 mb-5 d-flex align-items-stretch">
<div class="card h-100">
<img class="card-img-top" src="img\h60.jpg" alt="" />
<div class="card-body">
<h4 class="card-title">H60</h4>
<p class="card-text">Акушерство, Гинекологија.</p>
</div>
<div class="card-footer">
Спецификации
</div>
</div>
</div>
<div class="col-md-4 mb-5 d-flex align-items-stretch">
<div class="card h-100">
<img class="card-img-top" src="img\sonoacer7.jpg" alt="" />
<div class="card-body">
<h4 class="card-title">Sonoace R7</h4>
<p class="card-text">Акушерство, Гинекологија.</p>
</div>
<div class="card-footer">
Спецификации
</div>
</div>
</div>
</div>

Bootstrap 4 'text-truncate' class positions the text below

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>

how to organise the card-deck body

I have card-deck like this
I want to organise these boxs : that the box Total width = Amazon Cost width + BOXI+ width :
below is my code
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex flex-column justify-content-center align-items-center h-100">
<div class="card-deck w-55">
<div class="card text-center">
<div class="card-header">
<h5 >Amazon Costs</h5>
</div>
<div class="card-body">
<h5 id="amc" class="card-title"></h5>
</div>
</div>
<div class="card text-center">
<div class="card-header">
<h5 >BOXI+</h5>
</div>
<div class="card-body">
<h5 id="boxiP" class="card-title"></h5>
</div>
</div>
</div>
<div class="card text-center">
<div class="card-header">
<h5 >Total</h5>
</div>
<div class="card-body">
<h5 id="tt" class="card-title"></h5>
</div>
</div>
</div>

Add a full width DIV (<div class="w-100"></div>) before the last card...
<div class="d-flex flex-column justify-content-center align-items-center h-100">
<div class="card-deck">
<div class="card text-center">
<div class="card-header">
<h5>Amazon Costs</h5>
</div>
<div class="card-body">
<h5 id="amc" class="card-title"></h5>
</div>
</div>
<div class="card text-center">
<div class="card-header">
<h5>BOXI+</h5>
</div>
<div class="card-body">
<h5 id="boxiP" class="card-title"></h5>
</div>
</div>
<div class="w-100"></div>
<div class="card text-center">
<div class="card-header">
<h5>Total</h5>
</div>
<div class="card-body">
<h5 id="tt" class="card-title"></h5>
</div>
</div>
</div>
</div>
https://www.codeply.com/go/PaLq3R5eXR