Bootstrap sass how to center content div in a col-md

HTML & CSS
1

HTML

<div class="morra-header">
	<div class="morra-sub-header">
    		<h1>Header</h1>
    	</div>
</div>
    
<div class="morra-content">
	<h2>Sticky footer with fixed navbar</h2>
 </div>

<div class="morra-footer">
 	<div class="morra-sub-footer">
 		<div class="row">
		 	<div class="col-md-4 center-block">
		 		<div class="paper">.col-md-1</div>
		        	</div>
		        	<div class="col-md-4 center-block">
	  			<div class="rock">.col-md-1</div>
	  		</div>
	  		<div class="col-md-4 center-block">
	  			<div class="scissor">.col-md-1</div>	
	  		</div>	
  		</div>	
      	</div>
</div>

SCSS

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}

.morra-header{
  @include clearfix;
  background-color: #f5f5f5;
  margin-bottom: 0;
  min-height: $navbar-height;
  left: 0;
  padding-left: 0; 
  position: fixed;
  right: 0;
  top: 0;
  z-index: $zindex-navbar-fixed; 
}
.morra-sub-header{
  @include clearfix;
  @extend .container;
}
.morra-content{
 margin-top: 60px;
 @extend .container;
}

.morra-footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}
.morra-sub-footer {
  @include clearfix;
  @extend .container;
}
.my{
  background: grey;
}
.morra-item{
  height: 52px;
  width: 52px;
  background: #ff00ff;
}
.paper {
  @extend .morra-item;
  
}
.rock {
  @extend .morra-item;
}
.scissor{
  @extend .morra-item;
}

My goal is center the content in the col-md-4 element
I don’t understand why on earth it doesn’t work :frowning:
Can help me please ?

END UP but I’m waiting for a better way

<div class="morra-footer">
 	<div class="morra-sub-footer">
 		<div class="row">
		 	<div class="col-md-4 morra-center">
		 		<div class="paper">.col-md-1</div>
		        	</div>
		        	<div class="col-md-4 morra-center">
	  			<div class="rock">.col-md-1</div>
	  		</div>
	  		<div class="col-md-4 morra-center">
	  			<div class="scissor">.col-md-1</div>	
	  		</div>	
  		</div>	
      	</div>
</div>

.morra-center{
  text-align: center;
}
.morra-item{
  background: #ff00ff;
  display: inline-block;
  height: 52px;
  width: 52px;
}
3

Hi, whisher.

You’ll need to post plain CSS for us to evaluate the problem.

Thanks.

4

Bootstrap has a default .text-center class. :smile:

5

I wonder if any of these techniques will help?
Centering in CSS: A Complete Guide

Cordially, David

6

@ronpat I’m sorry next time :smile:
@bpartch thanks but it’s not my case (no inline-block)

.text-center {
  text-align: center;
}

@thewebwiz thanks for the useful link

7

Are you trying to center the DIV inside col-md-4? Text-align:center; only applies to text. If you wanted to center the DIV inside col-md-4 wouldn’t you need to apply “margin:0 auto;” to the div?

If so here is the CSS to do that…

.morra-center div {
  margin:0 auto;
  text-align:center;
}
8

@Varcoe
It’s my first attempt but it doesn’t work (at least inside bootstrap may be because of the float )
Thanks the same :smile:

9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.