How to modify nav-pills to limit the number of pages to display
Question
I am trying to implement a pagination system using nav-pills . Since these nav-pills are created dynamically, there will be times when there are only 1, and others when there are 100 (or more).
I am using bootstrap 4 & Django
The visual impact is tremendous when there are a large number of nav-pills .
Attached photo to give you an idea:
The code:
<ul class="nav nav-pills" id="evidence-formset-tab" role="tablist">
{% for evidence_form in evidence_formset %}
{% with index=forloop.counter|stringformat:'s' %}
{% with id='evidence-form-'|add:index|add:'-tab' href='#evidence-form-'|add:index aria_controls='evidence-form-'|add:index %}
<li class="nav-item">
{% if not current_tab and forloop.first or current_tab == index %}
<a class="nav-link active" id="{{ id }}" data-toggle="pill" href="{{ href }}" role="tab" aria-controls="{{ aria_controls }}" aria-selected="true">{{ forloop.counter }}</a>
{% else %}
<a class="nav-link" id="{{ id }}" data-toggle="pill" href="{{ href }}" role="tab" aria-controls="{{ aria_controls }}" aria-selected="false">{{ forloop.counter }}</a>
{% endif %}
</li>
{% endwith %}
{% endwith %}
{% endfor %}
</ul>
I would like to get a result similar to the following:
Previous 1 2 3 4 5 Next
That is, if the user clicks next, the following 5 pills will load:
Previous 6 7 8 9 10 Next
And if the user clicks on Previous we will go back to the previous 5 pills:
Previous 1 2 3 4 5 Next
What would be the best way to achieve this result? Is there a predefined solution for bootstrap?
UPDATE with what I've tried (2021/07/07):
views.py
paginator = Paginator(SomeFormSet, 1)
try:
forms = paginator.page(1)
except PageNotAnInteger:
forms = paginator.page(1)
except EmptyPage:
forms = paginator.page(paginator.num_pages)
context['forms'] = forms
index.html :
{% for form in forms %}
{% if forms.has_other_pages %}
<ul class="nav nav-pills" id="evidence-formset-tab" role="tablist">
{% if forms.has_previous %}
<li><a class="nav-link active" id="evidence-form-{{ forms.previous_page_number }}-tab" data-toggle="pill" href="#evidence-form-{{ forms.previous_page_number }}" role="tab" aria-controls="{{ aria_controls }}" aria-selected="true">«</a></li>
{% else %}
<li class="disabled"><span>«</span></li>
{% endif %}
{% for i in forms.paginator.page_range %}
<li class="nav-item">
{% if forms.number == i %}
<a class="nav-link active" id="evidence-form-{{ i }}-tab" data-toggle="pill" href="#evidence-form-{{ i }}" role="tab" aria-controls="{{ aria_controls }}" aria-selected="true">{{ i }}</a>
{% elif i > forms.number|add:'-5' and i < forms.number|add:'5' %}
<a class="nav-link" id="evidence-form-{{ i }}-tab" data-toggle="pill" href="#evidence-form-{{ i }}" role="tab" aria-controls="{{ aria_controls }}" aria-selected="false">{{ i }}</a>
{% endif %}
</li>
{% endfor %}
{% if forms.has_next %}
<li><a class="nav-link" id="evidence-form-{{ forms.next_page_number }}-tab" data-toggle="pill" href="#evidence-form-{{ forms.next_page_number }}">»</a></li>
{% else %}
<li class="disabled"><span>»</span></li>
{% endif %}
</ul>
{% endif %}
{% endfor %}
Update 2021/07/08:
Each page correspond to a tab-pane with an id following this pattern: evidence-form- as you can see in my prev code. That is why I can't use ?page={{ page }} at all (or yes, but somehow I have to link ?page={{ page }} with a specific formset and I don't know how).
3 answers
solution1
1 2021-07-05 18:01:16
Edit 08.07.2021 - reformatted and redefined answer:
Since my original answer did not match your question here some other code:
Django View:
def testing_view(request):
# 500 Items in Array (Your FormSet)
objects = [('foobar_0', 0), ('foobar_1', 1), ('foobar_2', 2), ('foobar_3', 3), ('foobar_4', 4), ('foobar_5', 5),
('foobar_6', 6), ('foobar_7', 7), ('foobar_8', 8), ('foobar_9', 9), ('foobar_10', 10), ('foobar_11', 11),
('foobar_12', 12), ('foobar_13', 13), ('foobar_14', 14), ('foobar_15', 15), ('foobar_16', 16),
('foobar_17', 17), ('foobar_18', 18), ('foobar_19', 19), ('foobar_20', 20), ('foobar_21', 21),
('foobar_22', 22), ('foobar_23', 23), ('foobar_24', 24), ('foobar_25', 25), ('foobar_26', 26),
('foobar_27', 27), ('foobar_28', 28), ('foobar_29', 29), ('foobar_30', 30), ('foobar_31', 31),
('foobar_32', 32), ('foobar_33', 33), ('foobar_34', 34), ('foobar_35', 35), ('foobar_36', 36),
('foobar_37', 37), ('foobar_38', 38), ('foobar_39', 39), ('foobar_40', 40), ('foobar_41', 41),
('foobar_42', 42), ('foobar_43', 43), ('foobar_44', 44), ('foobar_45', 45), ('foobar_46', 46),
('foobar_47', 47), ('foobar_48', 48), ('foobar_49', 49), ('foobar_50', 50), ('foobar_51', 51),
('foobar_52', 52), ('foobar_53', 53), ('foobar_54', 54), ('foobar_55', 55), ('foobar_56', 56),
('foobar_57', 57), ('foobar_58', 58), ('foobar_59', 59), ('foobar_60', 60), ('foobar_61', 61),
('foobar_62', 62), ('foobar_63', 63), ('foobar_64', 64), ('foobar_65', 65), ('foobar_66', 66),
('foobar_67', 67), ('foobar_68', 68), ('foobar_69', 69), ('foobar_70', 70), ('foobar_71', 71),
('foobar_72', 72), ('foobar_73', 73), ('foobar_74', 74), ('foobar_75', 75), ('foobar_76', 76),
('foobar_77', 77), ('foobar_78', 78), ('foobar_79', 79), ('foobar_80', 80), ('foobar_81', 81),
('foobar_82', 82), ('foobar_83', 83), ('foobar_84', 84), ('foobar_85', 85), ('foobar_86', 86),
('foobar_87', 87), ('foobar_88', 88), ('foobar_89', 89), ('foobar_90', 90), ('foobar_91', 91),
('foobar_92', 92), ('foobar_93', 93), ('foobar_94', 94), ('foobar_95', 95), ('foobar_96', 96),
('foobar_97', 97), ('foobar_98', 98), ('foobar_99', 99), ('foobar_100', 100), ('foobar_101', 101),
('foobar_102', 102), ('foobar_103', 103), ('foobar_104', 104), ('foobar_105', 105), ('foobar_106', 106),
('foobar_107', 107), ('foobar_108', 108), ('foobar_109', 109), ('foobar_110', 110), ('foobar_111', 111),
('foobar_112', 112), ('foobar_113', 113), ('foobar_114', 114), ('foobar_115', 115), ('foobar_116', 116),
('foobar_117', 117), ('foobar_118', 118), ('foobar_119', 119), ('foobar_120', 120), ('foobar_121', 121),
('foobar_122', 122), ('foobar_123', 123), ('foobar_124', 124), ('foobar_125', 125), ('foobar_126', 126),
('foobar_127', 127), ('foobar_128', 128), ('foobar_129', 129), ('foobar_130', 130), ('foobar_131', 131),
('foobar_132', 132), ('foobar_133', 133), ('foobar_134', 134), ('foobar_135', 135), ('foobar_136', 136),
('foobar_137', 137), ('foobar_138', 138), ('foobar_139', 139), ('foobar_140', 140), ('foobar_141', 141),
('foobar_142', 142), ('foobar_143', 143), ('foobar_144', 144), ('foobar_145', 145), ('foobar_146', 146),
('foobar_147', 147), ('foobar_148', 148), ('foobar_149', 149), ('foobar_150', 150), ('foobar_151', 151),
('foobar_152', 152), ('foobar_153', 153), ('foobar_154', 154), ('foobar_155', 155), ('foobar_156', 156),
('foobar_157', 157), ('foobar_158', 158), ('foobar_159', 159), ('foobar_160', 160), ('foobar_161', 161),
('foobar_162', 162), ('foobar_163', 163), ('foobar_164', 164), ('foobar_165', 165), ('foobar_166', 166),
('foobar_167', 167), ('foobar_168', 168), ('foobar_169', 169), ('foobar_170', 170), ('foobar_171', 171),
('foobar_172', 172), ('foobar_173', 173), ('foobar_174', 174), ('foobar_175', 175), ('foobar_176', 176),
('foobar_177', 177), ('foobar_178', 178), ('foobar_179', 179), ('foobar_180', 180), ('foobar_181', 181),
('foobar_182', 182), ('foobar_183', 183), ('foobar_184', 184), ('foobar_185', 185), ('foobar_186', 186),
('foobar_187', 187), ('foobar_188', 188), ('foobar_189', 189), ('foobar_190', 190), ('foobar_191', 191),
('foobar_192', 192), ('foobar_193', 193), ('foobar_194', 194), ('foobar_195', 195), ('foobar_196', 196),
('foobar_197', 197), ('foobar_198', 198), ('foobar_199', 199), ('foobar_200', 200), ('foobar_201', 201),
('foobar_202', 202), ('foobar_203', 203), ('foobar_204', 204), ('foobar_205', 205), ('foobar_206', 206),
('foobar_207', 207), ('foobar_208', 208), ('foobar_209', 209), ('foobar_210', 210), ('foobar_211', 211),
('foobar_212', 212), ('foobar_213', 213), ('foobar_214', 214), ('foobar_215', 215), ('foobar_216', 216),
('foobar_217', 217), ('foobar_218', 218), ('foobar_219', 219), ('foobar_220', 220), ('foobar_221', 221),
('foobar_222', 222), ('foobar_223', 223), ('foobar_224', 224), ('foobar_225', 225), ('foobar_226', 226),
('foobar_227', 227), ('foobar_228', 228), ('foobar_229', 229), ('foobar_230', 230), ('foobar_231', 231),
('foobar_232', 232), ('foobar_233', 233), ('foobar_234', 234), ('foobar_235', 235), ('foobar_236', 236),
('foobar_237', 237), ('foobar_238', 238), ('foobar_239', 239), ('foobar_240', 240), ('foobar_241', 241),
('foobar_242', 242), ('foobar_243', 243), ('foobar_244', 244), ('foobar_245', 245), ('foobar_246', 246),
('foobar_247', 247), ('foobar_248', 248), ('foobar_249', 249), ('foobar_250', 250), ('foobar_251', 251),
('foobar_252', 252), ('foobar_253', 253), ('foobar_254', 254), ('foobar_255', 255), ('foobar_256', 256),
('foobar_257', 257), ('foobar_258', 258), ('foobar_259', 259), ('foobar_260', 260), ('foobar_261', 261),
('foobar_262', 262), ('foobar_263', 263), ('foobar_264', 264), ('foobar_265', 265), ('foobar_266', 266),
('foobar_267', 267), ('foobar_268', 268), ('foobar_269', 269), ('foobar_270', 270), ('foobar_271', 271),
('foobar_272', 272), ('foobar_273', 273), ('foobar_274', 274), ('foobar_275', 275), ('foobar_276', 276),
('foobar_277', 277), ('foobar_278', 278), ('foobar_279', 279), ('foobar_280', 280), ('foobar_281', 281),
('foobar_282', 282), ('foobar_283', 283), ('foobar_284', 284), ('foobar_285', 285), ('foobar_286', 286),
('foobar_287', 287), ('foobar_288', 288), ('foobar_289', 289), ('foobar_290', 290), ('foobar_291', 291),
('foobar_292', 292), ('foobar_293', 293), ('foobar_294', 294), ('foobar_295', 295), ('foobar_296', 296),
('foobar_297', 297), ('foobar_298', 298), ('foobar_299', 299), ('foobar_300', 300), ('foobar_301', 301),
('foobar_302', 302), ('foobar_303', 303), ('foobar_304', 304), ('foobar_305', 305), ('foobar_306', 306),
('foobar_307', 307), ('foobar_308', 308), ('foobar_309', 309), ('foobar_310', 310), ('foobar_311', 311),
('foobar_312', 312), ('foobar_313', 313), ('foobar_314', 314), ('foobar_315', 315), ('foobar_316', 316),
('foobar_317', 317), ('foobar_318', 318), ('foobar_319', 319), ('foobar_320', 320), ('foobar_321', 321),
('foobar_322', 322), ('foobar_323', 323), ('foobar_324', 324), ('foobar_325', 325), ('foobar_326', 326),
('foobar_327', 327), ('foobar_328', 328), ('foobar_329', 329), ('foobar_330', 330), ('foobar_331', 331),
('foobar_332', 332), ('foobar_333', 333), ('foobar_334', 334), ('foobar_335', 335), ('foobar_336', 336),
('foobar_337', 337), ('foobar_338', 338), ('foobar_339', 339), ('foobar_340', 340), ('foobar_341', 341),
('foobar_342', 342), ('foobar_343', 343), ('foobar_344', 344), ('foobar_345', 345), ('foobar_346', 346),
('foobar_347', 347), ('foobar_348', 348), ('foobar_349', 349), ('foobar_350', 350), ('foobar_351', 351),
('foobar_352', 352), ('foobar_353', 353), ('foobar_354', 354), ('foobar_355', 355), ('foobar_356', 356),
('foobar_357', 357), ('foobar_358', 358), ('foobar_359', 359), ('foobar_360', 360), ('foobar_361', 361),
('foobar_362', 362), ('foobar_363', 363), ('foobar_364', 364), ('foobar_365', 365), ('foobar_366', 366),
('foobar_367', 367), ('foobar_368', 368), ('foobar_369', 369), ('foobar_370', 370), ('foobar_371', 371),
('foobar_372', 372), ('foobar_373', 373), ('foobar_374', 374), ('foobar_375', 375), ('foobar_376', 376),
('foobar_377', 377), ('foobar_378', 378), ('foobar_379', 379), ('foobar_380', 380), ('foobar_381', 381),
('foobar_382', 382), ('foobar_383', 383), ('foobar_384', 384), ('foobar_385', 385), ('foobar_386', 386),
('foobar_387', 387), ('foobar_388', 388), ('foobar_389', 389), ('foobar_390', 390), ('foobar_391', 391),
('foobar_392', 392), ('foobar_393', 393), ('foobar_394', 394), ('foobar_395', 395), ('foobar_396', 396),
('foobar_397', 397), ('foobar_398', 398), ('foobar_399', 399), ('foobar_400', 400), ('foobar_401', 401),
('foobar_402', 402), ('foobar_403', 403), ('foobar_404', 404), ('foobar_405', 405), ('foobar_406', 406),
('foobar_407', 407), ('foobar_408', 408), ('foobar_409', 409), ('foobar_410', 410), ('foobar_411', 411),
('foobar_412', 412), ('foobar_413', 413), ('foobar_414', 414), ('foobar_415', 415), ('foobar_416', 416),
('foobar_417', 417), ('foobar_418', 418), ('foobar_419', 419), ('foobar_420', 420), ('foobar_421', 421),
('foobar_422', 422), ('foobar_423', 423), ('foobar_424', 424), ('foobar_425', 425), ('foobar_426', 426),
('foobar_427', 427), ('foobar_428', 428), ('foobar_429', 429), ('foobar_430', 430), ('foobar_431', 431),
('foobar_432', 432), ('foobar_433', 433), ('foobar_434', 434), ('foobar_435', 435), ('foobar_436', 436),
('foobar_437', 437), ('foobar_438', 438), ('foobar_439', 439), ('foobar_440', 440), ('foobar_441', 441),
('foobar_442', 442), ('foobar_443', 443), ('foobar_444', 444), ('foobar_445', 445), ('foobar_446', 446),
('foobar_447', 447), ('foobar_448', 448), ('foobar_449', 449), ('foobar_450', 450), ('foobar_451', 451),
('foobar_452', 452), ('foobar_453', 453), ('foobar_454', 454), ('foobar_455', 455), ('foobar_456', 456),
('foobar_457', 457), ('foobar_458', 458), ('foobar_459', 459), ('foobar_460', 460), ('foobar_461', 461),
('foobar_462', 462), ('foobar_463', 463), ('foobar_464', 464), ('foobar_465', 465), ('foobar_466', 466),
('foobar_467', 467), ('foobar_468', 468), ('foobar_469', 469), ('foobar_470', 470), ('foobar_471', 471),
('foobar_472', 472), ('foobar_473', 473), ('foobar_474', 474), ('foobar_475', 475), ('foobar_476', 476),
('foobar_477', 477), ('foobar_478', 478), ('foobar_479', 479), ('foobar_480', 480), ('foobar_481', 481),
('foobar_482', 482), ('foobar_483', 483), ('foobar_484', 484), ('foobar_485', 485), ('foobar_486', 486),
('foobar_487', 487), ('foobar_488', 488), ('foobar_489', 489), ('foobar_490', 490), ('foobar_491', 491),
('foobar_492', 492), ('foobar_493', 493), ('foobar_494', 494), ('foobar_495', 495), ('foobar_496', 496),
('foobar_497', 497), ('foobar_498', 498), ('foobar_499', 499)]
return render(request, "testing.html", context={"total_elements": len(objects), "qs": objects})
All the pagination of your tab panel is done within js/html
HTML
<div class="row">
<div class="col-12">
<div class="card-header">
<ul class="nav nav-pills" id="evidence-formset-tab" role="tablist">
</ul>
</div>
<div class="card">
<div class="tab-content" id=evidence-formset-tabContent">
{% for q in qs %}
<div class="tab-pane {% if forloop.first %}active{% endif %}" id="tab-{{ q.1 }}"
role="tabpanel">{{ q.0 }}</div>
{% endfor %}
</div>
</div>
</div>
</div>
Here we just generate an empty nav list with an id and all your pannel divs with your formset content to display.
function generate_page_array(page_number, nav_pills_range) {
let start = 0
if ((page_number % nav_pills_range) == 0) {
start = Math.floor((page_number - 1) / nav_pills_range) * nav_pills_range
} else {
start = Math.floor(page_number / nav_pills_range) * nav_pills_range
}
let end = nav_pills_range + start + 1
let temp = []
for (let i = start + 1; i < end; ++i) {
temp.push(i)
}
return temp
}
function generate_pagination(page) {
const max_entries = {{ total_elements|safe }};
const menu = document.querySelector("#evidence-formset-tab")
menu.innerHTML = ''
const tmp_array = generate_page_array(page, 5);
const prev = page > 5
const next = page <= max_entries - 5
if (prev) {
menu.insertAdjacentHTML('beforeend', `
<li class="nav-item">
<a onclick="generate_pagination(${page - 5})" class="nav-link">Prev</a>
</li>`)
}
tmp_array.forEach((e)=>{
menu.insertAdjacentHTML('beforeend', `
<li class="nav-item">
<a href="#tab-${e}" class="nav-link" data-toggle="tab">${e}</a>
</li>`)
})
if (next) {
menu.insertAdjacentHTML('beforeend', `
<li class="nav-item">
<a onclick="generate_pagination(${page + 5})" class="nav-link">Next</a>
</li>`)
}
console.log(prev, tmp_array, next)
}
window.onload = function () {
generate_pagination(1);
}
The javascript which generates your nav-pills according do your description.
Initial Call:
Looks like this if you click on any number
After clicking next:
After clicking any nav pill in the future:
solution2
1 2021-07-08 19:45:48
I don't think you'll need to use a lot of Javascript to configure this.
Why don't you send a URL GET Parameter for the current page and then calculate the number of pages you need to send next.
You can probably do something like this:
paginator = Paginator(SomeFormSet, 1)
try:
page = int(request.GET.get('page', 1))
except:
page = 1
try:
forms = paginator.page(page)
except PageNotAnInteger:
forms = paginator.page(1)
except EmptyPage:
forms = paginator.page(paginator.num_pages)
current_page = forms.number - 1
max_pages = len(paginator.page_range)
number_of_pages_to_display = 5
start_page_new = current_page - number_of_pages_to_display if current_page >= number_of_pages_to_display else 0
end_page_new = current_page + number_of_pages_to_display if current_page <= max_pages - number_of_pages_to_display else max_pages
page_range = list(paginator.page_range)[start_page_new:end_page_new]
context['forms'] = forms
return render(request, 'example.html', {
'forms': forms,
'page_range': page_range,
})
Or for a shorted solution, you can also the current forloop.counter with a certain range:
{% page_obj.has_previous %}
<a class="page-link" href="?page=1" aria-label="Previous">
{% endif %}
{% for n in page_obj.paginator.page_range %}
{% if page_obj.number == n %}
ACTIVE TAB HERE
{% elif n > page_obj.number|add:'-5' and n < page_obj.number|add:'5' %}
ONLY 5 ITEMS DISPLAYED
{% endif %}
{% endfor %}
{% if page_obj.has_next %}
page next link
{% endif %}
solution3
1 ACCPTED 2021-07-09 06:22:00
Finally I found a solution:
javascript part:
function nextPages(){
var maxPages = "{{evidence_formset|length}}";
const container = document.querySelector("#evidence-formset-tab");
const matches = container.querySelectorAll("li > a");
var nextPagesArray = [];
var htmlstring = "";
var nextButton = "<button type='button' class='btn btn-link' onclick='nextPages()'>Next</button>";
var prevButton = "<button type='button' class='btn btn-link' onclick='prevPages()'>Previous</button>";
for (var i = 0; i < matches.length; i++) {
nextPagesArray.push(parseInt(matches[i].textContent)+5);
}
for (let i = 0; i < nextPagesArray.length; i++) {
if (nextPagesArray[i] <= maxPages) {
htmlstring += "<li class='nav-item'><a class='nav-link' id='evidence-form-'"+nextPagesArray[i]+" data-toggle='pill' href='#evidence-form-"+nextPagesArray[i]+"' role='tab' aria-controls='evidence-form-"+nextPagesArray[i]+"' aria-selected='false'>"+nextPagesArray[i]+" </a></li>";
}
}
if (htmlstring != "") {
htmlstring = prevButton + htmlstring + nextButton;
document.getElementById("evidence-formset-tab").innerHTML = htmlstring;
}
}
function prevPages(){
var minPage = 1;
var maxPages = parseInt("{{evidence_formset|length}}");
const container = document.querySelector("#evidence-formset-tab");
const matches = container.querySelectorAll("li > a");
var prevPagesArray = [];
var pageSubSets = [];
var htmlstring = "";
var nextButton = "<button type='button' class='btn btn-link' onclick='nextPages()'>Next</button>";
var prevButton = "<button type='button' class='btn btn-link' onclick='prevPages()'>Previous</button>";
var arrayPages = [];
for (var i = minPage; i <= maxPages; i++) {
arrayPages.push(i);
}
var i,j, chunk = 5;
for (i = 0,j = arrayPages.length; i < j; i += chunk) {
pageSubSets.push(arrayPages.slice(i, i + chunk));
}
for (var k = 0; k < matches.length; k++) {
if(pageSubSets[pageSubSets.length-1].includes(parseInt(matches[k].textContent))){
prevPagesArray = pageSubSets[pageSubSets.length-2];
break;
}
else {
prevPagesArray.push(parseInt(matches[k].textContent)-5);
}
}
html part:
<ul class="nav nav-pills" id="evidence-formset-tab" role="tablist">
<button type="button" class="btn btn-link" onclick="prevPages()">Previous</button>
{% for evidence_form in evidence_formset %}
{% with index=forloop.counter|stringformat:'s' %}
{% with id='evidence-form-'|add:index|add:'-tab' href='#evidence-form-'|add:index aria_controls='evidence-form-'|add:index %}
{% if forloop.counter < 6 %}
<li class="nav-item">
{% if not current_tab and forloop.first or current_tab == index %}
<a class="nav-link active" id="{{ id }}" data-toggle="pill" href="{{ href }}" role="tab" aria-controls="{{ aria_controls }}" aria-selected="true">{{ forloop.counter }}</a>
{% else %}
<a class="nav-link" id="{{ id }}" data-toggle="pill" href="{{ href }}" role="tab" aria-controls="{{ aria_controls }}" aria-selected="false">{{ forloop.counter }}</a>
{% endif %}
</li>
{% endif %}
{% endwith %}
{% endwith %}
{% endfor %}
<button type="button" class="btn btn-link" onclick="nextPages()">Next</button>
</ul>
In the end the solution was purely with javascript, it was not necessary to use django's pagination module.
I'm sure it can be optimized, but for now it works and that's what matters.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
nav-pills is not working
How to make bootstrap nav-pills close on click?
Heuristic nav-pills in bootstrap 3 does not work
Bootstrap 3 : nested .nav-pills trouble
custom Bootstrap 3 nav-pills not work
making bootstrap vertical nav-pills automatical
How to make menu, navbar nav-pills nav-stacked collapse Twitter-bootstrap 3.0
How to filter Portfolio grid with nav nav-pills in twitter bootstrap3 with jquery
Bootstrap add nav and nav-pills to my dropdown
jQuery Isotope and Twitter Bootstraps nav nav-pills
Related Tags