Bootstrap center portfolio

[jandeman023]

Ik ben bezig met een project en daarvoor gebruik ik een stukje uit een bootstrap template pagina. Namelijk deze: https://blackrockdigital.github.io/startbootstrap-agency/
Hier is de code: https://github.com/BlackrockDigital/startbootstrap-agency

Het deel dat ik hier uit gebruik maak:

<!-- Portfolio Grid Section -->
<section id="portfolio" class="bg-light-gray">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">Portfolio</h2>
<h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-6 portfolio-item">
<a href="#portfolioModal1" class="portfolio-link" data-toggle="modal">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img src="img/portfolio/roundicons.png" class="img-responsive" alt="">
</a>
<div class="portfolio-caption">
<h4>Round Icons</h4>
<p class="text-muted">Graphic Design</p>
</div>
</div>
<div class="col-md-4 col-sm-6 portfolio-item">
<a href="#portfolioModal2" class="portfolio-link" data-toggle="modal">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img src="img/portfolio/startup-framework.png" class="img-responsive" alt="">
</a>
<div class="portfolio-caption">
<h4>Startup Framework</h4>
<p class="text-muted">Website Design</p>
</div>
</div>
<div class="col-md-4 col-sm-6 portfolio-item">
<a href="#portfolioModal3" class="portfolio-link" data-toggle="modal">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img src="img/portfolio/treehouse.png" class="img-responsive" alt="">
</a>
<div class="portfolio-caption">
<h4>Treehouse</h4>
<p class="text-muted">Website Design</p>
</div>
</div>
<div class="col-md-4 col-sm-6 portfolio-item">
<a href="#portfolioModal4" class="portfolio-link" data-toggle="modal">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img src="img/portfolio/golden.png" class="img-responsive" alt="">
</a>
<div class="portfolio-caption">
<h4>Golden</h4>
<p class="text-muted">Website Design</p>
</div>
</div>
<div class="col-md-4 col-sm-6 portfolio-item">
<a href="#portfolioModal5" class="portfolio-link" data-toggle="modal">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img src="img/portfolio/escape.png" class="img-responsive" alt="">
</a>
<div class="portfolio-caption">
<h4>Escape</h4>
<p class="text-muted">Website Design</p>
</div>
</div>
<div class="col-md-4 col-sm-6 portfolio-item">
<a href="#portfolioModal6" class="portfolio-link" data-toggle="modal">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img src="img/portfolio/dreams.png" class="img-responsive" alt="">
</a>
<div class="portfolio-caption">
<h4>Dreams</h4>
<p class="text-muted">Website Design</p>
</div>
</div>
</div>
</div>
</section>


Nu is het zo dat dit er perfect 6 zijn. Alleen wanneer ik er maar 5 wil gebruiken dan laat hij de onderste twee vanaf links beginnen. Graag zou ik willen weten hoe ik deze dan laat centreren. Ik kom er zelf niet uit. Heeft iemand enig idee hoe ik dit aanpak?

[MAX3400]

Ik zie meerdere dingen in de code; sowieso een aantal DIVS waar een center-tag in gedefinieerd staat. Daarnaast een aantal classes die ook naar 6 wijzen, zoals "col-sm-6 portfolio-item"

Mogelijk, maar dit lijkt me toch enige zelfwerkzaamheid voor een beginnend developer/portfolio; even de CSS en classes leren begrijpen en op basis hiervan een 5-column inrichting maken?

[M0nkeymen]

offset van 1 column aan de linker kant?

1-2-2-2-2-2-1 = 12

[ Voor 9% gewijzigd door M0nkeymen op 19-04-2017 14:35 ]

[DJMaze]

Wat een gedoe zeg voor zoiets simpels als een responsive grid.
Kijk hier eens naar als de volgorde niet uit maakt: https://jsfiddle.net/ddodtqr8/10/
Of via een flex: https://jsfiddle.net/ddodtqr8/8/
Of via inline-block: https://jsfiddle.net/ddodtqr8/9/

De rest kan je dan zelf invulling geven inclusief @media queries

