How to remove unwanted break in bootstrap panel - php

Question

I have panel where I'm displaying some basic informations about user. I want to display graph in the center of this panel.
I have problems with one unwanted space which I want to remove but I don't know how to do it.
Please look at image:
Code for this panel:
<div class="row">
<div class="panel panel-default">
<div class="panel-heading">Detail zákazníka </div>
<div class="panel-body">
<div class="form-group">
<label>ID zákazníka:</label>
<p><?php echo !empty($zakaznici['ID_zakaznici'])?$zakaznici['ID_zakaznici']:''; ?></p>
</div>
<div class="form-group">
<label>Meno:</label>
<p><?php echo !empty($zakaznici['meno'])?$zakaznici['meno']:''; ?></p>
</div>
<div class="panel-body" align="center">Graph will be displayed here</div>
<div class="form-group">
<label>Priezvisko:</label>
<p><?php echo !empty($zakaznici['priezvisko'])?$zakaznici['priezvisko']:''; ?></p>
</div>
<div class="form-group">
<label>Email:</label>
<p><?php echo !empty($zakaznici['email'])?$zakaznici['email']:''; ?></p>
</div>
<div class="form-group">
<label>Adresa:</label>
<p><?php echo !empty($zakaznici['adresa'])?$zakaznici['adresa']:''; ?></p>
</div>
<a class="btn btn-primary" href="<?php echo site_url('Zakaznici/viewusersvypozicky/'.$zakaznici['ID_zakaznici']); ?>" role="button">Zobraziť prenájmy</a>
</div>
</div>
</div>

Answer 1

p tags create line breaks. You could replace the p tag with a span tag to remove the unwanted break.
Your div with the class name 'panel-body' is also occupying space. You could add position: absolute; to its defined styles and it would not create that break.
<div class="row">
<div class="panel panel-default">
<div class="panel-heading">Detail zákazníka </div>
<div class="panel-body">
<div class="form-group">
<label>ID zákazníka:</label>
<p><?php echo !empty($zakaznici['ID_zakaznici'])?$zakaznici['ID_zakaznici']:''; ?></p>
</div>
<div class="form-group">
<label>Meno:</label>
<span><?php echo !empty($zakaznici['meno'])?$zakaznici['meno']:''; ?></span>
</div>
<div class="panel-body" align="center">Graph will be displayed here</div>
<div class="form-group">
<label>Priezvisko:</label>
<p><?php echo !empty($zakaznici['priezvisko'])?$zakaznici['priezvisko']:''; ?></p>
</div>
<div class="form-group">
<label>Email:</label>
<p><?php echo !empty($zakaznici['email'])?$zakaznici['email']:''; ?></p>
</div>
<div class="form-group">
<label>Adresa:</label>
<p><?php echo !empty($zakaznici['adresa'])?$zakaznici['adresa']:''; ?></p>
</div>
<a class="btn btn-primary" href="<?php echo site_url('Zakaznici/viewusersvypozicky/'.$zakaznici['ID_zakaznici']); ?>" role="button">Zobraziť prenájmy</a>
</div>
</div>
</div>

Answer 2

Try this
<div class = "row">
<div class = "panel panel-default col-4">
<div class = "panel-body">
//your matter
</div>
</div>
<div class = "panel panel-default col-4">
<div class = "panel-body">
//your graph
</div>
</div>
</div>

Answer 3

As discussed the p's are block level elements and create linebreaks - but Bootstrap also stlyes them with a 10px margin bottom so you may want to overwrite that with
p { margin-bottom: 0;}
I do not recommend this - the ideaa of the margin bottom is to separate text elements.
What will be causing your space issue where you have indicated is that you are using a div with a .panel body class within the panel body.
<div class="panel-body" align="center">Graph will be displayed here</div>
Bootstrap styles the panel body with 15px padding - so either
a) replace that class with a different class (this is what I would do - it makes no sense to have a .panel-body -within a .panel-body)
b) remove the padding from the nested panel body
.panel-body > .panel-body { padding: 0}
But as I said - a panel body within another one is semantically wrong.