aligning image in center - html

I want to align images in center as four in top and and three in bottom which is in same div.
.tiles-menu{
width:1024px;
margin:auto;
}
.tiles-menu .submenu-menu .views-row{
float:left;
}
.tilesImage , .tilesTitle{
margin:auto;
}
.innerPageTilesMenu{
padding:4%;
}
<div id="tiles_menu">
<div class="view view-tiles-menu view-id-tiles_menu view-display-id-block view-dom-id-bdffce08b72061133c0ad959070833a3">
<div class="view-content">
<div class="tiles-menu">
<div class="submenu-menu nav navbar-nav main-menu" style="">
<div class="views-row views-row-1 views-row-odd views-row-first">
<a href="http://localhost/AspireInnerWebsite/services/retail/Consulting&Solutions/Omnichannel">
<div class="innerPageTilesMenu">
<div class="tilesImage">
<img typeof="foaf:Image" src="http://localhost/AspireInnerWebsite/sites/default/files/tab-strategic-store-solutions.jpg" alt="" width="235" height="228">
</div>
<div class="tilesTitle"><p>Omnichannel</p>
</div>
</div>
</a>
</div>
<div class="views-row views-row-2 views-row-even">
<a href="http://localhost/AspireInnerWebsite/services/retail/Consulting&Solutions/Strategic-Store-Solutions">
<div class="innerPageTilesMenu">
<div class="tilesImage">
<img typeof="foaf:Image" src="http://localhost/AspireInnerWebsite/sites/default/files/tab-omnichannel_0.jpg" alt="" width="235" height="228">
</div>
<div class="tilesTitle"><p>Strategic Store Solutions</p>
</div>
</div>
</a>
</div>
<div class="views-row views-row-3 views-row-odd">
<a href="http://localhost/AspireInnerWebsite/services/retail/Consulting&Solutions/Merchandise-Operations">
<div class="innerPageTilesMenu">
<div class="tilesImage">
<img typeof="foaf:Image" src="http://localhost/AspireInnerWebsite/sites/default/files/tab-Merchandise-Operations.jpg" alt="" width="235" height="228"></div>
<div class="tilesTitle"><p>Merchandise Operation</p></div>
</div>
</a>
</div>
<div class="views-row views-row-4 views-row-even">
<a href="http://localhost/AspireInnerWebsite/services/retail/Consulting&Solutions/Retail-Supply-Chain">
<div class="innerPageTilesMenu">
<div class="tilesImage">
<img typeof="foaf:Image" src="http://localhost/AspireInnerWebsite/sites/default/files/tab-Retail-Supply-Chain.jpg" alt="" width="235" height="228"></div>
<div class="tilesTitle"><p>Retail Supply Chain</p></div>
</div>
</a>
</div>
<div class="views-row views-row-5 views-row-odd">
<a href="http://localhost/AspireInnerWebsite/services/retail/Consulting&Solutions/Predictive-Analytics">
<div class="innerPageTilesMenu">
<div class="tilesImage">
<img typeof="foaf:Image" src="http://localhost/AspireInnerWebsite/sites/default/files/tab-Predictive-Analytics.jpg" alt="" width="235" height="228"></div>
<div class="tilesTitle"><p>Predictive Analytics</p></div>
</div>
</a>
</div>
<div class="views-row views-row-6 views-row-even">
<a href="http://localhost/AspireInnerWebsite/services/retail/Consulting&Solutions/Retail-Test-Automation">
<div class="innerPageTilesMenu">
<div class="tilesImage">
<img typeof="foaf:Image" src="http://localhost/AspireInnerWebsite/sites/default/files/tab-Retail-Test-Automation.jpg" alt="" width="235" height="228"></div>
<div class="tilesTitle"><p>Retail Test Automation</p></div>
</div>
</a>
</div>
<div class="views-row views-row-7 views-row-odd views-row-last">
<a href="http://localhost/AspireInnerWebsite/services/retail/Consulting&Solutions/Digital-Services">
<div class="innerPageTilesMenu">
<div class="tilesImage">
<img typeof="foaf:Image" src="http://localhost/AspireInnerWebsite/sites/default/files/tab-digital-services.jpg" alt="" width="235" height="228"></div>
<div class="tilesTitle"><p>Digital Services</p></div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
For some purpose I have all the images in single div. I want as shown in star
* * * *
* * *
I have created fiddle Fiddle Demo


