Menu
I need my layout to be at the center of mobile devices or tablets. Here is my HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Cart</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="row center-block">
<div class="row">
<div class="row">
<div class="col col-sm-1">
<img class="image" alt="" src="https://i.sstatic.net/YKNC5.jpg" />
</div>
<div class="col col-sm-11">
<div class="row">
<div class="row">
<h3 class="col col-sm-12">Samsung Galaxy S5</h3>
</div>
<div class="row">
<span class="col col-sm-12">My Products Avaialble online and in stores</span>
</div>
<div class="row">
<span class="col col-sm-12">Seller: My Product</span>
</div>
<div class="row">
<span class="col col-sm-12">Quantity:
<input type="number" />
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>
But this is mess up on mobile. I also added me a tag. Please help me to make items in center on mobile an tablets. JsBin http://jsbin.com/luxorapowe/1/
461
As mentioned before. You should place everything in a .container or .container-fluid. And don't nest a .row directly into another.
For centering the content on smaller devices just use a media query like:
@media only screen and (max-width: 768px) {
.container-fluid
{
text-align: center;
}
}
See this jsbin for example: http://jsbin.com/pukupejehu/1/edit?html,css,output
112
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
