How to remove bottom border from bootstrap accordion - html

I've looked at many examples on how to do this, but can't find one.
My code:
<!--html-->
<div id="navgroupsframe">
<div class="panel-group" id="accordion">
<div class="panel" style="margin-left: -15px;">
<div class="panel-heading">
<div class="vgroupholder panel-title" data-parent="#accordion" data-toggle="collapse" href=".titleSpanish" onclick="removevBgs();" style="background-color: transparent;" aria-expanded="true">
<div class="groupicon">
<div class="groupicontext">S</div>
</div>
<div class="grouptext">
<div class="grouptitle">Spanish</div>
</div>
</div>
</div>
</div>
<div class="panel-collapse titleSpanish collapse in" aria-expanded="true" style="">
<div class="panel-body">
<div class="panel-group" id="accordion">
<div class="vgroupholder panel-body" data-parent="#titleSpanish" data-toggle="collapse" style="background-color: transparent;">
<div class="groupicon" style="width: 80px;height: 80px;margin-left: 20px;">
<div class="groupicontext" style="font-size: 40px;">C1</div>
</div>
<div class="grouptext">
<div class="grouptitle">Class 1</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel-collapse titleSpanish collapse in" aria-expanded="true" style="">
<div class="panel-body">
<div class="panel-group" id="accordion">
<div class="vgroupholder panel-body" data-parent="#titleSpanish" data-toggle="collapse" style="background-color: transparent;">
<div class="groupicon" style="width: 80px;height: 80px;margin-left: 20px;">
<div class="groupicontext" style="font-size: 40px;">C2</div>
</div>
<div class="grouptext">
<div class="grouptitle">Class 2</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel-group" id="accordion">
<div class="panel" style="margin-left: -15px;">
<div class="panel-heading">
<div class="vgroupholder panel-title" data-parent="#accordion" data-toggle="collapse" href=".titlePhysics" onclick="removevBgs();" style="background-color: transparent;">
<div class="groupicon">
<div class="groupicontext">P</div>
</div>
<div class="grouptext">
<div class="grouptitle">Physics</div>
</div>
</div>
</div>
</div>
<div class="panel-collapse titlePhysics collapse" aria-expanded="false" style="height: 0px;">
<div class="panel-body">
<div class="panel-group" id="accordion">
<div class="vgroupholder panel-body" data-parent="#titlePhysics" data-toggle="collapse" style="background-color: transparent;">
<div class="groupicon" style="width: 80px;height: 80px;margin-left: 20px;">
<div class="groupicontext" style="font-size: 40px;">S1</div>
</div>
<div class="grouptext">
<div class="grouptitle">Set 1</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel-collapse titlePhysics collapse" aria-expanded="false" style="height: 0px;">
<div class="panel-body">
<div class="panel-group" id="accordion">
<div class="vgroupholder panel-body" data-parent="#titlePhysics" data-toggle="collapse" style="background-color: transparent;">
<div class="groupicon" style="width: 80px;height: 80px;margin-left: 20px;">
<div class="groupicontext" style="font-size: 40px;">S2</div>
</div>
<div class="grouptext">
<div class="grouptitle">Set 2</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I've tried using this:
.panel-group .panel-heading + .panel-collapse > .panel-body {
border-bottom: none;
}
But it doesn't work. All borders however are gone, apart from the bottom one.
How would I be able to fix this?
Also
How do I add negative margin-tops without causing the accordion to jump?
Any help would be really appreciated!

Related

A button which contain a description will be hidden inside mobile view

I am working on an asp.net core MVC >> inside y view i am showing a FAQ section. as follow:-
<div class="container">
<div class="row ">
<div class="col-xl-2 mx-auto d-none d-sm-block">
<div class="service_details_left">
<div class="nav nav-pills" id="v-pills-tab" role="tablist"
aria-orientation="vertical">
</div>
</div>
</div>
<div class="accordion_area col-xl-8">
<div class="faq_ask">
<h3 class="large-heading-3">Frequently Asked Questions</h3>
<div id="accordion">
#foreach (var item2 in Model.OrderBy(a => a.Order))
{
<div class="card">
<div class="card-header" id="#item2.Id+'headingTwoa'">
<h5 class="mb-0">
<button class="btn btn-link collapsed " data-toggle="collapse"
data-target="##item2.Id" aria-expanded="false"
aria-controls="collapseTwo">
<span class="expandable-heading"> #Html.DisplayFor(modelItem => item2.Description)</span>
</button>
</h5>
</div>
<div id="#item2.Id" class="collapse" aria-labelledby="headingTwoa"
data-parent="#accordion" style="">
<div class="card-body">
#Html.Raw(item2.Answer)
</div>
</div>
</div>
}
</div>
</div>
</div>
<div class="col-xl-2">
</div>
</div>
</div>
but on wide screen the FAQ will be shown correctly, as follow:-
while on mobile view the question's description will be hidden as follow!!
any advice on this please?

