im trying to postion items to be in the center of the div but it doesn't work
this is a picture for desired output
i don't know why the div items are going to left and the input text don't take the full length of the div
im also trying to add space between the text and the gear icon of the orange buttons
and this is my code :
<af:dialog contentWidth="400" type="none" id="aaa" modal="true">
<div class="row">
<div class="col-md-8 sm-b-b">
<div class="sm-padding-5">
<af:inputText inlineStyle="display: inline-block;width:100%" value="sohoooooooooooooooooo"
simple="true" id="it1"/>
</div>
</div>
<div class="col-md-4 sm-b-b">
<div class="sm-padding-5">
<af:button inlineStyle="display: inline-block;width:100%" text="Search" id="b1"></af:button>
</div>
</div>
</div>
<af:forEach var="node" items="#{bindings.ViewObj11.collectionModel}">
<div class="row">
<div class="col-md-12 sm-b-b">
<div class="sm-padding-5">
<af:link text="#{bindings.Value1.inputValue}" styleClass="btn btn-primary white" id="ot1">
<span aria-hidden="true" class="fa fa-gear"></span>
</af:link>
</div>
</div>
</div>
</af:forEach>
Try this Style in your style sheet
.sm-b-b{
margin: 0 auto;
text-align: center;
width: 100%;
}
I am working on removing the space between Front End Developer and About Me modal. It doesn't seem to to work when I used classes such as no gutter and removing the paddings.
Reference image
Does anyone have any ideas?
<header>
<div class="row no-gutters">
<div class="col-md-4 col-sm-12">
<img class="title-logo" src="./resources/images/logo.jpeg">
</div>
<div class="title-super col-md-4 col-sm-12 offset-md-4 text-uppercase text-right">
<h1>Terence Fan</h1>
<h4>Front-End Developer</h4>
<button type="button" class="btn btn-outline-dark button-style" data-toggle='modal' data-target="#AboutMe">About Me</button>
</div>
</div>
<div class="row">
<div class="col-md-12">
<hr>
</div>
</div>
</header>
I have the full Github source code here
Thanks in advance!
Try adding this code to your CSS.
.title-super .btn {
vertical-align: top;
}
set vertical-align: top to button-style
.button-style {
vertical-align: top;
}
working fiddle here
You can use .align-top bootstrap css class for vertical align element.
<button type="button" class="btn btn-outline-dark button-style align-top" data-toggle='modal' data-target="#AboutMe">About Me</button>
I must be missing something really simple here:
<div class="row">
<div class="col-lg-12">
<a href="/add" class="btn btn-primary">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add User
</a>
</div>
</div>
<div class="row">
<div class="col-lg-12" ng-show="users.busy">
<div class="spinner-loader center-block"></div>
</div>
</div>
I've used the bootstrap classes, including center-block. Yet it always looks like this:
Why isn't the spinner icon in the centre of the page?
There is a work around to your problem by changing some HTML as follows
<div class="row">
<div class="col-lg-12 text-center" ng-show="users.busy">
<span class="spinner-loader">Loading</span>
</div>
</div>
instead of <div> for spinner I took a <span> which will be centered horizontally because of text-center class to parent <div>.
You can try this:
<div class="row">
<div class="col-lg-12">
<a href="/add" class="btn btn-primary">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add User
</a>
</div>
</div>
<center>
<div class="row">
<div class="col-lg-12" ng-show="users.busy">
<div class="spinner-loader"></div>
</div>
</div>
</center>
Instead of using center-block, add text-center class
I ve been using the bootstrap col-md-offset css to center my divs. For example:
<div class=container>
<div class=row>
<div class=form-horizontal>
<div class="col-md-offset-4 col-md-4">
<div class="your div">
</div>
</div>
</div>
</div>
Your div will be responsive, thus as you resize the window the div will remain in the center of the window.
I am trying to center some text in the heading of a panel, along with a left-aligned button on the same row. The approach I'm currently taking works sort of OK for small widths, but as soon as the window gets to .col-sm territory (>750px) the text is no longer centered and instead seems to align right. Plus I'm not actually sure if this approach of trying to overlap a col-xs-1 and col-md-12 is really centering the text even for small window widths.
<div class="container">
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-8">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="container" style="padding:0;">
<div class="row">
<div class="col-xs-1">
<button type="button" class="btn btn-default btn-sm">Button</button>
</div>
<div class="col-md-12" style="text-align:center">Heading</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Here is a JSFiddle.
stdout, Hi there. You can actually have the Heading in the center if you like.
I mean actually centered in the full width. Your example is offset by 1 col.
I do it without that extra col offset and the button still to the left.
Have a look at this example in my Fiddle to see how the Header text is actually centered in the whole div.
It has a lot let cols/row etc.
I left one of the other examples above so you can see the difference.
Here is the CSS used for this example.
<style>
.align-left{
float:left !important;
}
.center-text-vert{
line-height:30px; /*height of the button*/
}
.center {
text-align: center;
margin-right: 55px; /*width from the left to the far right of the button */
}
</style>
<div class="container">
<div class="row ">
<div class="col-sm-8 col-sm-offset-2 ">
<div class="panel panel-primary ">
<div class="panel-heading">
<div class="center-text-vert">
<button type="button" class="btn btn-default btn-sm align-left">Button</button>
<div class="center">
Heading
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Try removing the container inside you panel and use pull-left class for your button and text-center class for your heading and see if that works for you.
<div class="container">
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-8">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<div class="col-xs-1">
<button type="button" class="btn btn-default btn-sm pull-left">Button</button>
</div>
<div class="col-xs-11 text-center">Heading</div>
</div>
</div>
</div>
What I guess you want is for the title to be full width at xs size and only take up a portion of the screen at sm and higher. To do that, remove the empty column and instead apply an offset. Also, note there are 12 columns so offsetting by 3 (i.e. 3 columns on the left and 3 on the right) means the middle column can only be 6 wide. I've set this one to be offset by 2 as an example. I've also fixed the inner columns to add up to 12 (although you should not nest container classes:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-offset-2 col-sm-8">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<div class="col-xs-1">
<button type="button" class="btn btn-default btn-sm">Button</button>
</div>
<div class="col-md-11" style="text-align:center">Heading</div>
</div>
</div>
</div>
</div>
</div>
</div>
How to center a row (12 column) in Bootstrap 3 ?
I do not want to use the offset
I am using this way but not worked.
.col-centered{
float: none;
margin: 0 auto;
}
<div class="row" style="max-width: 300px;">
<div class="col-md-12 col-xs-12 col-centered">
<div class="input-group">
<div class="input-group-btn">
<button id="ItemForSearch" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
All Items
<span class="caret"></span>
</button>
<ul id="NormalSearch" class="dropdown-menu customize-dropdown-menu">
<li> Test 1 </li>
<li> Test 2 </li>
<li> Test 3 </li>
<li> Test 4 </li>
</ul>
</div>
<!-- /btn-group -->
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</div>
</div>
Is there any solution to this? I have not an idea for this work.
Why not using the grid system?
The bootstrap grid system consist of 12 columns, so if you use the "Medium" columns it will have a 970px width size.
Then you can divide it to 3 columns (12/3=4) so use 3 divs with "col-md-4" class:
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
Each one will have 323px max width size.
Keep the first and the last empty and use the middle one to get your content centerd:
<div class="col-md-4"></div>
<div class="col-md-4">
<p>Centered content.</p>
</div>
<div class="col-md-4"></div>
What you are doing is not working, because you apply the margin: auto to the full-width column.
Wrap it in a div and center that one. E.g:
<div class="i-am-centered">
<div class="row">...</div>
</div>
.
.i-am-centered { margin: auto; max-width: 300px;}
http://www.bootply.com/93751
Its a cleaner solution anyway, as it is more expressive and as you usually don't want to mess with the grid.
I know this question was specifically targeted at Bootstrap 3, but in case Bootstrap 4 users stumble upon this question, here is how i centered rows in v4:
<div class="container">
<div class="row justify-content-center">
...
More related to this topic can be found on bootstrap site.
Instead of
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
You could just use
<div class="col-md-4 col-md-offset-4"></div>
As long as you don't want anything in columns 1 & 3 this is a more elegant solution. The offset "adds" 4 columns in front, leaving you with 4 "spare" after.
PS I realise that the initial question specifies no offsets but at least one previous answer uses a CSS hack that is unnecessary if you use offsets. So for completeness' sake I think this is valid.
you can use grid system without adding empty columns
<div class="col-xs-2 center-block" style="float:none"> ... </div>
change col-xs-2 to suit your layout.
check preview: http://jsfiddle.net/rashivkp/h4869dja/
We can also use col-md-offset like this, it would save us from an extra divs code. So instead of three divs we can do by using only one div:
<div class="col-md-4 col-md-offset-4">Centered content</div>
Simply use text-center class
<div class="row">
<div class="col-md-12">
<h3 class="text-center">Here Comes your Text</h3>
</div>
</div>
Add this to your css:
.row-centered {
text-align:center;
}
.col-centered {
display:inline-block;
float:none;
/* reset the text-align */
text-align:left;
/* inline-block space fix */
margin-right:-4px;
}
Then, in your HTML code:
<div class=" row row-centered">
<div class="col-*-* col-centered>
Your content
</div>
</div>
this peace of code can help you
<div class="row" style="display: flex; justify-content: center;"></div>
Try this, it works!
<div class="row">
<div class="center">
<div class="col-xs-12 col-sm-4">
<p>hi 1!</div>
</div>
<div class="col-xs-12 col-sm-4">
<p>hi 2!</div>
</div>
<div class="col-xs-12 col-sm-4">
<p>hi 3!</div>
</div>
</div>
</div>
Then, in css define the width of center div and center in a document:
.center {
margin: 0 auto;
width: 80%;
}
I use text-align-center in a row like this
<div class="row tac">
<h1>Centered content</h1>
</div>
<style>
.tac { text-align: center}
</style>
I use this peace of code and I have successeful
<div class="row center-block">
<div style="margin: 0 auto;width: 90%;">
<div class="col-md-12" style="top:10px;">
</div>
<div class="col-md-12" style="top:10px;">
</div>
</div>
Instead of trying to center div's, just add this to your local css.
.col-md-offset-15 {
margin-left: 12.4999999%;
}
which is roughly offset-1 and half of offset-1. (8.333% + 4.166%) = 12.4999%
This worked for me.