Colocando um conteiner lado a lado


(Adnan dos Santos de Pinho) #1

Boa Noite, estou com uma dúvida, quero colocar o seguinte container lado a lado, quero usar 3 desse em uma página, mais só fica um embaixo do outro

codigo

<div class="row">
        <div class="col-sm-4">
            <div class="news">
                <div class="img-figure">
                    <div class="cat">fashion</div>
                    <img src="images/blabbla.jpg" class="img-responsive">
                </div>  

                <div class="title">
                    <h1>The start of the web and web design</h1>
                </div>
                <p class="description">
                    If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden...
                </p>

                <p class="more">
                    <a href="#">read more</a><i class="fa fa-angle-right" aria-hidden="true"></i>
                </p>
        </div>


        </div>
</div>

(Luã Ciceri Schwertner) #2

Está correto o seu código, é só repetir a conteúdo a div com a class col-sm-4. Segue um exemplo:

<div class="row">
    <div class="col-sm-4">
        <div class="news">
            <div class="img-figure">
                <div class="cat">fashion</div>
                <img src="images/blabbla.jpg" class="img-responsive">
            </div>  
            <div class="title">
                <h1>The start of the web and web design</h1>
            </div>
            <p class="description">
                If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden...
            </p>
            <p class="more">
                <a href="#">read more</a><i class="fa fa-angle-right" aria-hidden="true"></i>
            </p>
        </div>
    </div>
    <div class="col-sm-4">
        <div class="news">
            <div class="img-figure">
                <div class="cat">fashion</div>
                <img src="images/blabbla.jpg" class="img-responsive">
            </div>  
            <div class="title">
                <h1>The start of the web and web design</h1>
            </div>
            <p class="description">
                If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden...
            </p>
            <p class="more">
                <a href="#">read more</a><i class="fa fa-angle-right" aria-hidden="true"></i>
            </p>
        </div>
    </div>
    <div class="col-sm-4">
        <div class="news">
            <div class="img-figure">
                <div class="cat">fashion</div>
                <img src="images/blabbla.jpg" class="img-responsive">
            </div>  
            <div class="title">
                <h1>The start of the web and web design</h1>
            </div>
            <p class="description">
                If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden...
            </p>
            <p class="more">
                <a href="#">read more</a><i class="fa fa-angle-right" aria-hidden="true"></i>
            </p>
        </div>
    </div>
</div>