I want to add padding on all four sides of a bootstrap card, and so used the attribute style='padding:25px', but padding is only being applied on the other three sides except downwards, i.e there are no padding between rows. How do I fix this? I am using django and htm
<div class="row" style='padding:25px'>
{% for player in players %}
<div class="col-auto col-md-3">
<div class="column">
<div class="card" style="width: 18rem;">
<img class="card-img-top" width="20" height="300" src="{{ player.image_url }}">
<div class="card-body">
<h5 class="card-title">{{ player.name }}</h5>
<p class="card-text">{{ player.position }}</p>
Know More!
</div>
</div>
</div>
</div>
{% endfor %}
</div>
Add this :
<div class="row" style='padding:25px'>
{% for player in players %}
<div class="col-auto col-md-3">
<div class="column" style='padding:25px'>
<div class="card" style="width: 18rem;">
<img class="card-img-top" width="20" height="300" src="{{ player.image_url }}">
<div class="card-body">
<h5 class="card-title">{{ player.name }}</h5>
<p class="card-text">{{ player.position }}</p>
Related
My bootstrap cards are not aligning side by side and I can't seem to find my mistake. I am using django and html.
{% extends 'base.html' %}
<div>
{% block content %}
<h1>Players<h1>
{% for player in players %}
<div class="row">
<div class="column">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="{{ player.image_url }}">
<div class="card-body">
<h5 class="card-title">{{ player.name }}</h5>
<p class="card-text">{{ player.position }}</p>
Know More!
</div>
</div>
</div>
</div>
{% endfor %}
{% endblock %}
</div>
try this
use bootstrap grid https://getbootstrap.com/docs/4.0/layout/grid/
{% extends 'base.html' %}
<div>
{% block content %}
<h1>
Players
<h1>
<div class="row">
{% for player in players %}
<div class="col-auto col-md-3">
<div class="column">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="{{ player.image_url }}">
<div class="card-body">
<h5 class="card-title">{{ player.name }}</h5>
<p class="card-text">{{ player.position }}</p>
Know More!
</div>
</div>
</div>
</div>
{% endfor %}
</div>
{% endblock %}
</div>
I am having a hard time understanding how to set up my bootstrap rows /columns to align like the picture shown. I have tried columns nested in rows and vise versa with no luck.
The yellow and green parts in the photo are added dynamically. There could be 1 or 10 but I want the formatting to be consistent. (using Django) bootstrap formatting example
<div class="container">
<div class="col-2">
<div class="card card-body">
<br>
<!--{% for object in business %}-->
<div style="text-align:center"><img src="{{ object.logo.url }}" alt="Card image cap" width="90" height="90"></div>
<br>
<h5 style="text-align:center;">{{ object.name }}</h5>
<!--{% endfor %}-->
<!--{% if user.is_authenticated %}-->
<h6 style="text-align:center;">{{ user.username }}</h6>
<!--{% endif %}-->
<p style="text-align:center;">Ratings go here</p>
<br>
</div>
</div>
<div class="col-10">
<div class="row">
<!--{% if service %}-->
<!--{% for services in service %}-->
<div class="col-4">
<div class="card" style="width: 18rem;" href="">
<img class="card-img-top" src="{{ services.cover_image.url }}" alt="{% static 'images\default_cover.jpg' %}" >
<div class="card-body">
<p class="card-text">{{ services.description }}</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">(Rating goes here)</li>
<li class="list-group-item">Starting at: ${{ services.price }} </li>
</ul>
</div>
</div>
<!--{% endfor %}-->
<!--{% endif %}-->
</div>
</div>
Something like this should work:
<div class="container">
<div class="col-2">left column</div>
<div class="col-10">
<div class="row">
<div class="col-4">three elements per row</div>
<div class="col-4">three elements per row</div>
<div class="col-4">three elements per row</div>
</div>
<div class="row">
<div class="col-12">one element per row</div>
<div class="col-12">one element per row</div>
<div class="col-12">one element per row</div>
</div>
</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>
I’m trying to create a grid with Bootstrap 4 that contains my posts in a 3x3 grid.
My code now is:
<div class="col-sm-8" id="main-content">
<div class="row">
{% for post in site.posts%}
<div class="col-sm-4">
<div class="card" style="width: 20rem;">
<img class="card-img-top" src="../media/logo-prueba.jpg">
<div class="card-block">
<h4 class="card-title">{{ post.title }}</h4>
<p class="card-text">{{ post.category }}</p>
</div>
</div>
</div>
{% endfor %}
</div>
The first div with col-sm-8 is just there because I’m also using a sidebar.
How can I approach this? Like printing in a row 3, then in the next one 3, and the last on 3?
The output is this one with 3 posts:
<div class="row">
<div class="col-sm-4">
<div class="card" style="width: 20rem;">
<img class="card-img-top" src="../media/logo-prueba.jpg">
<div class="card-block">
<h4 class="card-title">test1</h4>
<p class="card-text"></p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card" style="width: 20rem;">
<img class="card-img-top" src="../media/logo-prueba.jpg">
<div class="card-block">
<h4 class="card-title">Otro post!</h4>
<p class="card-text"></p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card" style="width: 20rem;">
<img class="card-img-top" src="../media/logo-prueba.jpg">
<div class="card-block">
<h4 class="card-title">Calzón chino</h4>
<p class="card-text"></p>
</div>
</div>
</div>
</div>
</div>
Any help? Thanks in advance!
Setting a fixed inline width to a bootstrap element who's parent has a percentage width is not the way to go, as it will break the responsive behaviour. By default, the card element takes up all available space in your column. If you want it to be smaller, use a margin on the card and not a fixed with (rem equals an amount of pixels). Make sure the image width is (still) 100%.
{% for post in site.posts limit:9 %}
<div class="col-sm-4">
<div class="card" style="width: 20rem;">
<img class="card-img-top" src="../media/logo-prueba.jpg">
<div class="card-block">
<h4 class="card-title">{{ post.title }}</h4>
<p class="card-text">{{ post.category }}</p>
</div>
</div>
</div>
{% endfor %}
Finally, as suggested in the comments, use modulo to prevent strange stacking behaviour when the first or the second item is higher than the third:
{% for post in site.posts limit:9 %}
{% assign indexmod3 = forloop.index | modulo: 3 %}
{% if indexmod3 == 0 %}<div style="clear: both;"></div>{% endif %}
<div class="col-sm-4">
...
</div>
</div>
{% endfor %}
Just trying to pick up Vue.js so please be gentle :smiley:
The issue I’m facing is that when i’m binding elements separately on two different columns it everything works, but it messes up my layout. All images load on first row and articles are rendered below.
the code =>
```<div class="row no-gutters"> <!-- remove horizontal paddings between columns 4 this row -->
<div class="col-md-2" v-for="(post, img) in posts">
<div class="article-image">
<img :src="post.img" />
</div>
</div>
<div class="col-md-6" v-for="(post, title) in posts" v-bind="post.id">
<div class="article">
<div class="card">
<div class="card-body">
<h3 class="card-title">{{ post.title }}</h3>
<h6 class="card-subtitle text-muted">21st Dec 17</h6>
<p class="card-text">{{ post.content }}</p>
</div>
</div>
</div>
</div>```
So, I decided to put the v-for on the row class instead and have it loop through image and article one after another, rather than loading all images first and then all the articles.
the code =>
```<div class="row no-gutters" v-for="(post, img, title) in posts" v-bind="post.id">
<div class="col-md-2" v-for="(post, img) in posts">
<div class="article-image">
<img :src="post.img">
</div>
</div>
<div class="col-md-6" >
<div class="article">
<div class="card">
<div class="card-body">
<h3 class="card-title">{{ post.title }}</h3>
<h6 class="card-subtitle text-muted">21st Dec 17</h6>
<p class="card-text">{{ post.content }}</p>
</div>
</div>
</div>
</div>```
I’m not sure if I’m failing at declaring it properly, but I’m getting the following error =>
(source: vuejs.org)
Any help would be much appreciated.
Wrap your template in a div
<div>
<div class="col-md-2" v-for="(post, img) in posts">
<div class="article-image">
<img :src="post.img" />
</div>
</div>
<div class="col-md-6" v-for="(post, title) in posts" v-bind="post.id">
<div class="article">
<div class="card">
<div class="card-body">
<h3 class="card-title">{{ post.title }}</h3>
<h6 class="card-subtitle text-muted">21st Dec 17</h6>
<p class="card-text">{{ post.content }}</p>
</div>
</div>
</div>
</div>
</div>
Why?
You can only have one root element in your template; v-for makes multiple.
Thats the final template that worked for me...
<div>
<div class="row no-gutters" v-for="(post, img, title) in posts" v-bind="post.id"> <!-- remove horizontal paddings between columns 4 this row -->
<div class="col-md-2">
<div class="article-image">
<img :src="post.img" />
</div>
</div>
<div class="col-md-6">
<div class="article">
<div class="card">
<div class="card-body">
<h3 class="card-title">{{ post.title }}</h3>
<h6 class="card-subtitle text-muted">21st Dec 17</h6>
<p class="card-text">{{ post.content }}</p>
</div>
</div>
</div>
</div>
</div>