You can try this snippet.
<div class="container">
<div class="row ">
<div class="col-xl-2 mx-auto d-none d-sm-block">
<div class="service_details_left">
<div class="nav nav-pills" id="v-pills-tab" role="tablist"
aria-orientation="vertical">
</div>
</div>
</div>
<div class="accordion_area col-xl-8">
<div class="faq_ask">
<h3 class="large-heading-3">Frequently Asked Questions</h3>
<div id="accordion">
<div class="accordion" id="accordion">
#foreach (var item2 in Model.OrderBy(a => a.Order))
{
<!-- here -->
<div class="card">
<div class="card-header" id="headingTwoa_#item2.Id">
<h5 class="mb-0">
<button class="btn btn-link collapsed " data-toggle="collapse"
data-target="#collapse_#item2.Id" aria-expanded="true"
aria-controls="#item2.Id">
<span class="expandable-heading"> #Html.DisplayFor(modelItem => item2.Description)</span>
</button>
</h5>
</div>
<div id="collapse_#item2.Id" class="collapse" aria-labelledby="headingTwoa_#item2.Id"
data-parent="#accordion" >
<div class="card-body">
#Html.Raw(item2.Answer)
</div>
</div>
</div>
}
</div>
</div>
</div>
</div>
<div class="col-xl-2">
</div>
</div>
</div>
Note: id needs to start with a letter.

Why doesn't this Bootstrap collapse close others with one section open?

