Check out this codepen example: https://codepen.io/anon/pen/Xgqjyq
h2 {
color: #111;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
font-weight: bold;
text-align: center;
}
.content {
margin-left: 5px;
margin-right: 5px;
text-align: center;
line-height: .75em;
}
.image-cropper {
width: 20%;
height: 5%;
position: relative;
border: 0px solid white;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 500px;
overflow:hidden;
margin:0 auto;
}
.info {
color: black;
}
.interest {
width:4em;
height:4em;
padding-bottom: .2em;
}
figure {
display: inline-block;
width: 8em;
}
figcaption {
font-family: 'Helvetica Neue', sans-serif;
font-size: 17px;
font-weight: bold;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
header
</a>
</div>
</div>
</nav>
<div class="content">
<div>
<h2>title</h2>
<figure>
<img class="interest" src="" alt="pic"/>
<figcaption>caption</figcaption>
</figure>
<figure>
<img class="interest" src="" alt="pic"/>
<figcaption>caption</figcaption>
</figure>
</div>
</div>
</body>Currently, both figures are aligned to the left on separate lines. I want them centered on one line, but when I remove the bootstrap style link from the HTML, they align correctly.
However, I need the Bootstrap styling for the header formatting. I tried downloading a custom Bootstrap version with only the nav elements, but it didn't solve the issue.