I have been encountering problems like this on the current bootstrap 3 for a while now. I have managed to fix them in the past in one way or another but have no clue of how to fix it this time.
I need to create two columns out of one ul by alternating a pull-left & pull-right on list items. What am I doing wrong?
http://bootply.com/92446
You should try using the Grid Template.
Here's what I've used for a two Column Layout of a <ul>
<ul class="list-group row">
<li class="list-group-item col-xs-6">Row1</li>
<li class="list-group-item col-xs-6">Row2</li>
<li class="list-group-item col-xs-6">Row3</li>
<li class="list-group-item col-xs-6">Row4</li>
<li class="list-group-item col-xs-6">Row5</li>
</ul>
This worked for me.
Thanks, Varun Rathore. It works perfectly!
For those who want graceful collapse from 4 items per row to 2 items per row depending on the screen width:
<ul class="list-group row">
<li class="list-group-item col-xs-6 col-sm-4 col-md-3">Cell_1</li>
<li class="list-group-item col-xs-6 col-sm-4 col-md-3">Cell_2</li>
<li class="list-group-item col-xs-6 col-sm-4 col-md-3">Cell_3</li>
<li class="list-group-item col-xs-6 col-sm-4 col-md-3">Cell_4</li>
<li class="list-group-item col-xs-6 col-sm-4 col-md-3">Cell_5</li>
<li class="list-group-item col-xs-6 col-sm-4 col-md-3">Cell_6</li>
<li class="list-group-item col-xs-6 col-sm-4 col-md-3">Cell_7</li>
</ul>
you are thinking too much... Take a look at this [i think this is what you wanted - if not let me know]
http://www.bootply.com/118886
css
.even{background: red; color:white;}
.odd{background: darkred; color:white;}
html
<div class="container">
<ul class="list-unstyled">
<li class="col-md-6 odd">Dumby Content</li>
<li class="col-md-6 odd">Dumby Content</li>
<li class="col-md-6 even">Dumby Content</li>
<li class="col-md-6 even">Dumby Content</li>
<li class="col-md-6 odd">Dumby Content</li>
<li class="col-md-6 odd">Dumby Content</li>
</ul>
</div>
Related
I'm using Bootstrap Tabs https://getbootstrap.com/docs/4.0/components/navs/#tabs
Is there a way to reverse to a specific Tab with get_success_url() ?
Someting like (but this does not work):
class UpdateModelView(UpdateView):
model = Model
def get_success_url(self):
return '{}#profile'.format(reverse('myApp'))
Update:
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">Home</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">Profile</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">Contact</div>
</div>
I'm new with django-cms and i want to add menu like image i post.
I have read the doc but i don't know how to create my custom menu.
I want to get something like this html code (Please add me explain):
some place in code i have .col-4, and another place i have .col-3 look image and code for more comprehension.
<ul class="menu">
<li class="toggle-menu">
<i class="fa icon_menu"></i>
</li>
<li class="first">
Accueil
</li>
<li>
Photographie
<div class="megamenu full">
<div class="row">
<div class="col-4">
<ul class="megamenu-list">
<li class="title">Présentation</li>
<li>A propos</li>
</ul>
</div>
<div class="col-4">
<ul class="megamenu-list">
<li class="title">Evènements</li>
<li>Mariage</li>
<li>Portrait</li>
</ul>
</div>
<div class="col-4">
<ul class="megamenu-list">
<li class="title">Entreprise et institutions</li>
<li>Portraits Corporate</li>
<li>Reportage entreprise</li>
</ul>
</div>
</div>
</div>
</li>
<li>
Production media
<div class="megamenu full">
<div class="row">
<div class="col-3">
<ul class="megamenu-list">
<li class="title">Présentation</li>
<li>A propos</li>
<li>Nos offres</li>
</ul>
</div>
<div class="col-3">
<ul class="megamenu-list">
<li class="title">Services</li>
<li>Montage</li>
<li>Drones</li>
</ul>
</div>
<div class="col-3">
<ul class="megamenu-list">
<li class="title">Vos évènements</li>
<li>Mariages</li>
<li>Reportage coorporate</li>
</ul>
</div>
<div class="col-3">
<ul class="megamenu-list">
<li class="title">Location</li>
<li>Cameras</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
but i dont know how, please help
I am trying to add bootstrap carousel to my home page in django app it is not changing slide.
templates/posts/index.html
{% extends "posts/base.html" %}
{% block content %}
<div class="container pt-3 mh-50">
<div class="bd-example">
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
{% for fpost in featured_post %}
{% if forloop.counter == 1 %}
<div class="carousel-item active">
{% else %}
<div class="carousel-item">
{% endif %}
<img src="{{fpost.thumbnail.url}}" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>{{fpost.title}}</h5>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
{% endfor %}
</div>
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
</ol>
</div>
</div>
</div>
views.py
def index(request):
featured = Post.objects.filter(featured = True) #put this on carousel
latest_post = Post.objects.order_by('-timestamp')[:6]
startup_post = Post.objects.filter(category__title__iexact='startup')[0:3]
opinion_post = Post.objects.filter(category__title__iexact='opinion')[0:3]
# add a video field here
context = {
'featured_post': featured,
'latest_post': latest_post,
'startup_post': startup_post,
'opinion_post': opinion_post
}
return render(request, 'posts/index.html', context)
I am trying to render post with featured post true on carousel. It is giving me just static picture without any slideshow.
Try this...Also don't forget to include bootstrap styles.
And also could you tell me why are you using block {% if ...%}? It is useless in you example.
{% extends "posts/base.html" %}
{% block content %}
<div class="container mt-5">
<div class="bd-example">
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
{% for fpost in featured_post %}
<div class="carousel-item active">
<img src="{{fpost.thumbnail.url}}" class="d-block img-responsive" height="650px !important" width="100%">
<div class="carousel-caption d-none d-md-block">
<h5>{{fpost.title}}</h5>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
{% endfor %}
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
{% endblock %}
Call the carousel over javascript (add this inside your html):
<script>
$('.carousel').carousel()
</script>
I want my main content and Sidewidget in the same row. With my knowledge of bootstrap grid, I tried to make this work but the sidewidget is stacking below the content and not in the sides. Here is the required snippets.
body.html
<!-- Navigation -->
{% include 'nav.html' %}
<!-- Page Content -->
<div class="container">
<div class="row">
<div class="col-lg-8 ">
{% block content %}
{% endblock %}
</div>
<div class="col-lg-4">
{% block sidewidget %}
{% endblock %}
</div>
</div>
</div>
<!-- Bootstrap core JavaScript -->
<script src="{% static 'js/jquery.min.js' %}"></script>
<script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
<script src="{% static 'js/tinymce/tinymce.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/tinymce/custom.js' %}" ></script>
nav.html
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Start Bootstrap</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
{% if user.is_authenticated %}
<li class="nav-item">
<a class="nav-link" href="{% url 'add' %}">Add Article</a>
</li>
{% endif %}
</ul>
</div>
</div>
My {% block content %}
{% for post in posts %}
<h2 class="mt-4">{{post.title}}</h2>
<!-- Author -->
<p class="lead">
by
{{post.author}}
</p>
<hr>
<!-- Date/Time -->
<p class="lead">Published on <b>{{post.published_date}}</b></p>
<hr>
<!-- Preview Image -->
<img class="img-fluid" src="{{post.image.url}}" alt="Img Placeholder">
<p>{{post.images}}</p>
{% for tag in post.tags.all %}
<p>{{tag.name}}</p>
{% endfor %}
<hr>
<!-- Post Content -->
<p class="lead">{{post.content|safe|truncatewords:"60"|linebreaks}}</p>
<footer class="entry-footer">
<button class="btn btn-primary">Read More</button>
</footer>
<hr>
{% empty %}
<h1> Nothing to display</h1>
{% endfor %}
{% endblock %}
My {% Sidewidget %} block
<!-- Search Widget -->
<div class="card my-4">
<h5 class="card-header">Search</h5>
<div class="card-body">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">Go!</button>
</span>
</div>
</div>
</div>
<!-- Categories Widget -->
<div class="card my-4">
<h5 class="card-header">Categories</h5>
<div class="card-body">
<div class="row">
<div class="col-lg-6">
<ul class="list-unstyled mb-0">
<li>
Web Design
</li>
<li>
HTML
</li>
<li>
Freebies
</li>
</ul>
</div>
<div class="col-lg-6">
<ul class="list-unstyled mb-0">
<li>
JavaScript
</li>
<li>
CSS
</li>
<li>
Tutorials
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Side Widget -->
<div class="card my-4">
<h5 class="card-header">Side Widget</h5>
<div class="card-body">
You can put anything you want inside of these side widgets. They are easy to use, and feature the new Bootstrap 4 card containers!
</div>
</div>
{% endblock %}
I have tried tweaking but nothing seems to work
I want the page like this:
|*****************************|
|navigationbar |
|*****************************|
|Post1(Col1-Col8) |SIDEWIDGET|
|***** | |
|Post2(Col1-Col8) | |
|***** | |
|PostN(Col1-Col8) | |
|*****************************|
|Footer |
Your code should work. The col-lg-* modifier applies only for screens that are over 1200px wide as per bootstrap's documentation. Maybe you're using a smaller screen and you also need to add the col-sm and col-md modifiers. Please try those and let me know if it works.
<div class="container">
<div class="row">
<div class="col-sm-8 col-lg-8 ">
{% block content %}
{% endblock %}
</div>
<div class="col-sm-4 col-lg-4">
{% block sidewidget %}
{% endblock %}
</div>
</div>
</div>
you can't use a bootstarp grid system for it because the sidewidget is going to take up the column of the whole three rows .You would have to use flex box for it. by using grid system columns can be individually used in different rows but you cannot have a whole column spanning over the different rows .
In the 'nav' section the 'nav' tag is not closed </nav>. close it and try again.
I think that will solve your problem.
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Start Bootstrap</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
{% if user.is_authenticated %}
<li class="nav-item">
<a class="nav-link" href="{% url 'add' %}">Add Article</a>
</li>
{% endif %}
</ul>
</div>
</div>
</nav>
Would really welcome some help with my navbar. I'm trying to achieve what I consider the most obvious setup. Dropdown menus on larger screens and drilldowns on smaller ones. I have a pen here but there are bullet marks that should not be there, and the menu opens horizontally (I want it vertically) on larger screens.
<div class="title-bar" data-responsive-toggle="nav-menu" data-hidefor="medium">
<button class="menu-icon" type="button" data-toggle></button>
<div class="title-bar-title player-controls">Brand
</div>
</div>
<div class="top-bar" id="nav-menu">
<div class="row">
<div class="top-bar-left show-for-medium">
Brand
</div>
<div class="top-bar-right">
<ul class="vertical medium-horizontal menu" data-responsive-menu="drilldown medium-dropdown">
<li class="has-submenu">
Item
<ul class="vertical submenu" data-submenu>
<li role="menuitem">Sub-Item</li>
<li role="menuitem">Sub-Item</li>
<li role="menuitem">Sub-Item</li>
<li role="menuitem">Sub-Item</li>
</ul>
</li>
<li class="">Item</li>
<li class="">Item</li>
<li class="">Item</li>
<li class="">Item</li>
</ul>
</div>
</div>
</div>
Not entirely sure about the vertical menu issue as the pen works fine for me. Regarding the errant bullet points, you are missing some essential classes. For the site title, you're using an li without the surrounding ul element. Add a ul with a class of menu around the title to fix that problem:
<ul class="menu">
<li class="menu-text">Site Title</li>
</ul>
The same menu class is missing for the sub menu:
<ul class="vertical submenu menu" data-submenu>
<li role="menuitem">Sub-Item</li>
<li role="menuitem">Sub-Item</li>
<li role="menuitem">Sub-Item</li>
<li role="menuitem">Sub-Item</li>
</ul>
Here's an updated Pen