I've used standart Booststrap code and it used to work at the beginning, so once any section was open the other one which was open before was getting closed.
I've added some other collapses in it and made shure that all the ID's unique and it works fine except one small thing about the closing other sections when one open . Please help me to figure out
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel-default mainPFPanel">
<div class="mainPFPanelHeading" role="tab" id="headingMain1">
<h4 class="panel-title text-left">
<a role="button" data-toggle="collapse" data-parent="#accordion"
href="#collapseMain1" aria-expanded="true" aria-controls="collapseMain1">
ТОРТЫ
</a>
</h4>
</div>
<div id="collapseMain1" class="panel-collapse collapse in" role="tabpanel"
aria-labelledby="headingMain1">
<div class="panel-body mainPFPanelBody">
<div class="panel-group" id="accordionSub1" role="tablist" aria-multiselectable="true">
<div class="panel-default mainPFPanel">
<div class="subPFPanelHeading" role="tab" id="headingSub11">
<h4 class="panel-title text-left">
<a role="button" data-toggle="collapse" data-parent="#accordionSub1"
href="#collapseSub11" aria-expanded="true"
aria-controls="collapseCollapse11">
МУССОВЫЕ
</a>
</h4>
</div>
<div id="collapseSub11" class="panel-collapse collapse in" role="tabpanel"
aria-labelledby="headingSub11">
<div class="subPFBody">
<div class="list-group">
Роза-Малина-Личи
Манго-Маракуйя
Черника-Ваниль-Малинаc
Клубника-Брют "ROSE
Ривьера
Клюква-Малина
Black Bourbon
Шоколад-Малина
Фисташка-Малина (вишня)
Карамель-Шоколад
Ванильно-Сливочная Груша
</div>
</div>
</div>
</div>
<div class="panel-default mainPFPanel">
<div class="subPFPanelHeading" role="tab" id="headingSub12">
<h4 class="panel-title text-left">
<a class="collapsed" role="button" data-toggle="collapse"
data-parent="#accordionSub1" href="#collapseSub12"
aria-expanded="false" aria-controls="collapseSub12">
ЧИЗКЕЙКИ
</a>
</h4>
</div>
<div id="collapseSub12" class="panel-collapse collapse" role="tabpanel"
aria-labelledby="headingSub12">
<div class="subPFBody">
<div class="subPFBody">
<div class="list-group">
Классический
Карамельный
Ягодный
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel-default mainPFPanel">
<div class="mainPFPanelHeading" role="tab" id="headingMain2">
<h4 class="panel-title text-left">
<a class="collapsed" role="button" data-toggle="collapse"
data-parent="#accordionMain" href="#collapseMain2" aria-expanded="false"
aria-controls="collapseMain2">
ТАРТЫ
</a>
</h4>
</div>
<div id="collapseMain2" class="panel-collapse collapse" role="tabpanel"
aria-labelledby="headingMain2">
<div class="subPFBody">
<div class="list-group">
Ягодные
Лимонные
Фруктовые
</div>
</div>
</div>
</div>
<div class="panel-default mainPFPanel">
<div class="mainPFPanelHeading" role="tab" id="headingMain3">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionMain"
href="#collapseMain3" aria-expanded="false" aria-controls="collapseMain3">
ПОРЦИОННЫЕ ДЕСЕРТЫ
</a>
</h4>
</div>
<div id="collapseMain3" class="panel-collapse collapse" role="tabpanel"
aria-labelledby="headingMain3">
<div class="panel-body">
<div class="panel-default">
<div class="subPFPanelHeading" role="tab" id="headingSub31">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordionSub3"
href="#collapseSub31" aria-expanded="true"
aria-controls="collapseSub31">
МУССОВЫЕ
</a>
</h4>
</div>
<div id="collapseSub31" class="panel-collapse collapse in" role="tabpanel"
aria-labelledby="headingSub31">
<div class="subPFBody">
<div class="list-group">
Роза-Малина-Личи
Манго-Маракуйя
Черника-Ваниль-Малинаc
Клубника-Брют "ROSE
Ривьера
Клюква-Малина
Black Bourbon
Шоколад-Малина
Фисташка-Малина (вишня)
Карамель-Шоколад
Ванильно-Сливочная Груша
</div>
</div>
</div>
</div>
<div class="panel-default">
<div class="subPFPanelHeading" role="tab" id="headingSub32">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse"
data-parent="#accordionSub3" href="#collapseSub32" aria-expanded="false"
aria-controls="collapseSub32">
КЕЙКПОПСЫ
</a>
</h4>
</div>
<div id="collapseSub32" class="panel-collapse collapse" role="tabpanel"
aria-labelledby="headingSub32">
<div class="subPFBody">
<div class="list-group">
Шоколад-Карамель
Бана-Малина
С Лимонным Курдом
</div>
</div>
</div>
</div>
<div class="panel-default">
<div class="subPFPanelHeading" role="tab" id="headingSub33">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse"
data-parent="#accordionSub3" href="#collapseSub33" aria-expanded="false"
aria-controls="collapseSub33">
КАПКЕЙКИ
</a>
</h4>
</div>
<div id="collapseSub33" class="panel-collapse collapse" role="tabpanel"
aria-labelledby="headingSub33">
<div class="subPFBody">
<div class="list-group">
Шоколад-Карамель
Бана-Малина
С Лимонным Курдом
</div>
</div>
</div>
</div>
<div class="panel-default">
<div class="subPFPanelHeading" role="tab" id="headingSub34">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse"
data-parent="#accordionSub3" href="#collapseSub34" aria-expanded="false"
aria-controls="collapseSub34">
ТАРТАЛЕТКИ
</a>
</h4>
</div>
<div id="collapseSub34" class="panel-collapse collapse" role="tabpanel"
aria-labelledby="headingSub34">
<div class="subPFBody">
<div class="list-group">
Ягодные
Лимонные
Фруктовые
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

