Twitter Bootstrap Question posted in

Bootstrap div- align to center of page-Twitter bootstrap

I’m trying to center a col-span-6 div to the center of the page using Twitter Bootstrap 3. Unfortunately, nothing I do is working. I used Firefox developer tools to discern the issue was most likely stemming from the fact that the col-span-6 class was floated left. Therefore, I added a style=”float: none !important;” to the col-span-6 element, but that did nothing.

Help!!

<div class="panel-group col-sm-6" style="float: none;">
<div class="panel panel-default">
    <div class="panel-heading">
        <h5 class="card-title">test</h5>
    </div>
    <div class="panel-body">
        <p class="card-text">test</p>
    </div>
</div>
</div>
Tags:

4

Answers


  1. 0

    You can align a div to center of the page using the CSS. Following CSS works for me. You can try using this CSS.

    .col-sm-6 {
          position: absolute;
	  margin: auto;
	  top: 0;
	  right: 0;
	  bottom: 0;
	  left: 0;
	  width: 100px;
	  height: 100px;
	  background-color: #ccc;
	  border-radius: 3px; 
	  text-align: center;
}
    <div class="panel-group col-sm-6">
   <div class="panel panel-default">
	 <div class="panel-heading">
            <h5 class="card-title">test</h5>
         </div>
         <div class="panel-body">
            <p class="card-text">test</p>
         </div>
   </div>
</div>
    Login or Signup to reply.
  2. 0

    You can use display: flex for this to handle alignment in a easier way. I have done a sample code below. Hope it helps you

    HTML

    <div class="panel-group col-sm-6">
<div class="panel panel-default d-flex h-100">
    <div class="panel-heading">
        <h5 class="card-title">test</h5>
    </div>
    <div class="panel-body">
        <p class="card-text">test</p>
    </div>
</div>
</div>

    CSS

    .d-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center
}

.h-100 {
  height: 100vh !important;
}

    JS Fiddle Link: https://jsfiddle.net/SJ_KIllshot/bhgx3yzv/

    Login or Signup to reply.
  3. 0

    I’m not sure but it seems to me that you wanted to achieve this effect:

    .super-center {
  margin: 0 auto !important;
  float: none !important;
}
 
    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="super-center panel-group col-sm-6">
<div class="panel panel-default">
    <div class="panel-heading">
        <h5 class="card-title">test</h5>
    </div>
    <div class="panel-body">
        <p class="card-text">test</p>
    </div>
</div>
</div>

    It was enough to add to your div’s: margin: 0 auto;

    Login or Signup to reply.
  4. 0

    Use column offset with “col-sm-6” to make it in center. Here is an example:

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="panel-group col-sm-6 col-sm-offset-3">
	<div class="panel panel-default">
	    <div class="panel-heading">
	        <h5 class="card-title">test</h5>
	    </div>
	    <div class="panel-body">
	        <p class="card-text">test</p>
	    </div>
	</div>
</div>

    It automatically push the column in center.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search