How do I center an 8 column Div in Bootstrap

HTML-CSS
1

I’m new to Bootstrap and frankly my CSS isn’t fabulous, so apologies for the possible stupid question.

I’m trying to center an entire DIV of 8 columns on a page. (Responsive) How is that done?

| <-div -> |

I’ve seen align-text-centre but that works with the text in the actual div, it doesn’t centre the actual div.

I realise in std css I could use margin: auto but how does one do this in Bootstrap?

Thank you!

	<div class="row">

	<div class="col-md-8">
				Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
				sed do eiusmod tempor incididunt ut labore et 
				dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
				exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
				Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore 
				eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt 
				in culpa qui officia deserunt mollit anim id est laborum 

				</div>
	</div>
2

Hello there,

Have a look at this site. This is what I frequently use, from day-to-day: https://hackerthemes.com/bootstrap-cheatsheet/

What you want is the parent div to be responsive (a.k.a. display: flex;), in BootStrap: d-flex.

Hope this helps

3

You can use the mx-auto class.

<div class="row">
  <div class="col-md-8 mx-auto">
    <!-- content -->
  </div>
</div>
4

Well that was a challenge! I feel rather embarrassed I didn’t dig a little harder.

THank you lasjorg!!

Greg.

1 Like
5

Happy to help.

Don’t feel bad, there are a lot of classes in Bootstrap and the docs can be a bit of a pain to dig through if you don’t know what you are looking for. The mx-auto class is one of the classes you will remember pretty fast, as auto margin in a flexbox based grid system is very handy.

6

Thank you Sky020 , the cheat-sheet is bookmarked and will be thoroughly used.