It is important to have the correct data-parent attribute for proper control on the accordion, data-target needs to set correctly.
This should work:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">ТОРТЫ</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">
<div class="container">
<div class="panel-group" id="accordionSub">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordionSub" href="#collapse11">МУССОВЫЕ</a>
</h4>
</div>
<div id="collapse11" class="panel-collapse collapse in">
<div class="panel-body">
<div class="list-group">
Роза-Малина-Личи
Манго-Маракуйя
Черника-Ваниль-Малинаc
Клубника-Брют "ROSE
Ривьера
Клюква-Малина
Black Bourbon
Шоколад-Малина
Фисташка-Малина (вишня)
Карамель-Шоколад
Ванильно-Сливочная Груша
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordionSub" href="#collapse21">ЧИЗКЕЙКИ</a>
</h4>
</div>
<div id="collapse21" class="panel-collapse collapse">
<div class="panel-body"><div class="list-group">
Классический
Карамельный
Ягодный
</div></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2"> ТАРТЫ </a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body"><div class="list-group">
Ягодные
Лимонные
Фруктовые
</div></div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">ПОРЦИОННЫЕ ДЕСЕРТЫ</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">
<div class="panel-group" id="accordionSub2">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordionSub2" href="#collapse12">
МУССОВЫЕ </a>
</h4>
</div>
<div id="collapse12" class="panel-collapse collapse in">
<div class="panel-body"><div class="list-group">
Роза-Малина-Личи
Манго-Маракуйя
Черника-Ваниль-Малинаc
Клубника-Брют "ROSE
Ривьера
Клюква-Малина
Black Bourbon
Шоколад-Малина
Фисташка-Малина (вишня)
Карамель-Шоколад
Ванильно-Сливочная Груша
</div></div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordionSub2" href="#collapse22">
КЕЙКПОПСЫ </a>
</h4>
</div>
<div id="collapse22" class="panel-collapse collapse">
<div class="panel-body"><div class="list-group">
Шоколад-Карамель
Бана-Малина
С Лимонным Курдом
</div></div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordionSub2" href="#collapse32">
КАПКЕЙКИ</a>
</h4>
</div>
<div id="collapse32" class="panel-collapse collapse">
<div class="panel-body"><div class="list-group">
Шоколад-Карамель
Бана-Малина
С Лимонным Курдом
</div></div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordionSub2" href="#collapse42">
ТАРТАЛЕТКИ </a>
</h4>
</div>
<div id="collapse42" class="panel-collapse collapse">
<div class="panel-body"><div class="list-group">
Ягодные
Лимонные
Фруктовые
</div></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

Inserting an image into Bootstrap according is breaking collapse function

I am attempting to insert an image into a bootstrap accordion and when I do it makes that section (second accordian section) of the accordion remain open - where it should be collapsed initially allowing for someone to click on it to expand it.
Not sure what it is breaking in the code that is causing this.
Here is a link to code in JSfiddle: https://jsfiddle.net/penrysh/1fLfx04m/3/#&togetherjs=dJTKolqwum
<p><strong>Complete the sections below to upload content.</strong></p>
<div class="container" style="width: 90%;">
<div id="accordionCO0137098" class="panel-group" style="width: 90%;">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">Access System</h4>
</div>
<div id="collapseCO0137098_0" class="panel-collapse collapse">
<div class="panel-body"><ol>
<li>Click the <strong>User Name </strong>field</li>
<li>Type your ID</li>
<li>Click the <strong>Password </strong>field</li>
<li>Type your password</li>
<li>Click the <strong>Log In </strong>button</li>
</ol></div>
</div>
</div>
<div class="panel-heading">
<h4 class="panel-title">Add a New Content</h4>
</div>
<div class="panel-body"><ol>
<li>Click the <strong>Content </strong>tab at the top left of the screen<br /><a class="largeimage img-view" href="images/content.png" target="_blank"><img style="width: 248px; height: 71px;" src="images/content.png" alt="" width="225" height="56" border="0" /></a></li>
<li></li>
</ol></div>
<div class="panel-heading">
<h4 class="panel-title">Complete the Required Fields</h4>
</div>
<div id="collapseCO0137098_2" class="panel-collapse collapse">
<div class="panel-body">
<p>Note: You may type a note here.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">Upload the Content</h4>
</div>
<div id="collapseCO0137098_3" class="panel-collapse collapse">
<div class="panel-body">
<p>Note: You may type a note here.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">Tag the Content</h4>
</div>
<div id="collapseCO0137098_4" class="panel-collapse collapse">
<div class="panel-body">
<p>Note: You may type a note here.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">Add Any Relevant Keywords</h4>
</div>
<div id="collapseCO0137098_5" class="panel-collapse collapse">
<div class="panel-body">
<p>Note: You may type a note here.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">Add Folders</h4>
</div>
<div id="collapseCO0137098_6" class="panel-collapse collapse">
<div class="panel-body">
<p>Note: You may type a note here.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">Add Any Relevant Search</h4>
</div>
<div id="collapseCO0137098_7" class="panel-collapse collapse">
<div class="panel-body">
<p>Note: You may type a note here.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">Add Any Relevant Related Content</h4>
</div>
<div id="collapseCO0137098_8" class="panel-collapse collapse">
<div class="panel-body">
<p>Note: You may type a note here.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">Send For Review</h4>
</div>
<div id="collapseCO0137098_9" class="panel-collapse collapse">
<div class="panel-body">
<p>Note: You may type a note here.</p>
</div>
</div>
</div>
</div>
</div>

