Menu
I just can not understand how to arrange the blocks so that col-sm-3 was on the sides, and col-sm-6 in the center, but the html code should go that way.
<div class="col-sm-6" style="background-color:red; color:#fff;">center</div>
<div class="col-sm-3 pull-left" style="background-color:blue; color:#fff;">left</div>
<div class="col-sm-3 pull-right" style="background-color:green; color:#fff;">right</div>
the code itself is
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="col-sm-6" style="background-color:red; color:#fff;">center</div>
<div class="col-sm-3 pull-left" style="background-color:blue; color:#fff;">left</div>
<div class="col-sm-3 pull-right" style="background-color:green; color:#fff;">right</div>
</div>
</body>
</html>
873
Bootstrap V3 use float so the column are already left floated so only the pull-right will have an effect.
So why not simply change the order and don't forget row inside container (I changed sm by xs so we can see the result in the reduced snippet)
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-xs-3" style="background-color:blue; color:#fff;">left</div>
<div class="col-xs-6" style="background-color:red; color:#fff;">center</div>
<div class="col-xs-3" style="background-color:green; color:#fff;">right</div>
</div>
</div>And if you want to keep the same code consider upgrading to the V4 of bootstrap where you can easily handle this with flex and order:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-6 order-2" style="background-color:red; color:#fff;">center</div>
<div class="col-3 order-1" style="background-color:blue; color:#fff;">left</div>
<div class="col-3 order-3" style="background-color:green; color:#fff;">right</div>
</div>
</div>By the way, You can add some custom CSS with the V3 and your intial code to achieve what you want but I don't recommend (only use in case you cannot do any changes):
.custom {
display: inline-block;
float: none!important;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-xs-6 custom" style="background-color:red; color:#fff;">center</div>
<div class="col-xs-3 pull-left" style="background-color:blue; color:#fff;">left</div>
<div class="col-xs-3 pull-right" style="background-color:green; color:#fff;">right</div>
</div>
</div>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
