I have a bootstrap row, with 4 columns in it. Originally I had 3 columns with icons, and they all aligned perfectly. I added a fourth in, and now the new one I added is slightly further down the page than the rest. It just doesn't sit in line
<div class="col-12 padding">
<h3>Also take a look at my Github, Free Code Camp, Team Treehouse and LinkedIn profiles!</h3>
</div>
<div class="col-xs-12 col-sm-3">
<i class="fab fa-github icons"></i>
<h4>GitHub</h4>
</div>
<div class="col-xs-12 col-sm-3">
<i class="fab fa-free-code-camp icons"></i>
<h4>Free Code Camp</h4>
</div>
<div class="col-xs-12 col-sm-3">
<i class="fi-social-treehouse icons"></i>
<h4>Team Treehouse</h4>
</div>
<div class="col-xs-12 col-sm-3">
<i class="fab fa-linkedin icons"></i>
<h4>LinkedIn</h4>
</div>
It's the third column (team treehouse) that doesn't sit in line with the rest.
Also, they are all within a row div, it's just not shown.
EDIT:
It seems the problem is 3 of the icons are from Font Awesome, and the Treehouse icon is from Foundation Icons. Now I know the problem, but im not sure how to fix it. They are all styled to the same size
If you believe it is the icon, test your theory by adding a border to the icons class. This way you will be able to tell if the third icon is positioned oddly, or has padding built into the image itself. If that is the case copy the image and edit it to suit.
Or you can hack the offending icon with some CSS like so:
.fi-social-treehouse {
margin-top: -20px;
}
Well, I checked inside the CSS sheet for Foundation Icons and compared it to the CSS sheet of Font Awesome, and couldn't find a difference. So I ended up hard coding a negative margin to the column that the treehouse icon is within. If anyone has a better solution, I would be happy to hear it!
Related
I am trying to align the content to the existing container above, however I am unable to successfully commit this as the container is located in a row because I wanted the file directory div on the left which pushes the container to the right of course.
Assigning a position: fixed; to the file directory div would fix the issue however it would not maintain the responsive web design which Bootstrap offers with its superior system.
As you can see the content is not in the right spot.
I have tried numerous things in css however none of these didn't feel right. For now I have tried playing with the col system of Bootstrap for a bearable outcome. Furthermore the image I provided of the website is in fact the result of this piece of code in case one wonders whether the image corresponds to the code.
<div class="container"><h2><i class="fas fa-archive" style="color: darkgoldenrod"></i> Archive Register({{ $files_total }})</h2></div>
<div class="container-fluid">
<div class="row justify-content-between">
<div class="file-list col-lg-2">
<h3 class="ml-5"><i class="fas fa-file-alt" style="color: darkgoldenrod"></i> File list:</h3>
<div class="file-list ml-5">
<p>List</p>
</div>
</div>
<div class="content col-lg-9">
content
</div>
</div>
</div>
<div class="file-list col-lg-2">
change to
<div class="file-list col-lg-3">
your col need 1 more col as it is a 12-grid column.
matching it to the right column
<div class="content col-lg-9">
This would be because you are using a container for the heading, which is based on a fixed with of the screen, and container fluid which is the full width on the screen.
You could change the heading container to something like this to align it with your content column? (Presuming you are using Bootstrap 4)
<div class="container-fluid">
<div class="row">
<div class="col-lg-9 offset-lg-9">
<h2><i class="fas fa-archive" style="color: darkgoldenrod"></i> Archive Register({{ $files_total }})</h2>
</div>
</div>
</div>
So basically I need to set icons / labels over the thumbnail picture, how to do it with CSS and HTML? If possible I need it to be responsive. Thanks in advance.
EDIT: Sorry for not posting code, here is what I have tried using Bootstrap 3 and Font Awesome:
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="img/test/test04.png" alt="thumb01">
<div class="col-xs-3 col-md-6">
<div class="delivery alert alert-success">
<i class="fa fa-truck" aria-hidden="true"></i>
</div>
</div>
</a>
</div>
</div>
Delivery class:
.delivery{
position: absolute;
font-size: large;}
Ok. Firstly, if you are using some framework, look for a solution that uses it. Secondly, if you do not use a structure, you can use #media in CSS to make your elements responsives, and for the layout, what you are looking for is a thumbnail or picture card, search for it in internet if you encounter difficulties. You can work using the image and the icons inside a div, then just work with the elements using CSS (display and the float, for example). Have fun :)
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;
}
I've searched the forums, but couldn't find the exact problem.
I'm using bootstrap on a template, and I'm trying to add an image in the top bar ('topbar' - not the navigational bar).
For some reason, the image is never shown.
Here's the code (all the rest besides the image works fine):
<section id="topbar">
<div class="container">
<div class="row">
<div class="col-sm-12 topbar-base no-padding">
<!--Top Bar Block-->
<div class="col-sm-8 col-md-6 topbar-block left text-left">
<ul>
<li><i class="fa fa-clock-o"></i>Mon - Sat: 09.00 - 19.00</li>
<li>Company inc.</li>
<li>**<img src="flag.png" alt="" height="27px" />**</li>
<li><i class="fa fa-phone"></i>+1 929 425 3919 </li>
<li><i class="fa fa-envelope"></i>info#company.com </li>
</ul>
</div>
<!--Top Bar block-->
<div class="col-sm-4 col-md-4 col-md-offset-2 topbar-block text-right">
<ul class="social">
<li><i class="fa fa-facebook"></i> </li>
</ul>
</div>
</div>
</div>
</div>
Thank you very much in advance. I've tried a lot of things, but can't seem to get it to work.
Much appreciated,
Lance
It's probably because the value of the height attribute of your image is 27px. It should be just 27.
From the html5 specification:
The attributes, if specified, must have values that are valid non-negative integers.
By the way, this should preferably stored in a css file.
There is also other errors, like the href attribute href="tel:+1 929 425 3919" which is not valid. Use an html validator to get rid of those errors.
The img tag inside "topbar-block" is referencing an image "flag.png" in the same directory as your .html file is. So make sure the image is in the same folder. The code seems correct otherwise.
I have a UI where I display an icon with some text(on the right side) in the same row on a tile.
The problem here is that when I resize the screen, the text gets wrapped to the next line and even if I decrease text size, it still does not align next to the icon.
Can anyone help me out?
Here's a visual representation. This is when screen is full size:
And then this is what happens when it is resized:
How do I bring the text next to the icon like in the original size (full size)?
Here's the code for displaying the icon and text:
<div class="row">
<div class="col-md-2 resize" data-toggle="tooltip" title="Date of Birth">
<i class="i class="fa fa-calendar fa-2x icon-white" style="margin-top:17%;"></i>
</div>
<div class="col-md-10">
<h4 class="icon-white m-h4" id="dob">16-Jul-2014</h4>
</div>
</div>
change col-md to col-xs
<div class="row">
<div class="col-xs-2 resize" data-toggle="tooltip" title="Date of Birth">
<i class="fa fa-calendar fa-2x icon-white" style="margin-top:17%;"></i>
</div>
<div class="col-xs-10">
<h4 class="icon-white m-h4" id="dob">16-Jul-2014</h4>
</div>
</div>
change the cols to a single line, like col-md-12. Then apply the icon as a background.
Alternatively, use
<div class="col-md-2 col-xs-2">
and so on.
Depending on your layout, you may need to adjust the cutting points, so the first approach is always better and desirable