Back
Theme:

Bootstrap: how to put the column in center?


How to put the column in center using bootstrap?

Date: Thursday, June 8, 2023
1 answers | 373 view(s)
by Mauricio Junior

Answers

There are some examples:

<div class="container">
		<div class="row">
	        <div class="col-sm-6 mx-auto">
	            <!-- Column content -->
	        </div>
	</div>
</div>

<div class="container">
		<div class="row justify-content-center">
    		<div class="col-sm-6">
        			<!-- Column content -->
    		</div>
		</div>
</div>

<div class="container">
		<div class="row">
    		<div class="col-xs-6 col-xs-offset-3">
        			<!-- Column content -->
    		</div>
		</div>
</div>

/* CSS code */
.col-centered{
		float: none;
		margin: 0 auto;
}

<!-- HTML code -->
<div class="container">
		<div class="row">
    		<div class="col-xs-7 col-centered">
        			<!-- Column content -->
    		</div>
		</div>
</div>

I hope it can help you. mauriciojunior.net

Thursday, June 8, 2023

Mauricio Junior


25