I simply want to center text in a div.
I've found center-block to no avail,
also text-align to no avail...
<div class="row">
<div class="col-xs-4">
<span style="background:black; color:white">
Ad Analytics and Attribution.
</span>
</div>
<div class="col-xs-4">
<div class="center-block">
<span style="background:black; color:white">
Addressable Audiences.
</div>
</div>
<div class="col-xs-4">
<span style="background:black; color:white">
Affiliate Apps.
</div>
</div>
You're looking for class="text-center" -- http://getbootstrap.com/css/#type-alignment
Use .text-center for span to make the text center
Reference URL
Related
I'm working on making front end design for someone but I don't have access to the css file or classes, so I can't see what's causing the container align left.
I'm looking to center the container on screen. What would be best approach? I tried wrapping div with text-align: center !important; that didn't work.
<div class="portlet-content">
<div class="portlet-content-container">
<div class="portlet-body">
<div>
<div class="container">
<div class="biography-view">
<div class="biography-item col-md-6">
<div style="border-style:none">
<div class="biographyimage" style="background-image:url(http://www.math.uni-frankfurt.de/~person/_4170854.jpg);"> </div>
<div class="caption biography-profile">
<div class="biography-profile-content">
<h3 class="full-name">Name</h3>
<p class="person-title">Company Name</p>
<p class="person-title"><strong>Person Title</strong></p>
<div class="person-biography">Biography</div>
<div class="person-biography collapse" id="readmore">More Person Info</div>
<a class="read_more" data-target="#readmore" data-toggle="collapse">Read More</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
In a CSS block for the container, you can center it as follows:
margin-left: auto;
margin-right: auto;
Use inline styles <div class="portlet-content" style="text-align:center;"> or somthing yours based on css specificity mozila MDN
I am usually able to do this. But for some reason everything I've tried just isn't working.
I've tried
<div class="row">
<div class="col-md-8">
<button>Toronto</button>
<button>Markham</button>
<button>Petawawa</button>
</div>
<div class="col-md-4">
<p>date</p>
<p>date</p>
<p>date</p>
</div>
</div>
And similar variations, but I can't seem to get the date and the event location to line up.
The code where the issue is occuring:
<div id="Location">
<div class="container">
<div class="row">
<div class="col-md-6 col-xs-12 aboutCopyContainer">
<p class="copyHeader" style="font-family: testFont;">Locations</p>
<p class="faqContent">Fall for the FEAST at an event near you!</p>
<div class="row">
<div class="col-md-6">
<div class="btnLocationCont">
<button class="btn btn-primary btn-lg locationBtn locationButtonText" style="font-family: AvenirNextLTPro-Condensed;" onclick="window.location.href='http://convio.cancer.ca/site/PageNavigator/UFE_ON_Oktoberfeast_Toronto.html'">Toronto</button>
<div class="locationDateCont">
<p class="locatDay eventTimeBut">14</p>
<hr style="margin:0px;" />
<p class="locatMonth eventTimeBut">Oct</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="btnLocationCont">
<button class="btn btn-primary btn-lg locationBtn locationButtonText" style="font-family: AvenirNextLTPro-Condensed;" onclick="window.location.href='http://convio.cancer.ca/site/PageNavigator/UFE_ON_Oktoberfeast_Petawawa.html'">Petawawa</button>
<div class="locationDateCont">
<p class="locatDay eventTimeBut">7</p>
<hr style="margin:0px;"/>
<p class="locatMonth eventTimeBut">Oct</p>
</div>
</div>
<div class="btnLocationCont">
<button class="btn btn-primary btn-lg locationBtn locationButtonText" style="font-family: AvenirNextLTPro-Condensed;" onclick="window.location.href='http://convio.cancer.ca/site/PageNavigator/UFE_ON_Oktoberfeast_Markham.html'">Markham</button>
<div class="locationDateCont">
<p class="locatDay eventTimeBut">22</p>
<hr style="margin:0px;"/>
<p class="locatMonth eventTimeBut">Oct</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Here is the JS Fiddle of what's happening:
JSFiddle
and this is the website (under Locations section) to give you a better idea of what I'm trying to do (css styling etc applied).
Oktoberfeast Locations
Any suggestions are greatly appreciated! thank you for your time
You added fixed width inside bootstrap column child. And that width together with other element width exeeded bootsrap column width, so the class locationDateCont appeared underneath:
So, in your CSS file, remove that width from that class, and add this:
.btnLocationCont {
width: auto;
}
Hope this helps!
You probably don't want to do this that way. Reason being is on mobile devices they won't match up.
To keep them together and display on desktop and mobile you could do something like this:
<div class="row">
<div class="col-md-4">
<button>Toronto</button>
<p>date</p>
</div>
<div class="col-md-4">
<button>Markham</button>
<p>date</p>
</div>
<div class="col-md-4">
<button>Petawawa</button>
<p>date</p>
</div>
</div>
Fiddle:
https://jsfiddle.net/8t5mjhf8/4/
EDIT: To make sure the p's stay next to the buttons you need the following CSS. You will want to assign a class to the p's as to no interfere with other paragraphs.
p {
display: inline;
}
I want the three div containers to line up side by side with a max-width of 1044px. I tried using col-md-4, because I have margin:20px, it pushed the third div container to the second row. I read up online, some people suggested using a div class="row", I tried that, end result is the same.
Here is my HTML:
<div class="engineering-section col-xs-12">
<div class="engineering-section-title title-text text-center">Engineering</div>
<div class="row">
<div class="card-container">
<div class="card-section col-md-4">
<div class="mdl-card__media">
<img src="img/engineer-1.jpg">
</div>
<div class="mdl-card__supporting-text">
<span class="mdl-typography--font-light mdl-typography--subhead">V8.8 aspenONE Enginnering Suite (May 2015)</span>
<div class="checksum">
<a class="info_checksum" href="#">Checksum</a>
</div>
</div>
<div class="card_actions">
<a class="card-links" href="#">
Download Now
<i class="fa fa-chevron-right"></i>
</a>
</div><!--end card_actions-->
</div><!--end mdl-cell-->
<div class="card-section col-md-4">
<div class="mdl-card__media">
<img src="img/engineer-2.jpg">
</div>
<div class="mdl-card__supporting-text">
<span class="mdl-typography--font-light mdl-typography--subhead">V8.8 aspenONE Process Manuals and Process Tools</span>
<div class="checksum">
<a class="info_checksum" href="#">Checksum</a>
</div>
</div>
<div class="card_actions">
<a class="card-links" href="#">
Download Now
<i class="fa fa-chevron-right"></i>
</a>
</div><!--end card_actions-->
</div><!--end mdl-cell-->
<div class="card-section col-md-4">
<div class="mdl-card__media">
<img src="img/engineer-3.jpg">
</div>
<div class="mdl-card__supporting-text">
<span class="mdl-typography--font-light mdl-typography--subhead">Aspen License Deployment Assistant</span>
<div class="checksum">
<a class="info_checksum" href="#">Checksum</a>
</div>
</div>
<div class="card_actions">
<a class="card-links" href="#">
Download Now
<i class="fa fa-chevron-right"></i>
</a>`enter code here`
</div><!--end card_actions-->
</div><!--end mdl-cell-->
</div><!--end row-->
</div><!--end card-container-->
Remove custom styles of margin from card-section class. It will work
You have to follow these 3 rules :
Rows must be placed within a .container (fixed-width) or
.container-fluid (full-width) for proper alignment and padding.
Use rows to create horizontal groups of columns.
Content should be placed within columns, and only columns may be immediate children of rows.
It should look like this :
<div class="container-fluid"><!--<div class="container">-->
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
</div>
See this link for more information about the Bootstrap responsive design :
http://getbootstrap.com/css/
You are doing wrong here
<div class="card-section col-md-4">
Put card-section inside col-md-4
<div class="col-md-4">
<div class="card-section">
it can give you the space between 3 cols and you can style the content too
and remove margin: 20px; it's unnecessary now.
Fiddle example
I want my date picker to be in the middle of the page, eg. the line where I have: <div class="center-block text-center datepicker"></div>
Obviously center-block and text-center I tried already - but neither change anything. And with the offset it just makes it close to the centre without being perfectly centre aligned.
What do I need to do?
Thanks
<div class='row'>
<div class='col-sm-12'>
<div class='page-header page-header-with-icon mg-t'> <i class='fa-icon-calendar'></i>
<h2>Calendar</h2>
</div>
<div class="row">
<div class="col-sm-4 col-sm-offset-4">
<div class="center-block text-center datepicker"></div>
</div>
</div>
</div>
</div>
Try something like this:
<div class="col-sm-12">
<div class="datepicker"></div>
</div>
Then give the date picker something like:
.datepicker {
display:inline-block;
margin:0 auto;
}
I haven't tested this, but it would be where I would start.
style="text-align:center;" shall do the trick no? I tested and for me, the "CALENDAR" text is centered
<div class="col-sm-12">
<div class="page-header page-header-with-icon mg-t" style="text-align:center;">
<i class="fa-icon-calendar"></i>
<h2>Calendar</h2>
</div>
<div class="row">
<div class="col-sm-4 col-sm-offset-4">
<div class="center-block text-center datepicker"></div>
</div>
</div>
</div>
</div>
This is what should solve your problem. Add it somewhere in your custom stylesheet and change the width % to what suits your design.
.datepicker-inline {
width: 20%;
}
I use bootstrap on my current project, it's working fine but only one glitch:
I have 3 col-sm-6 next to each other, when the second col-sm-6 is longer than the first, third col-sm-6 moves to left and a gap appears between first and third one.
I have 2 points to ask about:
Is it possible / how to remove that gap.
Is it possible / how to fix the third .col-sm-6 .tasks-panel to left.
Here is 2 images demonstrate what problem I have:
Second col-sm-6 is short:
Second col-sm-6 is longer than the first:
My html structure goes like this:
<h4><span data-head-year></span> <span data-head-month></span></h4>
<a class="pull-right" id="today"><div class="btn btn-primary" style="margin:3px">Today</div></a>
</div>
<hr style="margin: 20px 0"/>
<div class="day-headers">
<div class="day header">Mon</div>
<div class="day header">Tue</div>
<div class="day header">Wed</div>
<div class="day header">Thu</div>
<div class="day header">Fri</div>
<div class="day header">Sat</div>
<div class="day header">Sun</div>
</div>
<div class="days" data-group="days">
<!-- the place where days will be generated -->
</div>
</div>
<!-- Responsive calendar - END -->
</div>
Outlets to visit
<div class="template outlet-wrapper" style="display: none">
<div class="outlet-header">
<div class="col-xs-6">
<h4 class="outlet-name"></h4>
</div>
<div class="col-xs-6 text-right">
<h5 class="tools" style="display: none">
<i class="icon-repeat repeat"></i>
<span class="glyphicon glyphicon-remove remove"></span>
</h5>
</div>
</div>
<div class="clearfix"> </div>
<div class="outlet-body">
<div class="col-sm-6">
Time to reach: <spane class="time-to-reach"></spane>
</div>
<div class="col-sm-6">
Time to leave: <span class="time-to-leave"></span>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="panel-footer">
<button class="btn btn-primary pull-right" id="add-outlet"> Add Visit </button>
<div class="clearfix"></div>
</div>
</div>
Tasks List
</div>
<div class="panel-footer">Panel Footer</div>
</div>
Sorry for bad format, I don't know why stackoverflow editor breaks my html code; I have tried (Ctrl + K, <pre><code>) but none of them worked !
If you're interested in seeing my code properly, please show my post in editor.
Thanks in advanced.
Update:
A Codepen is available here, press add visit to see what happens if second column is long.
Have you tried to apply "pull-right" to the "col-sm-6" container of "panel panel-primary outlets-panel"?
<div class="col-sm-6 pull-right">
<div class="panel panel-primary outlets-panel">
<div class="panel-heading">
...
Forked Codepen
You'll still have to fix the above space of the "tasks list" container, but that should be trivial.