How to make 3d div responsive with bootstrap? as if it had left the div?

Question

How to make 3d div responsive with bootstrap? as if it had left the div?

Navigation

#1 by (1 votes)

0

I need the site to be responsive.

I'm using bootstrap.

Just the way it looks in the image below:

->myHTMLcode<-

<divclass="col-sm-4 ">
                    <div class="">
                        <img class="img-responsive" src="assets/images/menufixo-logo.png" alt="">

                    </div>
                </div>
                <div class="col-sm-4 ">
                    <div class="porduct-box">
                        <img class="img-responsive" src="assets/images/redes.png" alt="">

                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="porduct-box">
                        <img class="img-responsive" src="assets/images/menufixo-login.png" alt="product">

                    </div>
                </div>
            </div>

html css layout-responsivo bootstrap-3

asked by anonymous 16.03.2017 / 22:54

1 answer

Python - Module: Tkinter - window manipulation IF MariaDB phpmyadmin

score 1 · Answer 1

Split your grid layout as suggested by the bootstrap documentation. With this in mind, your menu will be in the row of the grid, the box of social networks along with the login box in the 2nd row of the grid, divided by 2 grids of 6 columns each (col-md- 6).

Something like:

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <img class="img-responsive" src="assets/images/menufixo-logo.png" alt="">
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <img class="img-responsive" src="assets/images/redes.png" alt="">
        </div>
        <div class="col-md-6">
            <img class="img-responsive" src="assets/images/menufixo-login.png" alt="product">

        </div>
    </div>
</div>

Remembering some rules:

Every row must be within 1 container.
Every row must have up to 12 columns.
Use col-md and col-lg for larger screens and col-sm and col-xs for smaller screens (smartphones ex.)

codepen.io/CompilaMente/pen/JWmNBV

To create the 3D effect, you can add CSS in the boxes of your product-box classes