Bootstrap football team dynamic layout [closed] - php

Question

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I am trying to set up a layout to display a fantasy league team, originally I had it with player names in a table view but I want to change that to a graphical representation that looks a bit like a team line up.
Although I can get it similar to what I want I'm not very experienced in writing css, the site is written in PHP so I'm thinking that I will have to have a few styles based on how many players are in a position and then use php to swap these dynamically, unless there is a better way.
My question is how do I go about getting the positions central like I have done with the goal keeper position and get them inline, I am using float: left to get the positions inline but cant get them central with that.
.section-heading{
border-bottom: 1px solid #c8c8c8;
}
.section-heading-text{
text-align: center;
}
.section-content{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#009b29+0,009b29+20,61bf7a+20,61bf7a+40,009b29+40,009b29+60,61bf7a+60,61bf7a+80,009b29+80 */
background: #009b29; /* Old browsers */
background: -moz-linear-gradient(left, #009b29 0%, #009b29 20%, #61bf7a 20%, #61bf7a 40%, #009b29 40%, #009b29 60%, #61bf7a 60%, #61bf7a 80%, #009b29 80%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #009b29 0%,#009b29 20%,#61bf7a 20%,#61bf7a 40%,#009b29 40%,#009b29 60%,#61bf7a 60%,#61bf7a 80%,#009b29 80%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #009b29 0%,#009b29 20%,#61bf7a 20%,#61bf7a 40%,#009b29 40%,#009b29 60%,#61bf7a 60%,#61bf7a 80%,#009b29 80%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#009b29', endColorstr='#009b29',GradientType=1 ); /* IE6-9 */
padding-left: 30px;
padding-right: 30px;
height: 300px;
}
.gk{
text-align: center;
}
.kit-image{
height: 40px;
width: 35px;
}
.defender{
padding-left: 30px;
padding-right: 30px;
padding-top: 10px;
float: left;
text-align: center;
}
<div class="section-box">
<div class="section-heading">
<h2 class="section-heading-text">Team Name</h2>
</div>
<div class="section-content">
<div class="row">
<div class="col-sm-12">
<div class="gk">
<img src="www.gamingcentury.com/img/keeperKit.png" class="kit-image">
<div>
Goal keeper
</div>
</div>
</div>
</div>
<div class="row">
<div class="defender">
<img src="www.gamingcentury.com/img/outKit.png" class="kit-image">
<div>
Defender
</div>
</div>
<div class="defender">
<img src="www.gamingcentury.com/img/outKit.png" class="kit-image">
<div>
Defender
</div>
</div>
<div class="defender">
<img src="www.gamingcentury.com/img/outKit.png" class="kit-image">
<div>
Defender
</div>
</div>
<div class="defender">
<img src="www.gamingcentury.com/img/outKit.png" class="kit-image">
<div>
Defender
</div>
</div>
</div>
</div>

Answer 1

You can do this just by using bootstrap columns and adding offset to the first one, and then adding to all columns text-align: center attribute.
<div class="row">
<div class="col-sm-12">
<div class="gk">
<img src="www.gamingcentury.com/img/keeperKit.png" class="kit-image">
<div>
Goal keeper
</div>
</div>
</div>
</div>
<div class="row">
<div class="defender col-sm-1 col-sm-offset-4">
<img src="www.gamingcentury.com/img/outKit.png" class="kit-image">
<div>
Defender
</div>
</div>
<div class="defender col-sm-1">
<img src="www.gamingcentury.com/img/outKit.png" class="kit-image">
<div>
Defender
</div>
</div>
<div class="defender col-sm-1">
<img src="www.gamingcentury.com/img/outKit.png" class="kit-image">
<div>
Defender
</div>
</div>
<div class="defender col-sm-1">
<img src="www.gamingcentury.com/img/outKit.png" class="kit-image">
<div>
Defender
</div>
</div>
</div>
And in css:
.defender{
text-align: center;
}

Answer 2

This is my solution proposal, that provides the creation of col-centered and row-centered css classes, and apply them as follows:
css:
.row-centered {
text-align:center;
}
.col-centered {
display:inline-block;
float:none;
}
html:
<div class="section-box">
<div class="section-heading">
<h2 class="section-heading-text">Team Name</h2>
</div>
<div class="section-content">
<div class="row">
<div class="col-sm-12">
<div class="gk">
<img src="www.gamingcentury.com/img/keeperKit.png" class="kit-image">
<div>
Goal keeper
</div>
</div>
</div>
</div>
<div class="row row-centered">
<div class="defender col-centered">
<img src="www.gamingcentury.com/img/outKit.png" class="kit-image">
<div>
Defender
</div>
</div>
<div class="defender col-centered">
<img src="www.gamingcentury.com/img/outKit.png" class="kit-image">
<div>
Defender
</div>
</div>
<div class="defender col-centered">
<img src="www.gamingcentury.com/img/outKit.png" class="kit-image">
<div>
Defender
</div>
</div>
<div class="defender col-centered">
<img src="www.gamingcentury.com/img/outKit.png" class="kit-image">
<div>
Defender
</div>
</div>
</div>
</div>