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

Asked

Viewed 1,445 times

0

I need the site to be all responsive.

I’m wearing a bootstrap.

the way it is in the image below:

div 3d

--> my HTML code<--

                <div class="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 bootstrap-3 responsive-layout

  • How is the structure of your HTML?

  • is the basic, all inside the container. This attached image is not html, just a photo

  • Enter the code you have...

  • put in question

  • Bootstrap is a framework that is an excellent ally of responsiveness, current need of the Web, to be able to reach all the smart devices of today. Responsiveness is based on the grid system. Columns/blocks that position and shape change according to screen/container size. I suggest this article may be useful. And it is in English. http://websocialdev.com/understanding/

1 answer

1

Divide your layout into grid, as the bootstrap documentation suggests. With this in mind, Your menu will be in the 1st row (Row) of the grid, the social networks box together with the login box in the 2nd row (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 a few rules:

  • All Row must be inside 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 (ex smartphones.)

codepen.io/Compilamente/pen/Jwmnbv

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

Browser other questions tagged html css bootstrap-3 responsive-layout

You are not signed in. Login or sign up in order to post.