You can use css3 flexbox. Consider the following css:
.main-menu {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.tiles-menu {
width:1024px;
margin:auto;
}
.tiles-menu .submenu-menu .views-row {
float:left;
}
.tilesImage , .tilesTitle{margin:auto;}
.innerPageTilesMenu{padding:4%;}
.main-menu {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
<div id="tiles_menu">
<div class="view view-tiles-menu view-id-tiles_menu view-display-id-block view-dom-id-bdffce08b72061133c0ad959070833a3">
<div class="view-content">
<div class="tiles-menu"><div class="submenu-menu nav navbar-nav main-menu" style=""> <div class="views-row views-row-1 views-row-odd views-row-first">
<a href="http://localhost/AspireInnerWebsite/services/retail/Consulting&Solutions/Omnichannel">
<div class="innerPageTilesMenu">
<div class="tilesImage"><img typeof="foaf:Image" src="http://localhost/AspireInnerWebsite/sites/default/files/tab-strategic-store-solutions.jpg" alt="" width="235" height="228"></div>
<div class="tilesTitle"><p>Omnichannel</p></div>
</div>
</a> </div>
<div class="views-row views-row-2 views-row-even">
<a href="http://localhost/AspireInnerWebsite/services/retail/Consulting&Solutions/Strategic-Store-Solutions">
<div class="innerPageTilesMenu">
<div class="tilesImage"><img typeof="foaf:Image" src="http://localhost/AspireInnerWebsite/sites/default/files/tab-omnichannel_0.jpg" alt="" width="235" height="228"></div>
<div class="tilesTitle"><p>Strategic Store Solutions</p></div>
</div>
</a> </div>
<div class="views-row views-row-3 views-row-odd">
<a href="http://localhost/AspireInnerWebsite/services/retail/Consulting&Solutions/Merchandise-Operations">
<div class="innerPageTilesMenu">
<div class="tilesImage"><img typeof="foaf:Image" src="http://localhost/AspireInnerWebsite/sites/default/files/tab-Merchandise-Operations.jpg" alt="" width="235" height="228"></div>
<div class="tilesTitle"><p>Merchandise Operation</p></div>
</div>
</a> </div>
<div class="views-row views-row-4 views-row-even">
<a href="http://localhost/AspireInnerWebsite/services/retail/Consulting&Solutions/Retail-Supply-Chain">
<div class="innerPageTilesMenu">
<div class="tilesImage"><img typeof="foaf:Image" src="http://localhost/AspireInnerWebsite/sites/default/files/tab-Retail-Supply-Chain.jpg" alt="" width="235" height="228"></div>
<div class="tilesTitle"><p>Retail Supply Chain</p></div>
</div>
</a> </div>
<div class="views-row views-row-5 views-row-odd">
<a href="http://localhost/AspireInnerWebsite/services/retail/Consulting&Solutions/Predictive-Analytics">
<div class="innerPageTilesMenu">
<div class="tilesImage"><img typeof="foaf:Image" src="http://localhost/AspireInnerWebsite/sites/default/files/tab-Predictive-Analytics.jpg" alt="" width="235" height="228"></div>
<div class="tilesTitle"><p>Predictive Analytics</p></div>
</div>
</a> </div>
<div class="views-row views-row-6 views-row-even">
<a href="http://localhost/AspireInnerWebsite/services/retail/Consulting&Solutions/Retail-Test-Automation">
<div class="innerPageTilesMenu">
<div class="tilesImage"><img typeof="foaf:Image" src="http://localhost/AspireInnerWebsite/sites/default/files/tab-Retail-Test-Automation.jpg" alt="" width="235" height="228"></div>
<div class="tilesTitle"><p>Retail Test Automation</p></div>
</div>
</a> </div>
<div class="views-row views-row-7 views-row-odd views-row-last">
<a href="http://localhost/AspireInnerWebsite/services/retail/Consulting&Solutions/Digital-Services">
<div class="innerPageTilesMenu">
<div class="tilesImage"><img typeof="foaf:Image" src="http://localhost/AspireInnerWebsite/sites/default/files/tab-digital-services.jpg" alt="" width="235" height="228"></div>
<div class="tilesTitle"><p>Digital Services</p></div>
</div>
</a> </div>
</div></div>
</div>
</div></div>


Updated your css as. It should fix your issue.
.tiles-menu {
text-align: center;
}
.tiles-menu .submenu-menu .views-row {
//float: left; **remove this code**
display: inline-block;
}
JSFiddle

Related

Bootstrap 4 grids

How to make a layout on bootstrap4, and then I can not. Thank you in advance!
<div class="col-8">
<a href="#">
<div class="card">
<img class="card-img" src="img.jpg">
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<img class="card-img" src="img.jpg">
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<img class="card-img" src="img.jpg">
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<img class="card-img" src="img.jpg">
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<img class="card-img" src="img.jpg">
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<img class="card-img" src="img.jpg">
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<img class="card-img" src="img.jpg">
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<img class="card-img" src="img.jpg">
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<img class="card-img" src="img.jpg">
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<img class="card-img" src="img.jpg">
</div>
</a>
</div>
Now it goes like this
And need to look like this

Using float: left; styling on the columns will give you this effect.
Below I changed the <img> tag to a <div> with a border to give the same visuals since I don't have img.jpg. If you swap those back in it should still work.
I added the styling to the col classes by just adding:
.col-4, .col-8{
float:left;
}
Though, I would recommend adding a class to the outer div's with this styling instead of pigy-backing on bootstrap's classes.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"
integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
</head>
<body>
<style>
.small-card {
height: 60px;
width: 100%;
border: solid 2px #333;
}
.large-card{
height: 120px;
width: 100%;
border: solid 2px #333;
}
.col-4, .col-8{
float:left;
}
</style>
<div class="col-8">
<a href="#">
<div class="card">
<div class="large-card"></div>
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<div class="small-card"></div>
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<div class="small-card"></div>
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<div class="small-card"></div>
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<div class="small-card"></div>
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<div class="small-card"></div>
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<div class="small-card"></div>
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<div class="small-card"></div>
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<div class="small-card"></div>
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<div class="small-card"></div>
</div>
</a>
</div>
</body>
</html>

Using Bootstrap Grid to align content

I used the Bootstrap Grid format so that I would be able to align my images but for some reason it isn't working. they are all in one like to the left as if i had set them as blocks and it won't work if i give their positions as inline-block either. How will I be able to edit it so that my 5 images will have a responsive grid format?
<div id="section2" class="container-fluid">
<h2>The Members</h2>
<h3 id="hoverovertext">(Hover-over each member to learn more)</h3>
<div class="row1" width="100%">
<div class="members col-md-4" id="ohno" height="225px">
<img src="images/ohno.jpg" class="images" height="225px">
<span class="text">Satoshi Ohno(Leader)<br>Birth: 26-11-1980, <br>Tokyo (Jpn)<br>Joined "Johnnys" in 1994</span>
</div>
<div class="members col-md-4" id="sakurai" height="225px">
<img src="images/sakurai.jpg" class="images" height="225px">
<span class="text">Sho Sakurai<br>Birth: 25-01-1982, <br>Tokyo (Jpn)<br>Joined "Johnnys" in 1995<br>Graduated Keio University</span>
</div>
</div>
<div class="members col-md-4" id="aiba" height="225px">
<img src="images/aiba.jpg" class="images" height="225px">
<span class="text">Masaki Aiba<br>Birth: 24-12-1982, <br>Chiba (Jpn)<br>Joined "Johnnys" in 1996</span>
</div>
<div class="row2" width="100%">
<div class="members col-md-6" id="ninomiya" height="225px">
<img src="images/ninomiya.jpg" class="images" height="225px">
<span class="text">Kazunari Ninomiya<br>Birth: 17-06-1983,<br>Tokyo (Jpn)<br>Joined "Johnnys" in 1996</span>
</div>
<div class="members col-md-6" id="matsumoto" height="225px">
<img src="images/matsumoto.jpg" class="images" height="225px">
<span class="text">Jun Matsumoto<br>Birth:30-08-1983, <br>Tokyo (Jpn)<br>Joined "Johnnys" in 1996</span>
</div>
</div>

Something like this should get you started...
Each horizontal row should be in a <div class="row">
Inside a row, all col should add up to 12. So, there's a 2+4+4+2 row, and there's also a 6+6 row, etc.
Don't forget class="img-responsive" for images... very useful.
.imgIB{display:inline-block !important;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="section2" class="container-fluid">
<h2>The Members</h2>
<h3 id="hoverovertext">(Hover-over each member to learn more)</h3>
<div class="row1" width="100%">
<div class="col-xs-2"></div>
<div class="col-xs-4 members" id="ohno">
<img src="http://placeimg.com/100/100/animals" class="img-responsive">
<span class="text">Satoshi Ohno(Leader)<br>Birth: 26-11-1980, <br>Tokyo (Jpn)<br>Joined "Johnnys" in 1994</span>
</div>
<div class="col-xs-4 members" id="sakurai">
<img src="http://placeimg.com/100/100/animals" class="img-responsive">
<span class="text">Sho Sakurai<br>Birth: 25-01-1982, <br>Tokyo (Jpn)<br>Joined "Johnnys" in 1995<br>Graduated Keio University</span>
</div>
<div class="col-xs-2"></div>
</div><!-- .row -->
<div class="row1" width="100%">
<div class="col-xs-4"></div>
<div class="col-xs-4 members" id="aiba">
<img src="http://placeimg.com/100/100/animals" class="img-responsive">
<span class="text">Masaki Aiba<br>Birth: 24-12-1982, <br>Chiba (Jpn)<br>Joined "Johnnys" in 1996</span>
</div>
<div class="col-xs-4"></div>
</div><!-- .row -->
<div class="row" width="100%">
<div class="col-xs-6 members text-center" id="ninomiya">
<div>
<img src="http://placeimg.com/100/100/animals" class="img-responsive imgIB">
</div>
<span class="text">Kazunari Ninomiya<br>Birth: 17-06-1983,<br>Tokyo (Jpn)<br>Joined "Johnnys" in 1996</span>
</div>
<div class="col-xs-6 members text-center" id="matsumoto">
<div>
<img src="http://placeimg.com/100/100/animals" class="img-responsive imgIB">
</div>
<span class="text">Jun Matsumoto<br>Birth:30-08-1983, <br>Tokyo (Jpn)<br>Joined "Johnnys" in 1996</span>
</div>
</div><!-- .row -->
</div>

Is it possible to make bootstrap column "snap" into place?

I am playing around with Bootstrap and I ran into a small problem that I can't find a solution for. There probably is a solution out there, but I can't, for the life of me, figure out what to search for.
What I want to know is, if there is a way to make the columns snap to each other, so a big gap doesn't show up like shown in the fiddle, below the first div on the left hand side. I hope the fiddle describes the problem well enough for someone to point me in the right direction.
Fiddle: https://jsfiddle.net/DTcHh/24238/
body {
background: tomato;
}
.container {
background: white;
border: 1px solid grey;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-6 container">
<h3>Title</h3>
<p>Paragraph</p>
<div class="media-container">
<a href="http://placehold.it/200x200">
<img src="http://placehold.it/200x200" />
</a>
<a href="http://placehold.it/200x200">
<img src="http://placehold.it/200x200" />
</a>
<a href="http://placehold.it/200x200">
<img src="http://placehold.it/200x200" />
</a>
<a href="http://placehold.it/200x200">
<img src="http://placehold.it/200x200" />
</a>
<a href="http://placehold.it/200x200">
<img src="http://placehold.it/200x200" />
</a>
</div>
</div>
<div class="col-md-6 container">
<h3>Title</h3>
<p>Paragraph</p>
<div class="media-container">
<a href="http://placehold.it/200x200">
<img src="http://placehold.it/200x200" />
</a>
<a href="http://placehold.it/200x200">
<img src="http://placehold.it/200x200" />
</a>
<a href="http://placehold.it/200x200">
<img src="http://placehold.it/200x200" />
</a>
</div>
</div>
<div class="col-md-6 container">
<h3>Title</h3>
<p>Paragraph</p>
<div class="media-container">
<a href="http://placehold.it/200x200">
<img src="http://placehold.it/200x200" />
</a>
<a href="http://placehold.it/200x200">
<img src="http://placehold.it/200x200" />
</a>
<a href="http://placehold.it/200x200">
<img src="http://placehold.it/200x200" />
</a>
</div>
</div>
<div class="col-md-6 container">
<h3>Title</h3>
<p>Paragraph</p>
<div class="media-container">
<a href="http://placehold.it/200x200">
<img src="http://placehold.it/200x200" />
</a>
<a href="http://placehold.it/200x200">
<img src="http://placehold.it/200x200" />
</a>
<a href="http://placehold.it/200x200">
<img src="http://placehold.it/200x200" />
</a>
</div>
</div>
<div class="col-md-6 container">
<h3>Title</h3>
<p>Paragraph</p>
<div class="media-container">
<a href="http://placehold.it/200x200">
<img src="http://placehold.it/200x200" />
</a>
<a href="http://placehold.it/200x200">
<img src="http://placehold.it/200x200" />
</a>
<a href="http://placehold.it/200x200">
<img src="http://placehold.it/200x200" />
</a>
</div>
</div>
<div class="col-md-6 container">
<h3>Title</h3>
<p>Paragraph</p>
<div class="media-container">
<a href="http://placehold.it/200x200" />
<img src="http://placehold.it/200x200" />
</a>
<a href="http://placehold.it/200x200" />
<img src="http://placehold.it/200x200" />
</a>
<a href="http://placehold.it/200x200" />
<img src="http://placehold.it/200x200" />
</a>
</div>
</div>
</div>

Problem in your bootstrap grid structure. You use "container" class under "ROW" & "COL-MD-" so that's why you face the problem.
Working fiddle: https://jsfiddle.net/amitmonsterme/veyq6naL/
view this tutorial : http://getbootstrap.com/css/#overview-container

You can apply the float: right property to particular blocks when the screen width becomes 992px or more. I've defined a new special class .pull-md-right for this purpose.
Please check the result: https://jsfiddle.net/glebkema/9dqsj4pk/
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
body {
background: tomato;
}
.container {
background: white;
border: 1px solid grey;
}
#media (min-width: 992px) {
.pull-md-right {
float: right !important;
}
}
<div class="container">
<div class="row">
<div class="col-md-6">
<h3>Title 1</h3>
<p>Paragraph</p>
<div class="media-container">
<img src="http://placehold.it/200x200">
<img src="http://placehold.it/200x200">
<img src="http://placehold.it/200x200">
<img src="http://placehold.it/200x200">
<img src="http://placehold.it/200x200">
</div>
</div>
<div class="col-md-6">
<h3>Title 2</h3>
<p>Paragraph</p>
<div class="media-container">
<img src="http://placehold.it/200x200">
<img src="http://placehold.it/200x200">
<img src="http://placehold.it/200x200">
</div>
</div>
<div class="col-md-6 pull-md-right">
<h3>Title 3</h3>
<p>Paragraph</p>
<div class="media-container">
<img src="http://placehold.it/200x200">
<img src="http://placehold.it/200x200">
<img src="http://placehold.it/200x200">
</div>
</div>
<div class="col-md-6">
<h3>Title 4</h3>
<p>Paragraph</p>
<div class="media-container">
<img src="http://placehold.it/200x200">
<img src="http://placehold.it/200x200">
<img src="http://placehold.it/200x200">
</div>
</div>
<div class="col-md-6 pull-md-right">
<h3>Title 5</h3>
<p>Paragraph</p>
<div class="media-container">
<img src="http://placehold.it/200x200">
<img src="http://placehold.it/200x200">
<img src="http://placehold.it/200x200">
</div>
</div>
<div class="col-md-6">
<h3>Title 6</h3>
<p>Paragraph</p>
<div class="media-container">
<img src="http://placehold.it/200x200">
<img src="http://placehold.it/200x200">
<img src="http://placehold.it/200x200">
</div>
</div>
</div>
</div>

How to make the grid system centered horizontally?

I want to get the grid system to center but it won't, i was thinking maybe it has something to do with my pictures' border?. here's the screen shotwhat it is right now
what i want it to be
HTML:
<div class=" container">
<div class="row">
<div class="col-md-4">
<div class="optionBorder">
<img src="images/page-1.svg" height="74px" width="50px">
</div>
</div>
<div class="col-md-4">
<div class="optionBorder">
<img src="images/page-1.svg" height="74px" width="50px">
</div>
</div>
<div class="col-md-4">
<div class="optionBorder">
<img src="images/page-1.svg" height="74px" width="50px">
</div>
</div>
</div>
</div>
CSS:
.optionBorder
{
border: 1px solid #f5f5f5;
height: 130px;
width: 130px;
line-height: 130px;
text-align: center;
}

Take another element before row with some width and make them center
for example.:
HTML
<div class="test">
<div class="row">
<div class="col-md-4">
<div class="optionBorder">
<img src="http://placehold.it/350x150" height="74px" width="50px">
</div>
</div>
<div class="col-md-4">
<div class="optionBorder">
<img src="http://placehold.it/350x150" height="74px" width="50px">
</div>
</div>
<div class="col-md-4">
<div class="optionBorder">
<img src="http://placehold.it/350x150" height="74px" width="50px">
</div>
</div>
</div>
</div>
CSS
.test {
width: 450px;
margin: auto;
margin-bottom: 15px;
}
bootply

<style>
.paraentCont{
width:100%;
max-width:300px;
margin:auto;
}
</style>
<div class=" container">
<div class="paraentCont">
<div class="row">
<div class="col-md-4">
<div class="optionBorder">
<img src="images/page-1.svg" height="74px" width="50px">
</div>
</div>
<div class="col-md-4">
<div class="optionBorder">
<img src="images/page-1.svg" height="74px" width="50px">
</div>
</div>
<div class="col-md-4">
<div class="optionBorder">
<img src="images/page-1.svg" height="74px" width="50px">
</div>
</div>
</div>

Give to .row fixed width such as 700px, and margin-left/right auto
look at this example http://www.bootply.com/GFDHc6p5tg

Actually here is there right way to go while using Bootsrap
Use the predefine class text-center
Use q Bootstrap helper like .inline-block{display: inline-block}
.inline-block{display: inline-block}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class=" container">
<div class="row text-center">
<div class="col-md-4 inline-block">
<div class="optionBorder">
<img src="images/page-1.svg" height="74px" width="50px">
</div>
</div>
<div class="col-md-4 inline-block">
<div class="optionBorder">
<img src="images/page-1.svg" height="74px" width="50px">
</div>
</div>
<div class="col-md-4 inline-block">
<div class="optionBorder">
<img src="images/page-1.svg" height="74px" width="50px">
</div>
</div>
</div>
</div>

Linked images not floating left

I'm sure this is obvious but I can't figure it out. I want to create a grid of images like so:
[Image] [Image] | [ Big
[Image] [Image] | Image ]
I can do this fine with just images but the problem is that the images are nested inside links. So I'm trying to figure out how to make the links float left.
My HTML is:
<div class="row">
<div class="col-md-6">
<a href="img/1-1full.png" title="" data-gallery>
<img src="img/1-1.png" alt="">
</a>
<a href="img/1-2full.png" title="" data-gallery>
<img src="img/1-2.png" alt="">
</a>
<a href="img/1-3full.png" title="" data-gallery>
<img src="img/1-3.png" alt="">
</a>
<a href="img/1-4full.png" title="" data-gallery>
<img src="img/1-4.png" alt="">
</a>
</div>
<div class="col-md-6">
<a href="img/1-largefull.png" title="" data-gallery>
<img src="img/1-large.png" alt="">
</a>
</div>
</div>
<div style="clear: both;">
My CSS is:
.gallery .col-md-6 a {
float: left;
display: block;
}
.gallery .col-md-6 a:nth-child(odd) {
width: 307px;
margin: 0 30px 30px 0;
}
.gallery .col-md-6 a:nth-child(even) {
width: 278px;
margin: 0;
}
The width of each col-md-6 is 585 px so they should fit together. .gallery is getting targeted correctly too, it's showing up in the code inspector. There's obviously something basic about floats that I'm not understanding.

If you're already using a grid framework (Bootstrap), why not take advantage of it. It's a little extra markup, but I think it achieves what you are looking for.
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-6">
<a href="img/1-1full.png" title="" data-gallery>
<img src="img/1-1.png" alt="" class="img-responsive">
</a>
</div>
<div class="col-md-6">
<a href="img/1-2full.png" title="" data-gallery>
<img src="img/1-2.png" alt="" class="img-responsive">
</a>
</div>
</div>
<div class="row">
<div class="col-md-6">
<a href="img/1-3full.png" title="" data-gallery>
<img src="img/1-3.png" alt="" class="img-responsive">
</a>
</div>
<div class="col-md-6">
<a href="img/1-4full.png" title="" data-gallery>
<img src="img/1-4.png" alt="" class="img-responsive">
</a>
</div>
</div>
</div>
<div class="col-md-6">
<a href="img/1-largefull.png" title="" data-gallery>
<img src="img/1-large.png" alt="" class="img-responsive">
</a>
</div>
</div>

Would this work for you? I have given two examples, seeing your layout. One with 4 a row and the other with 2 a row.
* {box-sizing: border-box;}
.half {width: 50%;}
.quat {width: 25%;}
.sz34 {width: 75%;}
.cols {float: left;}
img {width: 100%; height: 65px; display: block; border: 1px solid #ccc;}
.parent {overflow: hidden;}
.parent div {float: left;}
img.double-height {height: 130px;}
<div class="parent">
<div class="half">
<div class="quat"><img src="" alt="Image"></div>
<div class="quat"><img src="" alt="Image"></div>
<div class="quat"><img src="" alt="Image"></div>
<div class="quat"><img src="" alt="Image"></div>
<div class="quat"><img src="" alt="Image"></div>
<div class="quat"><img src="" alt="Image"></div>
<div class="quat"><img src="" alt="Image"></div>
<div class="quat"><img src="" alt="Image"></div>
</div>
<div class="half">
<img src="" alt="Image" class="double-height">
</div>
</div>
<hr />
<div class="parent">
<div class="half">
<div class="half"><img src="" alt="Image"></div>
<div class="half"><img src="" alt="Image"></div>
<div class="half"><img src="" alt="Image"></div>
<div class="half"><img src="" alt="Image"></div>
</div>
<div class="half">
<img src="" alt="Image" class="double-height">
</div>
</div>