Skip to content
← Back to Community
How To Make BOOTSTRAP Cards stay on the same LINE?
Profile icon
SUHASTADIPARTH1

Hi guys,
I am making a special app, and I want to put bootstrap cards on the same line.


I want to be able to put the cards side by side (next to one another)

I don't want them on seperate lines!!

Could you help me with this?

Answered by Coder100 [earned 5 cycles]
View Answer
Voters
Profile icon
OmarCoronado
Profile icon
SUHASTADIPARTH1
Comments
hotnewtop
Profile icon
Coder100

Easy!
Read this

<div class="row"> <div class="col-sm-6"> <div class="card"> <div class="card-body"> <h5 class="card-title">Special title treatment</h5> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </div> <div class="col-sm-6"> <div class="card"> <div class="card-body"> <h5 class="card-title">Special title treatment</h5> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </div> </div>
Profile icon
SUHASTADIPARTH1

@Coder100 Your solution doesn't work.

Screenshot 2020-11-02 at 7.07.22 AM
Screenshot 2020-11-02 at 7.08.04 AM

Profile icon
Coder100

hmm send repl @SUHASTADIPARTH1

Profile icon
Coder100

make sure the .row div is outside of the forloop silly! @SUHASTADIPARTH1

Profile icon
SUHASTADIPARTH1

@Coder100 Ok, I will send the repl.

Profile icon
SUHASTADIPARTH1

@Coder100 I will test this out too.

Profile icon
Coder100
Profile icon
Coder100

for minimal tears:

<div class="row"> {% for p in popular_q %} <div class="col-sm-6"> ... {% endfor %} </div>

@SUHASTADIPARTH1

Profile icon
SUHASTADIPARTH1

@Coder100 take a look at the users/templates/profile.html

Profile icon
SUHASTADIPARTH1

@Coder100 Ok, I will test this out.

Profile icon
SUHASTADIPARTH1

@Coder100 Amazing, it worked. Thank you.

Profile icon
Coder100

no problem! :) @SUHASTADIPARTH1

Profile icon
RYANTADIPARTHI

Use this:

.your_class { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; }

If this doesn't work, then the only thing is you cannot change bootstrap stuff. That CSS framework is meant to be like that. So you can't change it. Make your own cards.

Another option is to use materialize CSS - another framework. You can put side to side cards there.

Another option is to make your own card.

Another thing is to make your own card, but use mostly bootstrap classes. That will help a lot. Then for the css, use the code above.

Profile icon
Coder100

why not just use bootstrap @RYANTADIPARTHI

Profile icon
RYANTADIPARTHI

another suggestion would be to use the code I'm about to give you. Just fill in the jinja2 syntax in the blank spaces.

<div class="card text-center" style="width: 15rem;"> <div class="card-body"> <h5 class="card-title"><a href="{% url 'details' item.id %}"> </a> - </h5> <p class="card-text">{{ item.description|slice:":16" }}</p> <a href="{% url 'add_items' item.name item.price item.description %}" class="btn btn-info">Add To Cart</a> <a href="#" class="btn btn-primary">Buy</a> </div> </div>

now the css

.card { display: inline-block; padding: 10px; margin: 10px; }

That should work.