I have a very simple piece of code that I am trying to get to work and its giving me issues.
I have a grid of 9 and 3 set up. 9 being the tool title and 3 being the status of the tool.
In the code below however, even though I am using pull-right to get the content to the right side of the col-md-3 the content within that isn't aligned to the right like I expect it to be.
Here is a fiddle: https://jsfiddle.net/p5yctnw0/2/
<div class="container-fluid">
<div class="row">
<div class="col-md-9">
<h1 class="toolTitle">Tool Title <small class="toolSubTitle">#244</small></h1>
</div>
<div class="col-md-3"><span class="pull-right"><h4>Active</h4>(dates & replacement if applicable)</span></div>
</div>
</div>
What I would expect:
I know this is going to be a silly css attribute I am missing but not sure what else to try.
The content is aligned to the right but the text is not right aligned. Use text-right css class to right align the text.
<span class="pull-right text-right">
<h4>Active</h4>
(dates & replacement if applicable)
</span>
You can use let the text to the right:
.col-md-3 {text-align:right}
https://jsfiddle.net/p5yctnw0/5/
https://jsfiddle.net/p5yctnw0/3/
Use the class text-right when it comes to text. pull-right is for divs.
Basically what you are looking for is text-align:right . Use it to get your desired output. If you want both the span and the trailing text to be pulled right, use #van-tuan-pham 's answer. Or use only to the span.
But do not override bootstrap classes. Instead use your own class or id selectors to set css attributes.
simply do like this way
.alignment {
text-align:right;
}
.alignment span {
display:block;
font-size:13px;
}
<div class="container-fluid">
<div class="row">
<div class="col-md-9">
<h1 class="toolTitle">Tool Title <small class="toolSubTitle">#244</small></h1>
</div>
<div class="col-md-3 alignment">
<h4>Active <span>(dates & replacement if applicable)</span></h4>
</div>
</div>
</div>
Looks like it pulls the div right, but the spans are still left aligned within the div.
Split the div into 2 spans, one for each line.
<div class="col-md-3">
<span class="pull-right">
<h4>Active</h4>
</span>
<span class="pull-right">(dates & replacement if applicable)</span>
</div>
replace row div your code with following:
<div class="row">
<div class="col-md-9">
<h1 class="toolTitle">Tool Title <small class="toolSubTitle">#244</small></h1>
</div>
<div class="col-md-3 text-right" ><span><h4>Active</h4>(dates & replacement if applicable)</span></div>
</div>
Related
I am attempting to use a basic bootstrap template, I have added a:
<div class="container"><div class="row">
<div class="col-md-6">
<p>This is the text I would like to align left</p>.
</div>
</div>
However the bootstrap template I have used has text center align - how do I add a rule just for this paragraph to align left ? (where and what would it be called?)
I should add that I have one css document for the website and can't add to the main class - I need to make a rule just for this area.
<div class="container">
<div class="row">
<div class="col-md-6">
<p class = "text-left">This is the text I would like to align left</p>
</div>
</div>
</div>
Use this it will align the left side. (class = "text-left" on the paragraph tag).
You forgot to close your row div also "text-left" class should be used there like this:
<div class="container">
<div class="row">
<div class="col-md-6">
<p class="text-left">This is the text I would like to align left</p>.
</div>
</div>
</div>
I'm using twitter-bootstrap grid system and you can see the problem right here.
The text which is supposed to be in the center keeps outgoing from the center to right side as you can see...
<div class="row mt-2">
<div class="col-3"></div>
<div class="col-6">
<div class="text-left">
<p class="d-0">
<span id="issuer_msg" style="white-space: pre-line">{{msg.message}}</span>
<br>
</p>
<div class="text-center">
<small class="text-primary font-weight-normal">{{msg.sent_time}}</small>
</div>
</div>
</div>
</div>
How can I fix the problem?
The problem is from your inline styles where you used "white-space:pre-line"
Try using "white-space:pre-wrap" instead
I think the problem is coming from your small tags. Wrap paragraph around it.
I have the following HTML code:
<div class="col-md-3 block">
<div class="col-md-4 photo">
<a target="_blank" href="https://www.facebook.com/app_scoped_user_id/1282701351808739/"><img src=""></a></div>
<div class="col-md-8"><h4><span style="font-weight: bold;">Gracie Huff</span></h4><p class="review-comment" style="line-height: 1.6;"><span>Oh my goodness! Your work is so precious and beautiful!!! I love what you do and I hope you continue to keep up the fabulous work!!! ❤❤</span></p>
Problem is that block col-md-4 has property float:left.
If text in block .col-md-8 is so long it comes to under block col-md-4 photo.
Sample here
So, how to fix this?
As solution I can set fixed height for element: div.photo
When using bootstrap col's you have space for a total of 12 inside a row.
Please take a look at the grid documentation. http://getbootstrap.com/css/#grid
So in your example 3 + 4 + 8 = 15 . So that's 3 too many. In my code example below i divided the page into 3 even columns. So you do 12/3 = 4 so you give each class col-md-4 . If you don't want even columns you can play with the numbers at the end. But never go above 12 or they will not fit into a single row.
Also the basic structure involves a container and a row.
If you want the container to be full-width you can add container-fluid instead of container to your top-level div.
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<a target="_blank" href="https://www.facebook.com/app_scoped_user_id/739844199505120/"><img src="https://fb-s-b-a.akamaihd.net/h-ak-xpf1/v/t1.0-1/p50x50/14724409_686756244813916_4119560930105375585_n.jpg?oh=0d295e97d3818a2ba788015d38385376&oe=590D81DC&__gda__=1494163569_54508491e4fd3d1197960c466dfee235"></a>
</div>
<div class="col-md-4">
<h4 class="strong"><strong>Anastasia Michelle Archuleta</strong></h4>
</div>
<div class="col-md-4">
<p class="review-comment" style="line-height: 1.6;">
<span>I can't stop looking at these cute creatures! I'm so in love with all of them! I'm saving up for one, what one is going to be a very hard decision that's for sure!</span>
</p>
</div>
</div>
</div>
im trying to build a profile card view and im using bootstrap for it.
i build two div elements on with the class col-lg-3 and the other one with col-lg-9. the problem is that the content inside the col-lg-9 is not align in the center. it has more space on the right side as on the left side and i tryde almost everything to get them center. disabled margin and padding didnt worked.
the col-lg-9 is inside a row and a normal container. and inside the col-lg-9 is the content. i have here a sample onbootplay if ya marke the container you can see that the contents with the class card hase right more space.
thats the html code of it
<div class="col-lg-9" style="min-height: 100px; background-color: #333">
<div class="container">
<div class="card">
<div class="model-image">
<img src="img/elliot.jpg">
</div>
<div class="card-content">
<a class="card-header">Team Fu</a>
<div class="meta">
<span class="date">Create in Sep 2014</span>
</div>
</div>
<div class="card-footer">
ds
</div>
</div>
</div>
</div>
i uploadet so ya can see the whole site. for better understanding demo
if you add an extra container for all .card divs you will get it centered:
<div class="container text-center">
<div class="cards-container" style="display:inline-block; box-sizing:border-box;">
<!-- here all your .card divs -->
</div>
</div>
You can add the css of the cards-container in css file.
When using bootstrap, just add the text-center class to your div and it will center your elements and all the children.
And i would suggest to use inline css rather put your css in a external stylesheet. It will be much easier to maintain in the future.
<div class="card-content text-center">
<a class="card-header">Team Fu</a>
<div class="meta">
<span class="date">Create in Sep 2014</span>
</div>
I have tried using the row class but it was not solving the problem. I am just trying to take two divs and put them next to each other using only bootstrap and not css. (It's a corner case where I can't add any css) Is there a way to do this?
Basically I have this:
<div class="OuterMostClass row">
<div class="outerClass">
<button class="btn">button1</button>
</div>
<div class="outerClass2">
<button class="btn">button2</button>
</div>
</div>
And I want the two buttons to be next to each other and due to limitations I can't add any css other than bootstrap. Is this possible?
Your code sample doesn't show a parent div with the container or container-fluid class and your columns are missing size classes.
Try this:
<div class="container">
<div class="OuterMostClass row">
<div class="outerClass col-xs-6">
<button class="btn">button1</button>
</div>
<div class="outerClass2 col-xs-6">
<button class="btn">button2</button>
</div>
</div>
</div>
The answer is to add the pull-left class to the buttons but as Matthew points out adding a container makes it easier to take care of other spacing