Menu
I'm experimenting with bootstrap and this is the code which 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 screen shot:
But when I convert to mobile screen, I get like this:
I want the divs to appear in center with one above one in mobile screens as well. How can I do it?
But it isn't responsive.
753
you can use col-xs-12 in your div's , add this to each div and it will work like you expect it
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 about bootstrap grid option
179
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>
What you have done with it, for me, is not bad.
you just need to modify the CSS, as follows:
.row-centered {
text-align:center;
margin:0 auto;
}
.col-centered {
display:block;
float:none;
}
.pos {
position: relative;
top: 240px;
}
When you would like to make it smaller, just reduce 8 to 7 or 6 and it's all done responsively. Using col-lg is true for large screen and it would not make it stuck using it for mobile performance.
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
