I’m learning the basics of Bootstrap, and I know that using col-md-4 will produce columns in the row div.
But I’m wondering how to display 3 columns within a div that’s limited in width?
For example, a generic row div displays from edge to edge. But my custom row would allow only a width of 1400px for
reading on big screens, and I want to display the 3 columns centered in that width.
I could use float left, or inline block. What’s the best way to do this?
Bootstrap is not my thing, but I will try to offer some guidance.
If you are interested in “best practice” I will say this; Don’t add in-line styles like this, use css.
If you are using Bootstrap, I assume you intend on a responsive design (you should do regardless of any frame work really) so don’t add fixed width like that. Instead of width: 1400px use max-width: 1400px or the page will become rigid and all that Bootstap bloat you loaded will be wasted.
If you are wanting a max width, I would probably put it on the outer container for the row, not inside the row like you have.
But I imagine there is a “Bootstrap” way of doing this, which comes to another point; If you are going to use a framework, then work with the framework and abide by its rules and ways of doing things.
If you don’t want to do things their way, don’t use the framework.
Hey thanks for such a fast response.
I will definitely code it in CSS, not inline.
I hadn’t thought of max-width, so thank you for the input!
Finally, I asked because I read on a forum where someone said to stay away from float left if possible.
I don’t know if that’s actually true or not. I just looked up a site that uses float left, and it’s very stable
and clear!
I do agree with you to stay with Bootstrap if I use the framework for it.
I would stick with the bootstrap structure and apply your max-width to the container which allows all the inner workings of bootstrap to work unaided
e.g.
Make sure the container is not nested inside any bootstrap structural elements and apply a special class to the container like so.
<div class="container-fluid special">
<div class="row">
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
</div>
</div>
</div>
Then just add a class for that special item.
.special {
max-width:1400px
}
Remember not to directly change the bootstrap structure using their pre-defined classes. Just add your own classes and over-ride where necessary.
As Sam said it begs the question as to why you want to use bootstrap and then not keep to its pre-defined set up? The container class is a max-width of 1170px by default (IIRC) so you could have just stuck with the basic bootstrap columns.
That does not mean you can’t bend certain elements to your will but if you find yourself doing this all the time then you haven’t grasped the reason for using bootstrap in the first place.
You do need a good grasp of html and css before you start messing around with it though or you will continually hit a brick wall.
I don’t know about bootstrap (I find it actually makes things more complicated than they need to be) but it doesn’t require much HTML or CSS. You’re right that float: left is not a very good way of achieving this.
You can either use display: flex on the container:
<main>
<div >
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
</div>
<div>
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
</div>
<div>
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
</div>
</main>
main {display: flex; max-width: 1400px}
main div:nth-child(1) {background: red; width: 15%}
main div:nth-child(2) {background: blue; width: 70%}
main div:nth-child(3) {background: green; width: 15%}
Or setting display: table on the container and table-cell on the columns:
main {display: table; max-width: 1400px}
main div {display: table-cell}
main div:nth-child(1) {background: red; width: 15%}
main div:nth-child(2) {background: blue; width: 70%}
main div:nth-child(3) {background: green; width: 15%}
Yes that’s the way I would have approached it if the OP wasn’t already using boostrap and as you say is pretty straight forward and simple.
However in bootstrap4 .col-md-4 is actually a flex item by default so the example I posted is already using flex and only needs the one rule added to produce the layout required so in this instance it is easier to stay within the bootstrap framework but of course may depend exactly on what the OP requires.
e.g.One class and one simple rule effect the changes required.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
.special {
max-width:1400px
}
</style>
</head>
<body>
<div class="container-fluid special">
<div class="row">
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
I’m not a fan of frameworks but if you are using them then you should in most cases abide by their rules.
It does become awkward when you add custom code if you don’t make sure you are outside of the grid as the elements in bootstrap are structured in a certain way (various padding and negative margins to affect gutters etc). Unless you know what you are doing then adding custom code can be awkward. That’s one of the reasons I advise beginners to learn html and css first before diving into a framework.
These days with flexbox available in all modern browsers and CSS grid gaining more ground then there’s not much need for a framework as far as layout is concerned. In a team though there are benefits to a standard approach and of course the resources instantly available (buttons, menus, modals and so on…).
Guys - thank you all so very much. Your expertise has inspired me a great deal.
The snippets really cleared up my question, and I’m motivated in a few areas.
Again, thanks so much. I’m truly impressed with your desire to provide some guidance.
I’m grateful!
Corey
