Menu
how do I achive this in bootstrap. I have a 3 column and want to stay 3 column be it on mobile or desktop.
<div class="container">
<div>
<h1>Example - 3 column div</h1>
<div class="row">
<div class="col-xs-6 col-sm-4">First</div>
<div class="col-xs-6 col-sm-4">Second</div>
<div class="col-xs-6 col-sm-4">Third</div>
</div>
</div>
on desktop
First | Second | Third
on mobile it become like this
First | Second
| Third
I want to achieve this on desktop and mobile
First | Second | Third
Here are the fiddle -> https://jsfiddle.net/y28ugzp6/
443
asked May 03 '26 09:05
<!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.1.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-fluid">
<p>You can define it using md,sm and xs</p>
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-4" style="background-color:lavender;">Java</div>
<div class="col-md-4 col-sm-4 col-xs-4" style="background-color:lavenderblush;">PHP</div>
<div class="col-md-4 col-sm-4 col-xs-4" style="background-color:lavender;">JQuery</div>
</div>
</div>
</body>
</html>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
