I am using twitter bootstrap for my website mywebsite.
I created four category blocks using col-md-3. When a block is heigher than the other, the other blocks don't dispay correctly. Here is my code:
<div class="row">
{% for category in categoriesActivities %}
<div class="col-md-3 col-sm-6">
<ul class="classifieds-category">
<li><i class="fa fa-bullhorn"></i>{{ category.name }}
<ul class="sub-category">
{% for activity in category.activities %}
<li>
{{ activity.principal }}
</li>
{% endfor %}
</ul>
</li>
</ul>
</div><!-- End grid layout -->
{% endfor %}
</div> <!-- End .row -->
Image of the blocks:
How can i fix it?
you need to add
<div class="clearfix"></div>
After the Informatiqe div.
That clears the col-- float.
Related
I am working on a web app and need it to be compatible with mobile devices.
The web app is written using Django, I am using Bootstrap 5 for arranging the page to be responsive. I am totally a newbie with mobile frontend development.
Now I understand that the grid system could help us scale the whole page to fit mobile devices properly. But as the page is developed using desktop, when viewing in mobile devices, the elements in the page is so small. I was originally thinking that Bootstrap would magically enlarge each row when it scale to fit mobile devices, but that's not the case.
Consulting with my friends, we seem to need to manually set size (width * height) based on the device-width. Then that's a lot of work. Is this the only way to go?
The page does scale to fit mobile devices, but each card is so small that it is very difficult to see the text/button.
<head>
<title>.....</title>
<meta charset="utf-8">
<meta name="viewpoint" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/css/bootstrap.min.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Sofia' rel='stylesheet'>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body class="container-lg pt-1">
<div class="Heading .text-center">
<div class="row">
<h1 class="col-sm-12">Title Here</h1>
</div>
</div>
<div data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="50">
<nav class="navbar navbar-expand-sm justify-content-center sticky-top">
<ul class="navbar-nav">
{% for categ in categories_list %}
<li><a class="nav-link" href="#{{categ.split|join:'-'}}"> {{categ}}</a></li>
{% endfor %}
</ul>
</nav>
{% for categ in categories_list %} {% with entrees=foods_by_categ|get_item:categ %}
<div id="{{categ.split|join:'-'}}">
<h3>{{categ|capfirst}}</h3>
{% for entree in entrees %}
<div class="card">
<div class="card-header">
{{entree.name}}
<button data-bs-toggle="modal" data-bs-target="#food-{{entree.id}}" class="btn float-end">Add to Cart</button>
</div>
{% if entree.description %}
<div class="card-body">
<pre>{{entree.description}}</pre>
</div>
{% endif %}
<form id="food-{{entree.id}}" action="{% url 'cart:add2cart' %}" class="card-body modal fade" method="post">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
{% with add2cart_form=add2cart_forms|get_item:entree.name %} {% csrf_token %} {{ add2cart_form.non_field_errors }}
<div class="modal-header">
<h4 class="modal-title">{{entree.name}}</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<ul class="list-group list-group-flush">
{% if entree.small_available %}
<li class="list-group-item">
{{ add2cart_form.size_opt.errors }} {{ add2cart_form.size_opt.label_tag}} {{ add2cart_form.size_opt }}
</li>
{% endif %}
<li class="list-group-item">
<button type="submit" class="btn btn-primary float-end">Add</button>
</li>
</ul>
</div>
{% endwith %}
</div>
</div>
</form>
</div>
{% endfor %}
</div>
{% endwith %} {% endfor %}
</div>
</body>
I have a calendar generated by Django and styled with Bootstrap.
Here is the code in the Django template :
<div class="content">
{% for month in period.get_months %}
<div class="col-md-3">
<div class="row row-centered">
<button class="btn btn-custom active" href="{% url "month_calendar" calendar.slug %}{% querystring_for_date month.start 2 %}">{{month.name}}</button>
</div>
<div>
{% month_table calendar month "small" %}
</div>
</div>
{% endfor %}
</div>
Now, since months have a different number of weeks they have different heights I would like to avoid something like this:
I understand from this answer that the best solution would be to use a clearfix.
So, how can I modify the for loop in my template so that Django inserts an extra line <div class="clearfix"></div> every four items?
Django templates for loop store current index in forloop.counter variable. You can read about this in docs. So you can try to change you code like this:
<div class="content">
{% for month in period.get_months %}
<div class="col-md-3">
<div class="row row-centered">
<button class="btn btn-custom active" href="{% url "month_calendar" calendar.slug %}{% querystring_for_date month.start 2 %}">{{month.name}}</button>
</div>
<div>
{% month_table calendar month "small" %}
</div>
</div>
{% if forloop.counter|divisibleby:4 %}
<div class="clearfix"></div>
{% endif %}
{% endfor %}
</div>
I am trying to align the logo and cart icon in same line. Also there should be some space between the logo and the cart icon. Check the part //...moved this code here - start. That is the code I have added. It was earlier residing in a ul tag. Moved it here.
<div class="row">
<div id="logo" class="desktop-12 mobile-3">
{% if settings.use_logo_image %}
<img src="{{ 'logo.png' | asset_url }}" alt="{{ shop.name }}" style="border: 0;"/>
{% else %}
{{ shop.name }}
{% endif %}
//...moved this code here - start
<ul id="cart" class="{% if settings.enable-hello %}desktop-3 {% else %}desktop-6{% endif %} tablet-6 mobile-3">
<li class="cart-overview"><i class="icon-shopping-cart icon-2x"></i><span id="item_count">{{ cart.item_count }}</span>
<div id="crt">
{% include 'shopping-cart' %}
{% if cart.item_count != 0 %}
<a class="checkout-link" href="/cart">{{ 'cart.general.checkout' | t }}</a>
{% endif %}
</div>
</li>
</ul>
//...moved this code here - end
</div>
</div>
This is the output I am getting now.
And this is the output I am expecting.
Yes so under the div named logo; both logo image and then cart comes. So inorder to align in same line
for example below:
<div class="logo">
<div class="logoimg"></div>
<div class="cartimg"></div>
</div>
Style becomes like eg:
<style>
.logo{display:inline-block;width:900px}
.logoimg{float:left;width:400px;}
.cartimg{float:right;width:400px;}
</style>
Let me know for more details if needed.
I have a problem with this code for a fancybox gallery which its showing all images across the page, when should be visible just the first one and then others, when you click.
How do i stop from showing all images and show just the first one before click?
<code>
{% for slide in wp.get_post_meta(post.ID, '_property_slides', TRUE) %}
<div class="carousel property">
<div class="preview">
<a rel="galeria{{ post.ID }}" href="{{ slide.imgurl }}">
<img src="{{ slide.imgurl }}" alt="">
</a>
</div>
<!-- /.preview -->
<div class="content">
<ul>
{% for slide in wp.get_post_meta(post.ID, '_property_slides', TRUE) %}
{% if loop.first %}
<li class="active" >
{% else %}
<li>
{% endif %}
<img src="{{ slide.imgurl }}" alt="">
</li>
{% endfor %}
</ul>
<a id="carousel-prev" href="#">{{ wp.__('Previous', 'aviators') }}</a>
<a id="carousel-next" href="#">{{ wp.__('Next', 'aviators') }}</a>
</div>
<!-- /.content -->
</div><!-- /.carousel -->
{% endfor %}
</code>
You have to change the first line:
// delete this line {% for slide in wp.get_post_meta(post.ID, '_property_slides', TRUE) %}
{% if wp.get_post_meta(post.ID, '_property_slides', TRUE) %} //use this one
and the last one:
// delete this line {% endfor %}
{% end %}
I have the Following Code, am using BootStrap css
<ul>
<li>
{% if current_user.is_authenticated() %}
Hello, {{ current_user.name }}
{% endif %}
</li>
<li class="nav-collapse collapse pull-right">LogOut </li>
</ul>
I want to get the above two tags in a single line
Add the pull-right class to both.