styling modal-title in bootstrap v4

Question

I am trying to style the content of modal title. It will contain a center image, and two smaller columns containing 1 or 2 buttons/images. I would like everything to align vertically and horizontally. The size of the center images varies. Seems like a job for flexbox. In my actual code, the content of #headerLHS/#headerRHS/#myModalLabel is set dynamically

    <div class="modal-title row" id="headerBox" class="container-fluid">
      <div id="headerLHS" class="col-xs-3"><img id="lhs"/></div>
      <div id="myModalLabel" class="col-xs-6"></div>
      <div id="headerRHS" class="col-xs-3"><button id="rhs">label</button></div>
    </div>

So far my css is:

#headerLHS,#headerRHS {
    display: flex;    webkit-display: flex;
    -webkit-flex-direction: column;  /* Safari */
    flex-direction:  column;
    padding: 0px;
    justify-content: space-around;
    align-items: center;
}

But this doesn't work. I seem to need styling on #lhs and #rhs but I've no idea what it should be. I've played with all sorts to flex-box markup, to no avail. Can someone help.

Thanks.

Bass Jobsen Bass Jobsen · Accepted Answer · 2016-03-31T22:35:05

You do not have equal height column, you should apply the flexbox on the parent too and set `flex-wrap: wrap;

#headerBox
{
    display:flex;
    webkit-display: flex;
    flex-wrap: wrap;
    webkit-flex-wrap: wrap;
} 
#headerLHS,#headerRHS {
    display: flex;    
    webkit-display: flex;
    -webkit-flex-direction: column;  /* Safari */
    flex-direction:  column;
    padding: 0px;
    justify-content: center;
    align-items: center;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="modal-title row" id="headerBox" class="container-fluid" style="display:flex;flex-wrap: wrap;">
      <div id="headerLHS" class="col-xs-3"><button id="rhs">label</button></div>
      <div id="myModalLabel" class="col-xs-6"><img id="lhs" src="http://dummyimage.com/640x4:3" class="img-fluid"/></div>
      <div id="headerRHS" class="col-xs-3"><button id="rhs">label</button></div>
</div>

`

styling modal-title in bootstrap v4

1 Answers