Bootstrap Display Columns Next To Each Other
Bootstrap Display Columns Next To Each Other
I am writing and example application using bootstrap 4 and php. I am trying to get two columns to display next to each other at a certain breakpoint. Here is an example. What can I do to solve this?
Search field Search field Search field Search field The most important thing to remember about Bootstrap is that each row must have columns that add up to 12. Instead of putting This can be seen in the following: Search field Search field Search field Search field Also, note that It appears you've got mismatched number of columns. I suspect this bit... should be... is this you want: Search field Search field Search field Search field https://jsfiddle.net/48n2hvyd/3/ Thanks for or your help. After reading your answers I worked it out. This is what I needed: Search field Search field Search field Search field<html>
<head>
<!--bootstrap 4.0-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
</head>
<body>
Search
Displaying ### results
</div>
<!-- at col-sm-6 I want two columns to display. how can i solve this? -->
Record
<?php
}
?>
</div>
</div>
</div>
<!--bootstrap 4 javascript-->
https://code.jquery.com/jquery-3.3.1.slim.min.js
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js
https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js
</body>
</html>
4 Answers
4
col-sm-6 on each of your record container, what you'll want to do is instead put row on that, and add col-6 to each of the col-sm-6rowcol-6
Search
Displaying ### results
</div>
<!-- at col-sm-6 I want two columns to display. how can i solve this? -->
Record
Record
Record
Record
Record
Record
Record
Record
Record
Record
</div>
</div>
</div>
<!--bootstrap 4 javascript-->
https://code.jquery.com/jquery-3.3.1.slim.min.js
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js
https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js
</body>
</html>col-6 will apply to all widths in Bootstrap 4, whereas col-sm-6 will only apply to widths larger than 575px:col-6col-sm-6
Search
Displaying ### results
</div>
<!-- at col-sm-6 I want two columns to display. how can i solve this? -->
Record
<?php
}
?>
</div>
</div>
</div>
<!--bootstrap 4 javascript-->
https://code.jquery.com/jquery-3.3.1.slim.min.js
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js
https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js
</body>
</html><html>
<head>
<!--bootstrap 4.0-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
</head>
<body>
Search
Displaying ### results
</div>
Record
<?php
}
?>
</div>
</div>
</div>
</div>
<!--bootstrap 4 javascript-->
https://code.jquery.com/jquery-3.3.1.slim.min.js
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js
https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js
</body>
</html>
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
Sigh. When is css going to have columns.
– Magearlik
Jul 4 at 1:30