[ Voor 8% gewijzigd door DJMaze op 19-04-2017 14:58 . Reden: Fiddle's aangepast met meer duidelijkheid ]

[jandeman023]

DJMaze schreef op woensdag 19 april 2017 @ 14:45:
Wat een gedoe zeg voor zoiets simpels als een responsive grid.
Kijk hier eens naar als de volgorde niet uit maakt: https://jsfiddle.net/ddodtqr8/10/
Of via een flex: https://jsfiddle.net/ddodtqr8/8/
Of via inline-block: https://jsfiddle.net/ddodtqr8/9/

De rest kan je dan zelf invulling geven inclusief @media queries

Die laatste is inderdaad wat ik nodig heb. Ik heb dit ook geprobeerd maar ik krijg het niet aan de praat.

Ik laat het namelijk draaien in een for loop:
<section id="portfolio" class="bg-light-gray">
<div style="width: 90%;" class="container">
<div class="row">
<br><br>
<?php

$movie_Count = get_field('count', 226);

for ($i = 1; $i <= $movie_Count; $i++) {
$afb = 'afb' . $i;
$title = 'title' . $i;
$time = 'time' . $i;

?>
<div class="col-md-3 portfolio-item">
<div style="width: 350px;" class="crop-to-square">
<div class="crop-to-square-positioner">
<img class="crop-to-square-img" src="<?php echo get_field($afb, 25); ?>" />
</div>
</div>
<div style="width: 350px; max-width: 350px; margin: 0 0 0 0;" class="portfolio-caption">
<h4 style="color:black; font-size:20px;"><?php echo get_field($title, 25); ?></h4>
<p style="font-size:30px;" class="text-muted"><?php echo get_field($time, 25); ?></p>
</div>
<a style="width: 350px;" class="btn btn-block btn-success" href="#"><h4><?php echo get_field('button', 226); ?></h4></a>

</div>

<?php
}
?>
</div>
</div>
</section>

Hier moet ik het dus aanpassen zodat het wel werkt.

[skate master]

Misschien even verdiepen in het bootstrap grid systeem. http://getbootstrap.com/css/#grid
Wellicht wordt het dan duidelijk waarom iets niet weergegeven wordt zoals je zou verwachten.

Wil je de volgende keer je code tussen [ code ] [ /code ] zetten zodat deze beter leesbaar is?

[Zeror]

Check dit even:

• Bootstrap 3 Centered Columns

Volgens mij de oplossing van je probleem

Ze voegen een extra class toe aan de columns om columns te centeren.

[ Voor 27% gewijzigd door Zeror op 19-04-2017 16:14 ]

[jandeman023]

Zeror schreef op woensdag 19 april 2017 @ 16:11:
Check dit even:

• Bootstrap 3 Centered Columns

Volgens mij de oplossing van je probleem

Ze voegen een extra class toe aan de columns om columns te centeren.

Dankjewel! het probleem is opgelost!

[DJMaze]

jandeman023 schreef op donderdag 20 april 2017 @ 09:28:
Dankjewel! het probleem is opgelost!

Goed zo!
Ik zie dat de "bootstrap centered" inderdaad ongeveer mijn code is.
Maar hoe wil je het er uit laten zien als de pagina op een smaller scherm wordt getoond?
Bootstrap doet dan het zelfde als dit: https://jsfiddle.net/ddodtqr8/11/

[jandeman023]

DJMaze schreef op donderdag 20 april 2017 @ 11:47:
[...]

Goed zo!
Ik zie dat de "bootstrap centered" inderdaad ongeveer mijn code is.
Maar hoe wil je het er uit laten zien als de pagina op een smaller scherm wordt getoond?
Bootstrap doet dan het zelfde als dit: https://jsfiddle.net/ddodtqr8/11/

De site word specifiek voor een iets gemaakt en draait alleen lokaal in een bedrijf. Standaard op een full HD resolutie monitor/tv. Dus als het goed is blijft hij altijd gewoon 3 colommen hebben.

[DJMaze]

jandeman023 schreef op vrijdag 21 april 2017 @ 05:52:
Standaard op een full HD resolutie monitor/tv. Dus als het goed is blijft hij altijd gewoon 3 colommen hebben.

Niet als je het browser scherm smaller maakt.
De resolutie van een monitor staat er compleet los van (hoevaak ik deze discussie heb gevoerd met designers is ontelbaar).

[jandeman023]

DJMaze schreef op vrijdag 21 april 2017 @ 13:58:
[...]

Niet als je het browser scherm smaller maakt.
De resolutie van een monitor staat er compleet los van (hoevaak ik deze discussie heb gevoerd met designers is ontelbaar).

de website word alleen in full screen gebruikt. gedraaid op mijn lokale netwerk op maar 1 scherm. Het word een touchscreen scherm waar een lock op komt zodat je full screen niet kan uitschakelen.

Dus ik weet zeker dat de website altijd op een Full HD resolutie zal draaien en het venster niet kleiner word gemaakt