I have the following code:
<div class="col-md-9 col-md-offset-3">
<div class="col-md-9">
<div class="page-header"><h3>Your Profile</h3></div>
<div class="col-md-5">
<div class="col-md-4 text-right">Name:<br><br>Email:<br><br>Phone:<br><br>Gender:</div>
<div class="col-md-8 text-left">John Smith<br><br>email#email.com<br><br>07878787456<br><br>Male</div>
</div>
<div class="col-md-7">
<div class="col-md-4 text-right">Name:<br><br>Email:<br><br>Phone:<br><br>Gender:</div>
<div class="col-md-8 text-left">John Smith<br><br>email#email.com<br><br>07878787456<br><br>Male</div>
</div>
</div>
</div>
For some reason it displays like this: http://i.imgur.com/0YPMWf3.png
Here is a jsfiddle (expand the size of the output box): http://jsfiddle.net/z49Ry/
The text with "Name:" etc should be aligned right, and the other text should be aligned left. For some reason the "Name:" etc does not align right properly on the left.
I'm guessing this is because maybe the span is too small, if so then what would be a better solution for displaying data?
I really can't figure out any errors in your code. Like you said it's probably caused by too thin column.
Using BR to separate data is probably worst approach. For tabular data use table. If tables isn't what you're looking for you can as well use unordered list or description list (DL).
Related
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>
I am learning how to become Front End Developer at Udacity. There is a project that I need to submit. I ran in couple of issues I couldn't find help with, some of my images and urls within divs don't want to align properly. I tried using this website as a solution https://codemyviews.com/blog/how-to-center-anything-with-css
because it offered most variations on aligning blocks... But none of them worked.
<div class="row">
<div class="col-4"><img src="http://www.panext.com/wordpress/wp-content/uploads/2012/09/question-63916_640-400x200.jpg"></div>
<div class="col-4"><img src="http://www.eu-projekti.info/eu/wp-content/uploads/2014/10/1159613_85120857-400x200.jpg"></div>
<div class="col-4 end"><img src="http://www.digitalzenway.com/wp-content/uploads/plan-to-eat-400x200.gif"></div>
</div>
These are images, I am trying to align first image to the left, 2nd to the center and 3rd to the right. I could align them by using margins and paddings in html, but I want it to work with responsive design.
<div class="row">
<div class="col-4">
https://github.com/udacity/Appify/
</div>
<div class="col-4">
https://github.com/udacity/Sunflower/
</div>
<div class="col-4">
https://github.com/udacity/Bokeh/
</div>
</div>
and these are urls right underneath the pictures, that aren't lining up, no matter what I try.
This is the screenshot of my webpage http://picpaste.com/Portfolio-NOGcuGm8.jpg
P.S. This is my first post at Stack Overflow, TIA!
You can use Bootstrap's text-center and text-right classes to modify inner alignment of columns.
<div class="row">
<div class="col-4"><img src="http://www.panext.com/wordpress/wp-content/uploads/2012/09/question-63916_640-400x200.jpg"></div>
<div class="col-4 text-center"><img src="http://www.eu-projekti.info/eu/wp-content/uploads/2014/10/1159613_85120857-400x200.jpg"></div>
<div class="col-4 text-right end"><img src="http://www.digitalzenway.com/wp-content/uploads/plan-to-eat-400x200.gif"></div>
</div>
If you aren't using Bootstrap, these classes simply apply text-align: center and text-align: right respectively.
I'm attempting a layout in bootstrap that is positioned using the following image.
I have two rows, the top half and the bottom half both containing two separate background gradients. The rows are both divided into 50% wide columns, with the right-most columns containing content and the left-most columns containing a single image.
My problem is that I'm unsure of how to get an element to span two rows vertically while still retaining it's fluid layout. I've positioned it absolutely but once the window scales down it doesn't stack properly. My layout is as follows. Getting rid of the rows and splitting the page into two vertical columns results in me being unsure of how to split the background into two separate horizontal gradients. Any help would be appreciated. Thanks!
<div class="row" style="height:50%;background-image:-webkit-gradient(etc)">
<div class="col-md-6">
<img src="wooo-im-an-image">
</div>
<div class="col-md-6">
content of a mostly blabberous nature here
</div>
</div>
<div class="row" style="height:50%;background-image:-webkit-gradient(etc)">
<div class="col-md-6">
emtpy
</div>
<div class="col-md-6">
more content of a mostly blabberous nature here
</div>
</div>
I'm not sure if I quite understand but I did put together an example using your picture. Pardon the CSS skills and let me know if it helps you.
<div class="row gradient">
<div class="col-md-6"><div class="well inheritback">IMG<br><br><br><br><br></div></div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12"><div class="well inheritback">CONTENT</div></div>
</div>
<div class="row">
<div class="col-md-12"><div class="well inheritback">CONTENT</div></div>
</div>
</div>
</div>
Live Demo
http://www.bootply.com/116896
Using twitter bootstrap, I'm trying to float some .well divs inside a modal box, but it's giving me all kinds of headaches.
Basically, I want each well to contain two things, some text on the left, and an image on the right. I want those two in the same row. Then, I want the wells floating next to each other.
Unfortunately, I can't get the content of the well to work correctly. The text always gets squished to the left, and the image is also to the left, and the entire right side is empty.
Here's my css:
<div class="modal-body">
<div class="row-fluid">
<div class="span4 oneBook">
<div class="well">
<div class="row">
<div class="span2">
<p><strong>Book Title</strong>: Claw of the Conciliator<br>
<strong>Author:</strong>: Gene Wolfe<br>
</div>
<div class="offset3">
<img class="img-polaroid smallerImage" src="http://www.picturesofbooks.com/claw-of-the-conciliator"/>
</div>
</div>
</div>
</div>
</div>
</div>
The div with the class oneBook would be repeated multiple times for however many books I want to display in the modal.
Does anyone have any suggestions to get this to work?
<div class="offset3 span3"><img class="img-polaroid smallerImage" src="http://www.picturesofbooks.com/claw-of-the-conciliator"/></div>
From searching around, I know this question has been asked before and I just... don't understand what is going wrong here.
I have tried about a million different angles and just can't get my text to center.
If anyone has any idea what the deal is and would like to let me know, that would be great.
<div class="row-fluid text-center">
<h1 class="span12">Foobar's Contacts</h1>
</div>
Among other things, I already tried moving the text-center class to the h1 element.
EDIT: I was able to change it to this and center the header. Any drawbacks to this approach?
<div class="offset4 span4 text-center">
<h1 class="span8">Foobar's Contacts</h1>
</div>
Try putting <h1> within a <div> specifying the span. Something like
<div class="row-fluid">
<div class="span12 text-center">
<h1>name's Contacts</h1>
</div>
</div>
I don't really understand though if you are trying to center a text within a <div>, or the entire page. If you want your page to be centered use something like
<div class="container">
.
.
<div class="row-fluid">
<div class="span12 text-center">
<h1>name's Contacts</h1>
</div>
</div>
.
.
</div>
Hope it helps.