Bootstrap rows outside panel

Asked by At

My bootstrap rows in my main page (and in modals) are going outside the panel container when the page extends beyond 1200px wide (lg).

I have created a fiddle here, however I can not find a way to make the fiddle wide enough to simulate large (over 1200px wide).

https://jsfiddle.net/bigalnz/f20rs3j8/13/

<body>
<div class="container">
<form class="form-horizontal" role="form">
  <div class="form-group">

    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">REMOVED FROM</h3>
      </div>
      <div class="panel-body">
        <div class="container">
          <div class="row">

            <div class="col-md-12" id="personSeizedFrom">
              <!--results here -->
              <div class="container"><div class="row">
              <div class="col-sm-10 col-md-10 font-weight-bold"><div class="row">
              <div class="col-sm-12 col-md-10">PERSON/Firstname/Middlename</div>
              <div class="col-sm-12 col-md-10">Some Address, Any town</div>
              <div class="col-sm-12 col-md-10">12/12/1980</div>
              </div></div></div></div>

            </div>
            <div class="col-md-12">
              <!-- Button to Open the Modal -->
              <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#queryPersonModal">+ Person</button>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</form>

I have tried wrapping the rows in a parent and also adding col-lg-10 to each col (along with the sm and md).

To illustrate what it looks like on my screen:

enter image description here

It would be nice to also get the button left aligned.

I have similar issues in other parts of the page so I am dong it wrong "globally".

4 Answers

0
Community On

In bootstrap, rows have negative margin. Try to replace

<div class="col-sm-10 col-md-10 font-weight-bold"><div class="row">

by

<div class="col-sm-10 col-md-10 font-weight-bold"><div class="row m-0">

to remove margin.

1
Sharvan On

Bootstrap 4 panel class no longer available. I have used card to achieve the desired result. In your code is working good but so much row and column used. Try with this simplified code.

.card-title {
    font-weight: 600;
    margin: 0 0 8px;
    font-size: 18px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <h3>REMOVED FROM</h3>
    <div class="card bg-light">
        <div class="card-body">
            <h5 class="card-title">PERSON/Firstname/Middlename</h5>
            <h5 class="card-title">Some Address, Any town</h5>
            <h5 class="card-title">12/12/1980</h5>
            <a href="#" class="btn btn-primary" data-toggle="modal" data-target="#queryPersonModal">+ Person</a>
        </div>
    </div>
</div>

0
pjominet On

In my opinion you way overdid the container/row/col nesting. Try something simpler like:

<div class="container">
    <form class="form-horizontal" role="form">
        <div class="form-group">

            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">REMOVED FROM</h3>
                </div>
                <div class="panel-body">
                    <div class="container" id="wrapper-container">
                        <div class="row">
                            <div class="col-sm-4 col-md-12">PERSON/Firstname/Middlename</div>
                            <div class="col-sm-4 col-md-12">Some Address, Any town</div>
                            <div class="col-sm-4 col-md-12">12/12/1980</div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#queryPersonModal">
                                    + Person
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

If you want that the content of the panel body is aligned with the heading, remove the wrapper-container block as container classes add extra padding left and right.

0
Dayanand Botla On

I noticed your mark-up is not structured well,

please check this, this is the result you may want.
[https://jsfiddle.net/DayanandBotla/L1re6uzh/14/][1]

FYI....<br/>
Every col-XX will give padding-left and padding-right with 15px, you are seeing indent of it....thanks

https://jsfiddle.net/DayanandBotla/L1re6uzh/14/