On my web page I have a centered logo/lead along with two divs below the logo/lead. I wish to make the divs seem centered in accordance to the logo/lead.
I have attempted to center the divs by using Twitter Bootstrap's spans but the divs are still not truly centered.
<div class="row-fluid marketing">
<div class="span3"></div>
<div class="span3 text-glow-hover-with-delay">
<h2><i class="icon-beaker"> </i> Genuinely Tested</h2>
<p>
Guru has undergone an enormous amount of testing
<br />
via <a href="http://junit.org" rel="tooltip" data-toggle="tooltip" data-placement="bottom" title=""
data-original-title="Visit their website!">JUnit</a>; the programmer-oriented testing framework.
</p>
</div>
<div class="span4 text-glow-hover-with-delay">
<h2><i class="icon-book"> </i> Full Documentation</h2>
<p>
We provide full-source/full-documentation for our users.
</p>
</div>
</div>
If you need more information you can take a look at the website: http://guru.jire.org
You can make them appear truly centered by changing the span4 to a span3 (odd-equality rule) and then setting the divs to align-center. Full source below.
<div class="row-fluid marketing">
<div class="span3"></div>
<div class="span3 text-glow-hover-with-delay" align="center">
<h2><i class="icon-beaker"> </i> Genuinely Tested</h2>
<p>
Guru has undergone an enormous amount of testing
<br />
via <a href="http://junit.org" rel="tooltip" data-toggle="tooltip" data-placement="bottom" title=""
data-original-title="Visit their website!">JUnit</a>; the programmer-oriented testing framework.
</p>
</div>
<div class="span3 text-glow-hover-with-delay" align="center">
<h2><i class="icon-book"> </i> Full Documentation</h2>
<p>
We provide full-source/full-documentation for our users.
</p>
</div>
</div>
It may help to look at it this way:
The borders on the divs help you see what is happening, the diagonals show you where the true center is.
If you give the divs consistent widths they will look more symmetrical and centered, that may be all you need to get the look you want.
Related
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.
See the following example:
<div class="row">
<div class="col-2">
<p>Error</p>
</div>
<div class="col-8">
<div class="progress error" data-toggle="tooltip" data-placement="bottom">
<div class="progress-bar error-bar" role="progressbar"></div>
</div>
</div>
<div class="col-2">
<a tabindex="0" data-container="body" data-toggle="popover" data-placement="right" data-content="Some random text">
<i class="fa fa-info-circle" aria-hidden="true" style="vertical-align: top"></i>
</a>
</div>
</div>
The text "Error" is not vertically aligned properly with the prograss bar and font awesome icon. I tried adding vertical-align: top to <p> but it did not make a difference. How do I correctly vertically align the text?
You can add line-height: 1rem; to <p>
Try to add the class align-items-center to your row, this will make all cols vertically aligned in the center of the row.
If you have any question about the Bootstrap grid system, check out the documentation, that's pretty good by the way.
The property vertical-align only applies to inline and table cells elements, check out the MDN documentation about that. So, vertical-align will only work if your <p> element is an inline element, and if has enough height to be aligned.
This is probably an easy fix, but I can't seem to figure out whats wrong. I deleted everything not necessary so hopefully the code isn't too bad to read.
Basically when you scale the page down, width wise, the footer(contact) overlaps the div above it. On the Code Pen its already overlapping.
HTML:
<div class="library library-row specialties">
<div class="container">
<div class="desc">
<h1>Our Specialties<br/></h3>
<p>
Everything we can do for you
</p>
</div>
<div class="row row-images">
<div class="col-sm-4">
<i class="fa fa-database" aria-hidden="true"></i>
<h4>Databases</h4>
</div>
<div class="col-sm-4">
<i class="fa fa-server" aria-hidden="true"></i>
<h4>Servers</h4>
</div>
<div class="col-sm-4">
<i class="fa fa-cloud" aria-hidden="true"></i>
<h4>Cloud Integration</h4>
</div>
</div>
</div>
</div>
<div class="footer library library-row">
<div class="container">
<div class="accounts">
<i>
</i>
</div>
</div>
</div>
CSS: (I'm having trouble pasting it in, sorry but please get it from the Code Pen)
Code Pen: Click Here
Again, sorry if this is a basic fix. I tried, but I'm not sure whats wrong with it.
There is some CSS being applied to .specialties which is fixing the height of that div. The footer is placed below that div, but the content in the .specialties div is vertically overflowing outside of the div, thus the content rendering underneath and below the footer.
Remove this height: 100vh; CSS and you can see why this is happening. Probably in need of refactor, which I'm happy to help with if you can explain the design intentions.
.specialties {
height: 100vh;
}
As asked in the title, I am creating a website by using bootstrap v3.3.2.
The first question is that I am using the grid system to align the caption to the right of the thumbnail as shown below:
<div class="container">
<div class="thumbnail">
<div class="row">
<div class="col-md-6">
<a href="#">
<img class="img-responsive" src="images/pic.jpg">
</a>
</div>
<div class="col-md-6">
<div class="caption">
<h2>Title</h2>
<hr>
<p>A design specification provides explicit information about the requirements for a product and how the product is to be put together. It is the most traditional kind of specification, having been used historically in public contracting for buildings, highways, and other public works, and represents the kind of thinking in which architects and engineers have been trained.</p>
<hr>
<p class="caption-footer">
<span class="glyphicon glyphicon-heart"></span> Like it
<span class="glyphicon glyphicon-share"></span> Share it
</p>
</div>
</div>
</div>
</div>
</div>
Which turns out to be something like this:
As noticed, there is a large margin to the left of the image, which is not ideal. And when I resize the screen, it became more undesirable, with large margin to both side as shown below:
I think this may caused by the grid system since the col-md-6 has a fixed width. However I do not know how to fixe this.
The second question is that I try to align the two buttons to the bottom of the caption by adding a new class called caption-footer. However, this does not work.
Below is my CSS file for class caption-footer and how it turns out to be:
caption-footer{
position: absolute;
bottom:0;
left: 0;
}
I have checked quite a few links here (like: link1 link2). But none of them seems to work for my case.
Thanks in advance for any help!
One thing you can do simply place caption under col-md-12 div and buttons under another col-md-12 div.
<div class="container">
<div class="row">
<div class="col-md-6">
<a href="pulpitrock.jpg" class="thumbnail">
<p>Pulpit Rock: A famous tourist attraction in Forsand, Ryfylke, Norway.</p>
<img src="pulpitrock.jpg" alt="Pulpit Rock" width="284" height="213">
</a>
</div>
<div class="col-md-6">
<div class="col-md-12">
A design specification provides explicit information about the requirements for a product and how the product is to be put together. It is the most traditional kind of specification, having been used historically in public contracting for buildings, highways, and other public works, and represents the kind of thinking in which architects and engineers have been trained.
</div>
<div class="col-md-12">
Download
Images
</div>
</div>
</div>
</div>
I have a search input and a result element. Both are in separate divs/containers but I need them to align when the window size changes. I'm pretty sure there's a better way to do it than with Javascript.
One window size: http://i.imgur.com/KSmKsFL.png
A smaller window: http://i.imgur.com/tSMQvdD.png
I'm using this: http://getuikit.com/docs/utility.html and I'm liking it but with regards to responsive design I'm clearly doing something wrong. Shouldn't be this hard to get two elements to align regardless of screen width. Any suggestions?
My HTML
<div class="header-section">
<div class="uk-container uk-container-center uk-text-center">
<h1 class="uk-h1" id="head1">Search</h1>
<h1 class="uk-h1" id="head2">Lab</h1>
</div>
</div>
<div class="input-section">
<div class ="uk-container uk-container-center uk-text-center">
<form id="search-form" class="uk-form">
<input id="search-input" type="text" placeholder="Bing Engine ">
<button id="search-btn" class="uk-button uk-button-primary" type="button">Search</button>
</form>
</div>
</div>
<div class="results-section">
<div id="results-container" class="uk-container uk-container-center uk-width-1-2">
<div class="result">
<a class="result-title" href="#">Bhutan travel advice</a>
<div class="result-url">https://www.gov.uk/foreign-travel-advice/bhutan</div>
<p class="result-summary">Latest travel advice for Bhutan including safety and security, entry requirements, travel warnings and health.</p>
</div>
</div>
</div>
It felt quite clean to me.
My CSS: http://pastebin.com/4kkpe8cq
Using CSS:
#media(min-width:800px) {
// your CSS for a small width
}