I am having a problem putting icon from font awesome and form input in the same column.
<div class="form-group">
<form method="POST" enctype="multipart/form-data">
{% csrf_token %}
{{ form.media }}
<div class="row pt-3">
<i class="fa fa-user fa-lg">{{ form.username }}</i>
</div>
</form>
</div>
With the code above, it looks a screenshot bellow:
I would like to look like the image bellow:
Thank you for your help.
It's better to deal with boxes with flexbox rather than row for more alignment flexibility.
Try the following code
<div class="form-group">
<form method="POST" enctype="multipart/form-data">
{% csrf_token %}
{{ form.media }}
<div class="d-flex pt-3">
<i class="fa fa-user fa-lg mr-2 "></i>{{ form.username }}
</div>
</form>
</div>
Related
Here's the radio buttons:
account_type = forms.ChoiceField(
choices=enumerate(('Choice 1', 'Choice 2')),
widget=forms.RadioSelect(
{'class': 'form-check form-check-inline', 'style': 'margin-left: 20px'}
),
label='',
)
I'm using bootstrap-nightshade for styling which possibly contains something that prevents inlining the buttons. So far I tried:
display: inline
and
display: inline-block;
and
class="radio-inline"
Nothing works. Here's the template of the form
{% extends 'index.html' %}
{% load bootstrap5 %}
{% block content %}
<section class="h-100">
<div class="container h-100">
<div class="row justify-content-sm-center h-100">
<div class="col-xxl-4 col-xl-5 col-lg-5 col-md-7 col-sm-9">
<div class="card shadow-lg">
<div class="card-body p-5">
<h4>{{ form_title }}</h4>
<form method="post">
{% csrf_token %}
{% bootstrap_form form %}
<button class="btn btn-success">{{ form_title }}</button>
{% if form_title == 'Sign in' %}
<a style="margin-left: 15px" href={% url 'reset-password' %}>Forgot password?</a>
{% endif %}
</form>
</div>
</div>
</div>
</div>
</div>
</section>
{% endblock %}
and here's how they are rendered:
<div class="mb-3">
<div class="form-check form-check-inline" id="id_choices">
<div>
<label for="id_choices_0"><input class="form-check form-check-inline" id="id_choices_0"
name="choices" required="" style="margin-left: 20px" title=""
type="radio" value="0">
Choice 1</label>
</div>
<div>
<label for="id_choices_1"><input class="form-check form-check-inline" id="id_choices_1"
name="choices" required="" style="margin-left: 20px" title=""
type="radio" value="1">
Choice 2</label>
</div>
</div>
</div>
I was trying to implemented the thumbs up icon but was not able to make it work. When ever I would try to add they disappear. I hope someone can help me.
my code:
<br/><br/>
<br/>
<form action="{% url 'like_post' post.pk %}" method="POST">
{% csrf_token %}
<button type='submit', name='post_id', value="{{ post.id }}", class="btn btn-primary btn-sm">Like</button>
<br>
{{ total_likes }} Likes
</form>
Thumbsup code needed:
<i class="fas fa-thumbs-up"></i>
I use MopaBootstrap in the twig and other places, but I want to know where it is defined.
{% extends "#MopaBootstrap/layout.html.twig" %}
{% from '#MopaBootstrap/flash.html.twig' import session_flash %}
{% block headline %}Choice Widgets{% endblock headline %}
{% block content %}
<div class="col-lg-6">
<form action="#" class="form-horizontal" method="post" >
{{ form_widget(form) }}
<div class="form-actions">
<button type="submit" class="btn btn-primary">Save changes</button>
<button type="reset" class="btn">Cancel</button>
</div>
</form>
</div>
<div class="col-lg-6">
<h3>Choice form widgets</h3>
<p>Here we try to show all possible choice form widgets</p>
<hr>
<p>And there is a lot to do</p>
</div>
{% endblock content %}
I've been trying to show items on the same line in bootstrap here is my code, it's was working before , but i think i messed it up , i'm kinda new to bootstrap, any help would be much appreciated.
<div class="row">
{% for album in all_albums %}
<div class="col-sm-4 col-lg-2">
<div class="thumbnail">
<a href="{% url 'music:detail' album.id %}">
<img src="{{ album.album_logo.url }}" class="img-responsive">
</a>
<div class="caption">
<h2>{{ album.album_title}}</h2>
<h4>{{ album.artist}}</h4>
<!-- Details -->
Details
<!-- Delete -->
<form action="{% url 'music:album-delete' album.id %}" method="post" style="display: inline;">
{% csrf_token %}
<input type="hidden" name="album_id" value="{{ album.id}} "/>
<button type="submit" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-trash"></span> Delete
</button>
</form>
<!--Favorite-->
<a href="#" class="btn btn-default btn-sm btn-favorite">
<span class="glyphicon glyphicon-star">{% if album.is_favorite%}active{% endif %}</span>
</a>
</div>
</div>
</div>
</div>
</div>
I got a problem is overriding template. Here is my simple code
In commonHeader.html.twig
{% block topsearch %}
<div class="col-md-6 col-sm-6 col-xs-6 col-lg-6 col-search">
<form action="" method="post" class="navbar-form navbar-left form-inline nav-form-search">
<div class="form-group col-md-12 form-search">
<label class="sr-only" for="search">Search</label>
<div class="input-group search-input-group col-md-12">
<input type="text" class="form-control input-search" id="search" placeholder="find...">
<div class="input-group-addon btn-search-addon">
<button type="submit" name="search" class="btn btn-icon-search">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</button>
<button type="submit" name="search" class="btn btn-text-search">SEARCH</button>
</div>
</div>
</div>
</form>
</div>
{% endblock %}
In file commonPage.html.twig I do like this:
{% block header %}
{{ include('::commonHeader.html.twig') }}
{% endblock %}
{% block content %}{% endblock %}
And I have many layouts that extended from commonPage.html.twig.
And on each layout, search have difference action url, so I need to override it.
Ex. in myLayout.html.twig I want to like this
{% extends "::commonPage.html.twig" %}
<!-- start overriding search here -->
{% block topsearch %}
<div class="col-md-6 col-sm-6 col-xs-6 col-lg-6 col-search">
<form action="mynewactionurl" method="post" class="navbar-form navbar-left form-inline nav-form-search">
<div class="form-group col-md-12 form-search">
<label class="sr-only" for="search">Search</label>
<div class="input-group search-input-group col-md-12">
<input type="text" class="form-control input-search" id="search" placeholder="find...">
<div class="input-group-addon btn-search-addon">
<button type="submit" name="search" class="btn btn-icon-search">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</button>
<button type="submit" name="search" class="btn btn-text-search">SEARCH</button>
</div>
</div>
</div>
</form>
</div>
{% endblock %}
{% block navigationleft %}
{% endblock %}
The problem is that I can't override search block in myLayout.html.twig?
Thanks for your helping!
Then you just need to fix the layout accordingly, i think its because you need to define your blocks in the main twig , i am not sure how the twig engine renders the includes but define your block in the main twig then include what you need, do not include blocks and then trying to override them. thats how our base.html.twig is defined. all our blocks are inside then we override them.