You messed up the libraries.
Moreover, after the "panel-tile" ... "Add a New Content Object" it's required the
<div id="collapseCO0137098_1" class="panel-collapse collapse">
And, before the
`<div class="panel-heading">`
it's required the
<div class="panel panel-default">
The new jsFiddle is available here.
The snippet:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<p><strong>Complete the sections below to upload content in the LT&I CMS.</strong></p>
<div class="container" style="width: 90%;">
<div id="accordionCO0137098" class="panel-group" style="width: 90%;">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a href="#collapseCO0137098_0" data-toggle="collapse"
data-parent="#accordionCO0137098">Access the CMS</a></h4>
</div>
<div id="collapseCO0137098_0" class="panel-collapse collapse">
<div class="panel-body">
<ol>
<li><a href="https://klcm.antheminc.com/aries/index.cfm?" target="_blank">Click this link to
access: https://klcm.antheminc.com/aries/index.cfm?</a></li>
<li>Click the <strong>User Name </strong>field</li>
<li>Type your US Domain ID</li>
<li>Click the <strong>Password </strong>field</li>
<li>Type your US Domain password</li>
<li>Click the <strong>Log In </strong>button</li>
</ol>
</div>
</div>
</div>
<!-- FIX: next line missing -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a href="#collapseCO0137098_1" data-toggle="collapse"
data-parent="#accordionCO0137098">Add a New Content Object</a></h4>
</div>
<!-- FIX: next line missing -->
<div id="collapseCO0137098_1" class="panel-collapse collapse">
<div class="panel-body">
<ol>
<li>Click the <strong>Content </strong>tab at the top left of the screen<br/><a
class="largeimage img-view" href="images/content.png" target="_blank"><img
style="width: 248px; height: 71px;" src="images/content.png" alt="" width="225"
height="56"
border="0"/></a></li>
<li></li>
</ol>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a href="#collapseCO0137098_2" data-toggle="collapse"
data-parent="#accordionCO0137098">Complete the Required Fields On the
Properties
Panel</a></h4>
</div>
<div id="collapseCO0137098_2" class="panel-collapse collapse">
<div class="panel-body">
<p>Note: You may type a note here.</p>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a href="#collapseCO0137098_3" data-toggle="collapse"
data-parent="#accordionCO0137098">Upload the Content on the Content Panel</a>
</h4>
</div>
<div id="collapseCO0137098_3" class="panel-collapse collapse">
<div class="panel-body">
<p>Note: You may type a note here.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a href="#collapseCO0137098_4" data-toggle="collapse"
data-parent="#accordionCO0137098">Tag the Content Items With All Applicable
Categories</a></h4>
</div>
<div id="collapseCO0137098_4" class="panel-collapse collapse">
<div class="panel-body">
<p>Note: You may type a note here.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a href="#collapseCO0137098_5" data-toggle="collapse"
data-parent="#accordionCO0137098">Add Any Relevant Keywords</a></h4>
</div>
<div id="collapseCO0137098_5" class="panel-collapse collapse">
<div class="panel-body">
<p>Note: You may type a note here.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a href="#collapseCO0137098_6" data-toggle="collapse"
data-parent="#accordionCO0137098">Add Folders to Content Item</a></h4>
</div>
<div id="collapseCO0137098_6" class="panel-collapse collapse">
<div class="panel-body">
<p>Note: You may type a note here.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a href="#collapseCO0137098_7" data-toggle="collapse"
data-parent="#accordionCO0137098">Add Any Relevant Search Collections</a></h4>
</div>
<div id="collapseCO0137098_7" class="panel-collapse collapse">
<div class="panel-body">
<p>Note: You may type a note here.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a href="#collapseCO0137098_8" data-toggle="collapse"
data-parent="#accordionCO0137098">Add Any Relevant Related Content</a></h4>
</div>
<div id="collapseCO0137098_8" class="panel-collapse collapse">
<div class="panel-body">
<p>Note: You may type a note here.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a href="#collapseCO0137098_9" data-toggle="collapse"
data-parent="#accordionCO0137098">Send For Review</a></h4>
</div>
<div id="collapseCO0137098_9" class="panel-collapse collapse">
<div class="panel-body">
<p>Note: You may type a note here.</p>
</div>
</div>
</div>
</div>

