All geek questions in one place

Creating response divs in bootstrap

I am experimenting with bootstrap and this is the code I wrote:

<!doctype html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="./css/bootstrap.min.css"> <link rel="stylesheet" href="./css/bootstrap-theme.min.css"> <style type="text/css"> .row-centered { text-align:center; } .col-centered { display:inline-block; float:none; text-align:left; margin-right:-4px; } .pos{ position: relative; top: 240px; } </style> </head> <body> <div class="container"> <div class="row row-centered pos"> <div class="col-lg-8 col-centered"> <div class="well"></div> </div> <div class="col-lg-8 col-centered"> <div class="well"></div> </div> <div class="col-lg-8 col-centered"> <div class="well"></div> </div> </div> </div> </body> </html>

The output is as shown in the screenshot:
img But when I switch to the mobile screen, I get the following:
img1
I want divs to appear in the center with one over one on mobile screens. How can I do it? But he does not respond.

+6
source share
3 answers

you can use col-xs-12 in your div, add this to each div and it will work as you expect.

Live demo

  <body> <div class="container"> <div class="row row-centered pos"> <div class="col-lg-8 col-xs-12 col-centered"> <div class="well"></div> </div> <div class="col-lg-8 col-xs-12 col-centered"> <div class="well"></div> </div> <div class="col-lg-8 col-xs-12 col-centered"> <div class="well"></div> </div> </div> </div> </body>

More on bootstrap setup

+5
source

You can define multiple widths for screen sizes:

col-lg : large screen

col-md : middle screen

col-xs : small screen

In your example:

 <div class="container"> <div class="row row-centered pos"> <div class="col-lg-8 col-xs-12 col-centered"> <div class="well"></div> </div> <div class="col-lg-8 col-xs-12 col-centered"> <div class="well"></div> </div> <div class="col-lg-8 col-xs-12 col-centered"> <div class="well"></div> </div> </div> </div>
+3
source

What you did to him is not bad for me.
you just need to change the CSS as shown below:

  .row-centered { text-align:center; margin:0 auto; } .col-centered { display:block; float:none; } .pos { position: relative; top: 240px; }

If you want to make it smaller, simply reduce 8 to 7 or 6, and all this will be done with great care. Using col-lg is true for the big screen, and that would not force him to use it to improve the performance of mobile devices.

0
source

Source: https://habr.com/ru/post/983753/

More articles:


All Articles