Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Daniel Markham
Daniel Markham
10,976 Points

Layout Issue Using Bootstrap/Flask

Hi all,

I am having an issue laying out "Cards" correctly using Bootstrap. My goal is to evenly and aesthetically lay out Treehouse badges/titles on a page. Currently, I have some of these cards taking up an entire row despite my best efforts to style them correctly with Bootstrap classes, i.e. three badges to a row using the 12 column format (or feel free to suggest a better means). Here is a link to the Flask template I put up on Github (bear with me as I am new to Github, SQL guy):

https://github.com/dmarkha1/iter_1/blob/work_on_custom_css/templates/treehouse.html

I have also uploaded the raw html to the same repo if that is more helpful:

https://github.com/dmarkha1/iter_1/blob/work_on_custom_css/templates/raw.html

Thanks in advance for any advice or guidance as I am terrible with CSS. And, of course, feel free to offer any additional wisdom outside the parameters of my question.

Cheers,

Dan

William Polliard
William Polliard
13,039 Points

Hey Dan,

Try adding a div class row to wrap each set of 3 badges.

<div class="row">
        <div class="col-sm-4">
          <div class="card">
            <img class="card-img-top img-fluid" src="https://achievement-images.teamtreehouse.com/badges_html_forms_stage1.png" alt="Form Basics">
            <div class="card-block">
              <h4 class="card-title">Form Basics</h4>
            </div>
          </div>
        </div>

        <div class="col-sm-4">
          <div class="card">
            <img class="card-img-top img-fluid" src="https://achievement-images.teamtreehouse.com/badges_html_forms_stage2.png" alt="Organizing Forms">
            <div class="card-block">
              <h4 class="card-title">Organizing Forms</h4>
            </div>
          </div>
        </div>

        <div class="col-sm-4">
          <div class="card">
            <img class="card-img-top img-fluid" src="https://achievement-images.teamtreehouse.com/badges_html_forms_stage3.png" alt="Choosing Options">
            <div class="card-block">
              <h4 class="card-title">Choosing Options</h4>
            </div>
          </div>
        </div>
    </div>

1 Answer

Daniel Markham
Daniel Markham
10,976 Points
Daniel Markham
Daniel Markham
10,976 Points

Thanks for the response William. You were right I did need to pay more attention to how the "rows" were being dynamically populated. I had to add some flask logic to dynamically start and end div rows (used modulus). This entailed adding an index to my python tuple and also putting the logic into the flask template: 

{% extends "layout.html" %}
{% block content %}
<!-- treehouse     -->
      <h1 id="treehouse" class ="display-4 text-xs-center m-y-3 text-muted">Treehouse Badges Achieved</h1>

      {% for badge in badgeList %}
        {% if (badge[0]) % 3 == 1 %}
        <div class="row">
        {% endif %}  
          <div class="col-md-4">
            <div class="card m-t-2" style="width: 10rem;">
              <img class="card-img-top img-fluid" src="{{ badge[2] }}" alt="{{ badge[1] }}">
              <div class="card-block">
                <h4 class="card-title">{{ badge[1] }}</h4>
              </div>
            </div>
          </div>
        {% if badge[0] % 3 == 0 %}
        </div><!-- /row --> 
        {% endif %}  




      {% endfor %}
<!-- /treehouse -->


 {% endblock %}

Thanks for your help.

Best,

Dan