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?


<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>


Search field


Search field


Search field


Search field



<!-- 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



The most important thing to remember about Bootstrap is that each row must have columns that add up to 12. Instead of putting 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

record elements outputted inside of your PHP loop.


col-sm-6


row


col-6




This can be seen in the following:















Search




Displaying ### results



</div>


Search field


Search field


Search field


Search field



<!-- 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>



Also, note that col-6 will apply to all widths in Bootstrap 4, whereas col-sm-6 will only apply to widths larger than 575px:


col-6


col-sm-6



Grid System



It appears you've got mismatched number of columns.



I suspect this bit...





should be...





is this you want:











Search




Displaying ### results



</div>


Search field


Search field


Search field


Search field



<!-- 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>



https://jsfiddle.net/48n2hvyd/3/



Thanks for or your help. After reading your answers I worked it out. This is what I needed:


<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>


Search field


Search field


Search field


Search field







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>





Sigh. When is css going to have columns.
– Magearlik
Jul 4 at 1:30






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.

Popular posts from this blog

PHP contact form sending but not receiving emails

PHP parse/syntax errors; and how to solve them?

iOS Top Alignment constraint based on screen (superview) height