Jak usunąć ramki i szare tło i dodać slider :)

Question

Witam mam problem korzystam z bootstrapa i nie mam pojęcia jak usunąć szare tło i ramki. Chcę żeby to 2 zdjęcie wyglądało jak pierwsze (kolor menu zmieniony już) a tekst żeby był po środku nie od lewej :D. I korzystając z okazji jak mogę zrobić że po dodaniu kolejnych 4 okienek (łącznie 8) nie bd się pojawiały wszystkie tylko bd się przesuwały automatycznie albo po kliknięciu taki jak by slider. Dzięki z góry za pomoc :) 

 

 

Answer 1

Może jakiś kod?

Inspekcja kodu, odpowiedzialnego za wygląd sekcji, wycięcie stylu odpowiedzialnego za border w core lub próba nadpisania border: inehrit !importatnt. Powinno zadziałać, choć to nie jest dobra praktyka. to n

W CSS jest to text-align , w BOOTSTRAP text-center. 2 sec pogooglowałem... Za tło również odpowiada klasa.

Czy to nie jest gotowy szablon?.

Co do slidera w BOOTSTRAP: owszem jest nazywa się Carousel.

https://kursbootstrap.pl/karuzela-slider/

Comments

Kod mam taki z szarym tłem sobie poradziłem zostały tylko ramki :(. W css nic nie zmieniałem.

<main class="text-center">

            <div class="container">
                <h2>Nowości</h2>
                <hr>
                <div class="row left-xs">
                    <div class="col-xs-6 col-sm-6 col-md-3">
                        <div class="thumbnail">
                            <img src="images/cs.jpg" alt="">

                            <div class="caption">
                                <h3>CS GO</h3>

                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at felis vitae metus tempus tristique egestas sed ligula. Quisque sit amet consequat justo. Curabitur varius turpis vel semper molestie. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ultrices magna et sodales blandit. Maecenas ullamcorper maximus sem, id. </p>
                                <a href="#" class="btn-link">Więcej</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-6 col-sm-6 col-md-3">
                        <div class="thumbnail">
                            <img src="images/league-of-legends.png" alt="">

                            <div class="caption">
                                <h3>LOL</h3>

                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at felis vitae metus tempus tristique egestas sed ligula. Quisque sit amet consequat justo. Curabitur varius turpis vel semper molestie. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ultrices magna et sodales blandit. Maecenas ullamcorper maximus sem, id. </p>
                                <a href="#" class="btn-link">Więcej</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-6 col-sm-6 col-md-3">
                        <div class="thumbnail">
                            <img src="images/gta5.jpg" alt="">

                            <div class="caption">
                                <h3>GTA</h3>

                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at felis vitae metus tempus tristique egestas sed ligula. Quisque sit amet consequat justo. Curabitur varius turpis vel semper molestie. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ultrices magna et sodales blandit. Maecenas ullamcorper maximus sem, id. </p>
                                <a href="#" class="btn-link">Więcej</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-6 col-sm-6 col-md-3">
                        <div class="thumbnail">
                            <img src="images/fal.jpg" alt="">

                            <div class="caption">
                                <h3>FAL</h3>

                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at felis vitae metus tempus tristique egestas sed ligula. Quisque sit amet consequat justo. Curabitur varius turpis vel semper molestie. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ultrices magna et sodales blandit. Maecenas ullamcorper maximus sem, id.</p>
                                <a href="#" class="btn-link">Więcej</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

 

---

.thumbnail{
  border:0;
}

 

---

Okej wielkie dzięki wszystko działa :)