opc_loader

Menu

Content Sjabloon

Deze pagina functioneert als een content sjabloon. Dit betekent dat deze pagina is ontworpen als een basisstructuur voor het maken van nieuwe content. Het bevat een aantal standaard elementen en indelingen die kunnen worden aangepast en uitgebreid om specifieke inhoud te creƫren.



1 rij 4 kolommen

    
<div class="container">
    <div class="row">
        <!-- categorie-->
        <div class="d-flex justify-content-center align-items-center col-xs-6 col-md-3">
            <div class="card animation__opacity">
                <div class="card-img-top">
                    <a href="/">
                         <img src="/images/placeholders/image_missing_vierkant.png" width="250" height="250" alt="altTekst"/>
                     </a>
                </div>

                <div class="card-body">
                    <div class="d-flex justify-content-center align-content-center">
                        <a href="/">
                            <span>text</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- categorie-->
        <div class="d-flex justify-content-center align-items-center col-xs-6 col-md-3">
            <div class="card">
                <div class="card-img-top">
                    <a href="/">
                        <img src="/images/placeholders/image_missing_vierkant.png" width="250" height="250" alt="altTekst"/>
                    </a>
                </div>

                <div class="card-body">
                    <div class="d-flex justify-content-center align-content-center">
                        <a href="/">
                            <span>text</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- categorie-->
        <div class="d-flex justify-content-center align-items-center col-xs-6 col-md-3">
            <div class="card animation__opacity">
                <div class="card-img-top">
                    <a href="/">
                        <img src="/images/placeholders/image_missing_vierkant.png" width="250" height="250" alt="altTekst"/>
                    </a>
                </div>

                <div class="card-body">
                    <div class="d-flex justify-content-center align-content-center">
                        <a href="/">
                            <span>text</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- categorie-->
        <div class="d-flex justify-content-center align-items-center col-xs-6 col-md-3">
            <div class="card animation__opacity">
                <div class="card-img-top">
                    <a href="/">
                        <img src="/images/placeholders/image_missing_vierkant.png" width="250" height="250" alt="altTekst"/>
                    </a>
                </div>

                <div class="card-body">
                    <div class="d-flex justify-content-center align-content-center">
                        <a href="/">
                            <span>text</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
    


2 rijen 4 kolommen

    
<div class="container">
    <div class="row">
        <!-- categorie-->
        <div class="d-flex justify-content-center align-items-center col-xs-6 col-md-3">
            <div class="card animation__opacity">
                <div class="card-img-top">
                    <a href="/">
                         <img src="/images/placeholders/image_missing_vierkant.png" width="250" height="250" alt="altTekst"/>
                     </a>
                </div>

                <div class="card-body">
                    <div class="d-flex justify-content-center align-content-center">
                        <a href="/">
                            <span>text</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- categorie-->
        <div class="d-flex justify-content-center align-items-center col-xs-6 col-md-3">
            <div class="card">
                <div class="card-img-top">
                    <a href="/">
                        <img src="/images/placeholders/image_missing_vierkant.png" width="250" height="250" alt="altTekst"/>
                    </a>
                </div>

                <div class="card-body">
                    <div class="d-flex justify-content-center align-content-center">
                        <a href="/">
                            <span>text</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- categorie-->
        <div class="d-flex justify-content-center align-items-center col-xs-6 col-md-3">
            <div class="card animation__opacity">
                <div class="card-img-top">
                    <a href="/">
                        <img src="/images/placeholders/image_missing_vierkant.png" width="250" height="250" alt="altTekst"/>
                    </a>
                </div>

                <div class="card-body">
                    <div class="d-flex justify-content-center align-content-center">
                        <a href="/">
                            <span>text</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- categorie-->
        <div class="d-flex justify-content-center align-items-center col-xs-6 col-md-3">
            <div class="card animation__opacity">
                <div class="card-img-top">
                    <a href="/">
                        <img src="/images/placeholders/image_missing_vierkant.png" width="250" height="250" alt="altTekst"/>
                    </a>
                </div>

                <div class="card-body">
                    <div class="d-flex justify-content-center align-content-center">
                        <a href="/">
                            <span>text</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- categorie-->
        <div class="d-flex justify-content-center align-items-center col-xs-6 col-md-3">
            <div class="card animation__opacity">
                <div class="card-img-top">
                    <a href="/">
                        <img src="/images/placeholders/image_missing_vierkant.png" width="250" height="250" alt="altTekst"/>
                    </a>
                </div>

                <div class="card-body">
                    <div class="d-flex justify-content-center align-content-center">
                        <a href="/">
                            <span>text</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- categorie-->
        <div class="d-flex justify-content-center align-items-center col-xs-6 col-md-3">
            <div class="card animation__opacity">
                <div class="card-img-top">
                    <a href="/">
                        <img src="/images/placeholders/image_missing_vierkant.png" width="250" height="250" alt="altTekst"/>
                    </a>
                </div>

                <div class="card-body">
                    <div class="d-flex justify-content-center align-content-center">
                        <a href="/">
                            <span>text</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- categorie-->
        <div class="d-flex justify-content-center align-items-center col-xs-6 col-md-3">
            <div class="card animation__opacity">
                <div class="card-img-top">
                    <a href="/">
                        <img src="/images/placeholders/image_missing_vierkant.png" width="250" height="250" alt="altTekst"/>
                    </a>
                </div>

                <div class="card-body">
                    <div class="d-flex justify-content-center align-content-center">
                        <a href="/">
                            <span>text</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- categorie-->
        <div class="d-flex justify-content-center align-items-center col-xs-6 col-md-3">
            <div class="card animation__opacity">
                <div class="card-img-top">
                    <a href="/">
                        <img src="/images/placeholders/image_missing_vierkant.png" width="250" height="250" alt="altTekst"/>
                    </a>
                </div>

                <div class="card-body">
                    <div class="d-flex justify-content-center align-content-center">
                        <a href="/">
                            <span>text</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>