How to get rid of white space at bottom of screen?

The Problem
There is this pesky white space at the bottom of my screen and it won't go away even though I do margin-bottom: 0 or padding-bottom: 0.
If someone could get rid of this white space at the bottom it would be very much appreciated!
My Code
HTML
<div class="container-fluid no-lr-padding no-b-padding">
....
<div id="Menu" class="row-fluid no-b-padding">
<div id="Menu-Header" class="header">
<h1>Problems</h1>
</div>
<div class="panel-group" id="problem-panels">
<div class="panel panel-default top-panel">
<div class="panel-heading" data-toggle="collapse" href="#collapse1">
<h4 class="panel-title">
Cox Subtraction Level 1c
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">
<ul class="nav nav-pills">
<li class="active"><a>11</a></li>
<li><a>12</a></li>
<li><a>13</a></li>
<li><a>14</a></li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title" data-toggle="collapse" href="#collapse2">
Cox Addition Level 3b
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">panel body 2</div>
</div>
</div>
<div class="panel panel-default bottom-panel">
<div class="panel-heading">
<h4 class="panel-title" data-toggle="collapse" href="#collapse3">
Cox Subtraction Level 2a
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">panel body 3</div>
</div>
</div>
</div>
</div>
</div>
CSS
.no-b-padding{
padding-bottom: 0;
margin-bottom: 0;
}
JSFiddle

You need to remove the bottom margin from your problem-panels div:
#problem-panels {
margin-bottom:0;
}
jsFiddle example

Bootstrap tag "col-md-8" not centenring

The problem is that the 3rd row and the 4th don't center!
<!--|--------------------------------------------------------------------------------------------|-->
<div class="container">
<div class="row">
<div class="col-md-12 imagemFundo">
<!--|---------------------------------------ROWS-------------------------------------------------|-->
<div id="1" class="row rowPrincipal ">
<div class="container" >
<div class="col-md-2">
</div>
<div class="col-md-8 colPrincipal2 borderRow">
<!-----------------------------PANEL-------------------------------------|-->
<div class="panel panel-default panelTop">
<div class="panel-heading">Primeiro Título</div>
<div class="panel-body">
Conteúdo do painel.
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h1 class="panel-title">Segundo Título</h1>
</div>
<div class="panel-body">
Conteúdo do painel.
</div>
</div>
<!-----------------------------PANELEND----------------------------------|-->
</div>
<div class="col-md-2">
</div>
</div>
<!--SEGUNDA ROW-----------------------------------------------------------------|-->
<div id="2" class="1 row rowSecundario ">
<div class="container">
<div class="col-md-2">
</div>
<div class="col-md-8 colSecundario2 borderRow">
<p style="color: white" class="text-center titles">SEGUNDA ROW</p>
</div>
<div class="col-md-2">
</div>
</div>
</div>
<!--TERCEIRA ROW-----------------------------------------------------------------|-->
The problem starts here!!!!!I have tried every single thing and nothing works. I got a hint that may be divs not closed well but i can't find any error :/ I'm a beginner so maybe that's the problem.
<div id="3" class=" row rowSecundario ">
<div class="container">
<div class="col-md-2">
</div>
<div class="col-md-8 colSecundario2 borderRow">
<p style="color: white" class="text-center titles">TERCEIRA ROW</p>
</div>
<div class="col-md-2">
</div>
</div>
</div>
<!--QUARTA ROW----------------------------------------------------------------|-->
<div id="4" class="row rowSecundario ">
<div class="container">
<div class="col-md-2">
</div>
<div class="col-md-8 colSecundario2 borderRow">
<p style="color: white" class="text-center titles">QUARTA ROW</p>
</div>
<div class="col-md-2">
</div>
</div>
</div>
<!--FINAL ROW-----------------------------------------------------------------|-->
</div>
<!--|---------------------------------------ROWS END------------------------------------------|-->
</div>
</div>
</div>
Please help me!! I really can't figure it out by myself...

<div id="4" class="row rowSecundario ">
<div class="col-md-8 offset-2 colSecundario2 borderRow">
<p style="color: white" class="text-center titles">QUARTA ROW</p>
</div>
</div>