Which property can I use to align vertically the font awesome icon with the word support? I mean this navigation list:
<nav class="nav">
<ul class="nav__list--second">
<i class="far fa-life-ring fa-2x"></i>
Support
</ul>
</nav>
#import url('https://fonts.googleapis.com/css?family=Lato&display=swap');
body {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Lato', sans-serif;
font-size: 16px;
}
header {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 95vw;
padding: 10px;
margin: 10px;
}
header .brand img {
width: 60px;
}
header nav ul {
list-style: none;
}
ul.nav__list--first {
vertical-align: middle;
}
header .nav__list--first li,
header .nav__list--second li
{
text-decoration: none;
display: inline;
margin: 10px;
}
header .nav__list--first li a,
header .nav__list--second li a {
text-decoration: none;
}
<head>
<script src="https://kit.fontawesome.com/69b14a4680.js" crossorigin="anonymous"></script>
</head>
<header>
<div class="brand">
<a href="/">
<img src="./assets/images/logo.png" alt="GEM Logo" />
</a>
</div>
<nav class="nav">
<ul class="nav__list--first">
<li>
Home
</li>
<li>
Company
</li>
<li>
Solutions
</li>
</ul>
</nav>
<nav class="nav">
<ul class="nav__list--second">
<i class="far fa-life-ring fa-2x"></i>
Support
</ul>
</nav>
</header>
<div class="container">
<main id="main">
<div class="main">
</div>
</main>
<section id="why-choose-us">
<div class="container">
<div class="card">
<div class="card-icon">
<i>icon</i>
</div>
<div class="card-description">
<p>Description</p>
</div>
</div>
<div class="card">
<div class="card-icon">
<i>icon</i>
</div>
<div class="card-description">
<p>Description</p>
</div>
</div>
<div class="card">
<div class="card-icon">
<i>icon</i>
</div>
<div class="card-description">
<p>Description</p>
</div>
</div>
</div>
</section>
<section id="about-us" class="about-us">
<div class="title">
<h2>Our Team</h2>
</div>
<div class="container">
<div class="card">
<img src="./assets/images/team/enrique.jpg" alt="Enrique Massuet" />
<p>Enrique Massuet</p>
<p>CEO</p>
<p>Medical Insurance Specialist.</p>
<div class="personal-social-icons">
<a href="https://twitter.com/uno ahi">
<i class="fab fa-twitter"></i>
</a>
<a href="https://www.facebook.com/emassuet">
<i class="twitter"></i>
</a>
<a href="https://instagram.com/emassuet">
<i class="twitter"></i>
</a>
<a href="mailto://emassuet#gemfs.company">
<i class="twitter"></i>
</a>
</div>
</div>
<div class="card">
<img src="./assets/images/team/giosvel.jpg" alt="Giosvel Carril" />
<p>Giosvel Carril</p>
<p>CFO</p>
<p>Life Insurance Specialist.</p>
<div class="personal-social-icons">
<a href="https://twitter.com/uno ahi">
<i class="fab fa-twitter"></i>
</a>
<a href="https://www.facebook.com/emassuet">
<i class="twitter"></i>
</a>
<a href="https://instagram.com/emassuet">
<i class="twitter"></i>
</a>
<a href="mailto://emassuet#gemfs.company">
<i class="twitter"></i>
</a>
</div>
</div>
<div class="card">
<img src="./assets/images/team/diesan.jpg" alt="Diesan Romero" />
<p>Diesan Romero</p>
<p>CTO</p>
<p>Technology and Data Science Expert/</p>
<div class="personal-social-icons">
<a href="https://twitter.com/diesanromero">
<i class="fab fa-twitter"></i>
</a>
<a href="https://www.facebook.com/diesan.romero.56">
<i class="fab fa-facebook-f"></i>
</a>
<a href="https://instagram.com/diesanromero">
<i class="fab fa-instagram"></i>
</a>
<a href="https://www.linkedin.com/in/diesanromeros/">
<i class="fab fa-linkedin-in"></i>
</a>
<a href="mailto://diesanromero#gemfs.company">
<i class="far fa-envelope"></i>
</a>
</div>
</div>
</div>
</section>
</div>
<footer class="footer">
<div class="copyright">
<p>Copyright</p>
</div>
<ul class="social-icons">
<a href="">
<i class="fab fa-twitter"></i>
</a>
<a href="">
<i class="fab fa-facebook-f"></i>
</a>
<a href="">
<i class="fab fa-instagram"></i>
</a>
<a href="https://www.linkedin.com/company/gemfsolutions/">
<i class="fab fa-linkedin-in"></i>
</a>
</ul>
</footer>
Just make it flex and align the items center.
.nav__list--second {
display: flex;
flex-direction: row;
align-items: center;
}
Use flexbox with align-items:center
#import url('https://fonts.googleapis.com/css?family=Lato&display=swap');
body {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Lato', sans-serif;
font-size: 16px;
}
header {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 95vw;
padding: 10px;
margin: 10px;
}
header .brand img {
width: 60px;
}
header nav ul {
list-style: none;
}
ul.nav__list--first {
vertical-align: middle;
}
header .nav__list--first li,
header .nav__list--second li
{
text-decoration: none;
display: inline;
margin: 10px;
}
header .nav__list--first li a,
header .nav__list--second li a {
text-decoration: none;
}
.nav ul{
display:flex;
align-items:center;
}
<head>
<script src="https://kit.fontawesome.com/69b14a4680.js" crossorigin="anonymous"></script>
</head>
<header>
<div class="brand">
<a href="/">
<img src="./assets/images/logo.png" alt="GEM Logo" />
</a>
</div>
<nav class="nav">
<ul class="nav__list--first">
<li>
Home
</li>
<li>
Company
</li>
<li>
Solutions
</li>
</ul>
</nav>
<nav class="nav">
<ul class="nav__list--second">
<i class="far fa-life-ring fa-2x"></i>
Support
</ul>
</nav>
</header>
<div class="container">
<main id="main">
<div class="main">
</div>
</main>
<section id="why-choose-us">
<div class="container">
<div class="card">
<div class="card-icon">
<i>icon</i>
</div>
<div class="card-description">
<p>Description</p>
</div>
</div>
<div class="card">
<div class="card-icon">
<i>icon</i>
</div>
<div class="card-description">
<p>Description</p>
</div>
</div>
<div class="card">
<div class="card-icon">
<i>icon</i>
</div>
<div class="card-description">
<p>Description</p>
</div>
</div>
</div>
</section>
<section id="about-us" class="about-us">
<div class="title">
<h2>Our Team</h2>
</div>
<div class="container">
<div class="card">
<img src="./assets/images/team/enrique.jpg" alt="Enrique Massuet" />
<p>Enrique Massuet</p>
<p>CEO</p>
<p>Medical Insurance Specialist.</p>
<div class="personal-social-icons">
<a href="https://twitter.com/uno ahi">
<i class="fab fa-twitter"></i>
</a>
<a href="https://www.facebook.com/emassuet">
<i class="twitter"></i>
</a>
<a href="https://instagram.com/emassuet">
<i class="twitter"></i>
</a>
<a href="mailto://emassuet#gemfs.company">
<i class="twitter"></i>
</a>
</div>
</div>
<div class="card">
<img src="./assets/images/team/giosvel.jpg" alt="Giosvel Carril" />
<p>Giosvel Carril</p>
<p>CFO</p>
<p>Life Insurance Specialist.</p>
<div class="personal-social-icons">
<a href="https://twitter.com/uno ahi">
<i class="fab fa-twitter"></i>
</a>
<a href="https://www.facebook.com/emassuet">
<i class="twitter"></i>
</a>
<a href="https://instagram.com/emassuet">
<i class="twitter"></i>
</a>
<a href="mailto://emassuet#gemfs.company">
<i class="twitter"></i>
</a>
</div>
</div>
<div class="card">
<img src="./assets/images/team/diesan.jpg" alt="Diesan Romero" />
<p>Diesan Romero</p>
<p>CTO</p>
<p>Technology and Data Science Expert/</p>
<div class="personal-social-icons">
<a href="https://twitter.com/diesanromero">
<i class="fab fa-twitter"></i>
</a>
<a href="https://www.facebook.com/diesan.romero.56">
<i class="fab fa-facebook-f"></i>
</a>
<a href="https://instagram.com/diesanromero">
<i class="fab fa-instagram"></i>
</a>
<a href="https://www.linkedin.com/in/diesanromeros/">
<i class="fab fa-linkedin-in"></i>
</a>
<a href="mailto://diesanromero#gemfs.company">
<i class="far fa-envelope"></i>
</a>
</div>
</div>
</div>
</section>
</div>
<footer class="footer">
<div class="copyright">
<p>Copyright</p>
</div>
<ul class="social-icons">
<a href="">
<i class="fab fa-twitter"></i>
</a>
<a href="">
<i class="fab fa-facebook-f"></i>
</a>
<a href="">
<i class="fab fa-instagram"></i>
</a>
<a href="https://www.linkedin.com/company/gemfsolutions/">
<i class="fab fa-linkedin-in"></i>
</a>
</ul>
</footer>
Related
I am trying to make a social media menu, the Font Awesome Icons are all visible and the way I want but the hyperlink is not working on it.....
Here is my code:
.sm-list {
display: flex;
}
.sm-link {
color: #929FC5;
width: 3rem;
height: 3rem;
border: 1px solid #929FC5;
border-radius: 90%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 0.5rem;
}
.sm-link:last-child {
margin-right: 0;
}
.sm-link:hover {
background-image: linear-gradient(to right, #A971FF, #00F0FF);
color: #FFF;
}
<div class="sm-list">
<a href="https://www.facebook.com/" class="sm-link">
<i class="fab fa-facebook"></i>
</a>
<a href="https://www.instagram.com/" class="sm-link">
<i class="fab fa-instagram"></i>
</a>
<a href="https://www.twitter.com/" class="sm-link">
<i class="fab fa-twitter"></i>
</a>
<a href="https://www.youtube.com/" class="sm-link">
<i class="fab fa-youtube"></i>
</a>
</div>
I was able to load the icons with the following code. You must first load the Font Awesome in the head tag
<head>
<link rel="stylesheet" href="mystyle.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet">
</head>
<body>
<div class="sm-list">
<a href="https://www.facebook.com/" class="sm-link">
<i class="fab fa-facebook"></i>
</a>
<a href="https://www.instagram.com/" class="sm-link">
<i class="fab fa-instagram"></i>
</a>
<a href="https://www.twitter.com/" class="sm-link">
<i class="fab fa-twitter"></i>
</a>
<a href="https://www.youtube.com/" class="sm-link">
<i class="fab fa-youtube"></i>
</a>
</div>
</body>
I have a navbar which has 4 anchor tag buttons in the center (home, about, services, contact). I dont know how to center it on the navbar. I have another anchor tag on the far left of the navbar (a phone number link). It appears that the part I want to center is centered between the boundary of that far left link and the far right of the page.
I cant figure out how to center these 4 tags on the grid.
Hope that makes sense, im not too good with the jargon.
<a href="tel:1-530-680-8255" style="color:grey; display:inline-block">1-530-680-
8255</a>
<a href="tel:1-530-680-8255"><i class="fas fa-phone" style="display:inline-block">
</i>1-530-680-8255</a>
</div>
<nav class="navigation nav-block secondary-navigation nav-right">
<ul>
<!-- Dropdown Cart Overview
<li>
<div class="dropdown">
<span class="cart-indication"><span class="icon-shopping-cart"></span> <span class="badge">3</span></span>
<ul class="dropdown-list custom-content cart-overview">
<li class="cart-item">
<a href="single-product.html" class="product-thumbnail">
<img src="images/design-agency/portfolio/grid/no-margins/project-6-square.jpg" alt="" />
</a>
<div class="product-details">
<a href="single-product.html" class="product-title">
Cotton Jump Suit
</a>
<span class="product-quantity">2 x</span>
<span class="product-price"><span class="currency">$</span>15.00</span>
</div>
</li>
<li class="cart-item">
<a href="single-product.html" class="product-thumbnail">
<img src="images/design-agency/portfolio/grid/no-margins/project-7-square.jpg" alt="" />
</a>
<div class="product-details">
<a href="single-product.html" class="product-title">
Cotton Jump Suit
</a>
<span class="product-quantity">2 x</span>
<span class="product-price"><span class="currency">$</span>15.00</span>
</div>
</li>
<li class="cart-item">
<a href="single-product.html" class="product-thumbnail">
<img src="images/design-agency/portfolio/grid/no-margins/project-8-square.jpg" alt="" />
</a>
<div class="product-details">
<a href="single-product.html" class="product-title">
Cotton Jump Suit
</a>
<span class="product-quantity">2 x</span>
<span class="product-price"><span class="currency">$</span>15.00</span>
</div>
</li>
<li class="cart-subtotal">
Sub Total
<span class="amount"><span class="currency">$</span>15.00</span>
</li>
<li class="cart-actions">
View Cart
<span class="icon-check"></span> Checkout
</li>
</ul>
</div>
</li> -->
<!-- Dropdown Search Module
<li>
<div class="dropdown">
<span class="icon-magnifying-glass"></span>
<div class="dropdown-list custom-content cart-overview">
<div class="search-form-container site-search">
<form action="#" method="get" novalidate>
<div class="row">
<div class="column width-12">
<div class="field-wrapper">
<input type="text" name="search" class="form-search form-element no-margin-bottom" placeholder="type & hit enter...">
<span class="border"></span>
</div>
</div>
</div>
</form>
<div class="form-response"></div>
</div>
</div>
</div>
</li> -->
<li>
<div class="v-align-middle" style="margin-left: 60px;">
<i class="fab fa-facebook-f"></i>
</div>
</li>
<li class="aux-navigation hide">
<!-- Aux Navigation -->
<a href="#" class="navigation-show side-nav-show nav-icon">
<span class="icon-menu"></span>
</a>
</li>
</ul>
</nav>
<nav class="navigation nav-block primary-navigation nav-center">
<ul>
<li class="current">Home <i class="fas fa-home"></i></li>
<li class="current">About <i class="fas fa-at"></i></li>
<li class="current">Services <i class="fas fa-wrench"></i> </li>
<li class="current">Contact <i class="fas fa-phone"></i> </li>
</ul>
</nav>
</div>
</div>
</div>
</header>
You can use floats to position elements side by side on the page and then play with the widths and padding to arrange them how you like. If you are unsure how to use CSS I suggest following some online tutorials.
nav ul {
list-style-type: none;
display: inline-block;
margin: 0px;
padding: 0px;
width: 100%;
}
nav ul li {
display: inline-block;
text-align: center;
width: 60px;
margin: 0px;
padding: 0px;
}
nav ul li span {
font-size: 0.7em;
}
nav ul li i {
font-size: 2em;
}
.left {
width: 40%;
float: left;
}
.right {
width: 60%;
float: right;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<nav>
<div class="left">
<p>000 000 0000</p>
</div>
<div class="right">
<ul>
<li><i class="fas fa-phone"></i><br><span>Contact</span></li>
<li><i class="fas fa-wrench"></i><br><span>Services</span></li>
<li><i class="fas fa-at"></i><br><span>About</span></li>
<li><i class="fas fa-home"></i><br><span>Home</span></li>
</ul>
</div>
</nav>
there is alot of existing css that came with this template. For me to run your css and html, it would change too many properties to the point where its unrecognizable. Despite that this is a perfect answer. HOWEVER: I took your css:
nav ul {
list-style-type: none;
display: inline-block;
margin: 0px;
padding: 0px;
width: 100%;
}
and i changed it to these values:
nav ul {
display: inline-block;
text-align: center;
width: 1100px;
margin: 200px;
padding: 200px;
}
Its centered. But now the container is vertically huge. Need it the original height
Screenshot
Ok lets start over. I just want to center these 4 anchor tag li's inside of this ul.
Is there someway I can wrap these four into one container, and then move them to the left with css? I just want those 4 items to appear centered in that ul.
Heres a picture of what im talking about
Below is my total header in html. Theres a lot of CSS so i dont know what to link people to but ill put what i have been playing with below.
<!-- Header -->
<header class="header header-fixed header-fixed-on-mobile header-transparent" data-bkg-threshold="100">
<div class="header-inner">
<div class="row nav-bar">
<div class="column width-12 nav-bar-inner">
<div class="logo">
<div>
<a href="tel:1-530-680-8255" style="color:grey; display:inline-block">1-530-680-
8255</a>
<a href="tel:1-530-680-8255"><i class="fas fa-phone" style="display:inline-block">
</i>1-530-680-8255</a>
</div>
</div>
<nav class="navigation nav-block secondary-navigation nav-right">
<ul>
<li class="aux-navigation hide">
<!-- Aux Navigation -->
<a href="#" class="navigation-show side-nav-show nav-icon">
<span class="icon-menu"></span>
</a>
</li>
</ul>
</nav>
<nav class="navigation nav-block primary-navigation nav-center">
<ul>
<li class="current">Home <i class="fas fa-home"></i></li>
<li class="current">About <i class="fas fa-at"></i></li>
<li class="current">Services <i class="fas fa-wrench"></i> </li>
<li class="current">Contact <i class="fas fa-phone"></i> </li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
<!-- Header End -->
---CSS---
nav ul li {
display: inline-block;
text-align: center;
width: 100px;
margin: 00px;
padding: 0px;
}
I want to add upto 6 icons in a div bar in Bootstrap as shown in the below wireframe, I have already made it in an icon bar class but my supervisor has prohibited me to do so, so I cant use any of the navigation bars or icon bars. What will be the best way to do it? Also How to keep it seperate from the below div?
The wireframe of what I want
Following is my html code:
<nav class="navbar ">
<div class="icon-bar">
<a class="active" href="#"><i class="fa fa-home"> </i> </a>
<i class="fa fa-search"> </i>
<i class="fa fa-globe"> </i>
<i class="fa fa-envelope"> </i>
<i class="fa fa-trash"> </i>
</div>
</nav>
<div class="container-fluid">
<div class="col-sm-12" style="background-color: green;"></div> <br> <br>
Simple copy and paste
<style>
.icons_div {
margin: 0px auto;
width: max-content;
}
.icon{
margin : 0px auto;
width: 15px;
display: initial;
}
.fa {
padding: 0px 10px;
}
</style>
<div class="icons_div">
<div class="icon">
<i class="fa fa-circle" aria-hidden="true"></i>
</div>
<div class="icon">
<i class="fa fa-circle" aria-hidden="true"></i>
</div>
<div class="icon">
<i class="fa fa-circle" aria-hidden="true"></i>
</div>
<div class="icon">
<i class="fa fa-circle" aria-hidden="true"></i>
</div>
<div class="icon">
<i class="fa fa-circle" aria-hidden="true"></i>
</div>
<div class="icon">
<i class="fa fa-circle" aria-hidden="true"></i>
</div>
</div>
I have been trying to center the Social media Icons for over an hour and I seem to go nowhere.
Below is the HTML code snippet.
<footer>
<div class="container">
<div class="row-footer">
<div class="row row-content">
<div class="nav navbar-nav" style="padding: 40px 10px;">
<a class="btn btn-social-icon btn-google-plus" href="http://google.com/+"><i class="fa fa-google-plus"></i></a>
<a class="btn btn-social-icon btn-facebook" href="http://www.facebook.com/profile.php?id="><i class="fa fa-facebook"></i></a>
<a class="btn btn-social-icon btn-linkedin" href="http://www.linkedin.com/in/"><i class="fa fa-linkedin"></i></a>
<a class="btn btn-social-icon btn-twitter" href="http://twitter.com/"><i class="fa fa-twitter"></i></a>
<a class="btn btn-social-icon btn-youtube" href="http://youtube.com/"><i class="fa fa-youtube"></i></a>
<a class="btn btn-social-icon" href="mailto:"><i class="fa fa-envelope-o"></i></a>
</div>
</div>
</div>
</div>
</footer>
And below is the CSS code snippet.
.row-footer {
background-color: #AfAfAf;
margin:200px auto;
padding: 20px 0px 20px 0px;
}
.navbar-nav {
display: inline-block;
text-align: center;
}
This is how its appearing on Google Chrome.
Because you're using the navbar-nav class you have to remove it's default float:left rule.
.navbar-nav {
padding: 40px 10px;
float: none;
text-align: center;
}
Working Example 1:
.row-footer {
background-color: #AfAfAf;
margin: 200px auto;
padding: 20px 0px 20px 0px;
}
div.navbar-nav {
padding: 40px 10px;
float: none;
text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<footer>
<div class="container">
<div class="row-footer">
<div class="row">
<div class="nav navbar-nav">
<a class="btn btn-social-icon btn-google-plus" href="http://google.com/+"><i class="fa fa-google-plus"></i></a>
<a class="btn btn-social-icon btn-facebook" href="http://www.facebook.com/profile.php?id="><i class="fa fa-facebook"></i></a>
<a class="btn btn-social-icon btn-linkedin" href="http://www.linkedin.com/in/"><i class="fa fa-linkedin"></i></a>
<a class="btn btn-social-icon btn-twitter" href="http://twitter.com/"><i class="fa fa-twitter"></i></a>
<a class="btn btn-social-icon btn-youtube" href="http://youtube.com/"><i class="fa fa-youtube"></i></a>
<a class="btn btn-social-icon" href="mailto:"><i class="fa fa-envelope-o"></i></a>
</div>
</div>
</div>
</div>
</footer>
Working Example 2:
.row-footer {
background-color: #AfAfAf;
margin: 200px 0;
}
.footer-nav {
text-align: center;
padding: 40px 0;
}
.footer-nav a {
display: inline-block;
padding: 0 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<footer>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="row-footer">
<div class="footer-nav">
<a class="btn btn-social-icon btn-google-plus" href="#">
<i class="fa fa-google-plus"></i>
</a>
<a class="btn btn-social-icon btn-facebook" href="#">
<i class="fa fa-facebook"></i>
</a>
<a class="btn btn-social-icon btn-linkedin" href="#">
<i class="fa fa-linkedin"></i>
</a>
<a class="btn btn-social-icon btn-twitter" href="#">
<i class="fa fa-twitter"></i>
</a>
<a class="btn btn-social-icon btn-youtube" href="#">
<i class="fa fa-youtube"></i>
</a>
<a class="btn btn-social-icon" href="#">
<i class="fa fa-envelope-o"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</footer>
Try using display: inline-block; on the icon combined with text-align:center on icons container.
If there is going to be more children than just the icons, consider wrapping them into another <div>.
a {
display: inline-block;
}
.navbar-nav {
text-align: center;
}
Here is updated jsfiddle
I am trying to have a thumbnail grid. Each thumbnail can have either one of two different height, but I want the whole row to have the same height
As can be seen, because the last two thumbnails are higher, the rest get's pushed down.
When I inspect it with Google Devtools, no padding or margin has been added, they're just being forced down somehow
CSS:
.video {
display: inline-block;
width: 220px;
height: 250px;
margin: 0 0 15px 15px;
h4 {
margin-top: 5px;
}
.thumbnail {
padding: 0px;
border: none;
background: none;
// box-shadow: 5px 5px 15px -6px;
.caption {
word-break: break-all;
}
}
}
HTML:
<div class="row">
<div class="col-xs-12">
<div class="videoList">
<div class="video">
<div class="item">
<div class="thumbnail">
<img src="https://i.ytimg.com/s_vi/YXQdrjJiQjY/hqdefault.jpg?sqp=CNjOtKgF&rs=AOn4CLAx8dW9kP4W6XdVeCR73QmLOEOdNw" alt="thumbnail">
<div class="caption">
<h4><span class="title">My Slideshow</span></h4>
<ul class="list-inline">
<li>1 views</li>
<li><i class="fa fa-thumbs-o-up"></i> 0</li>
<li><i class="fa fa-thumbs-o-down"></i> 0</li>
<li><i class="fa fa-comment-o"></i> 0</li>
</ul>
</div>
</div>
</div>
</div>
<div class="video">
<div class="item">
<div class="thumbnail">
<img src="https://i.ytimg.com/s_vi/Ii7FfPgDU6A/hqdefault.jpg?sqp=CNjOtKgF&rs=AOn4CLAU-ezif1lm8rXcVNRePjnfVhGvTA" alt="thumbnail">
<div class="caption">
<h4><span class="title">My Slideshow</span></h4>
<ul class="list-inline">
<li>1 views</li>
<li><i class="fa fa-thumbs-o-up"></i> 0</li>
<li><i class="fa fa-thumbs-o-down"></i> 0</li>
<li><i class="fa fa-comment-o"></i> 0</li>
</ul>
</div>
</div>
</div>
</div>
<div class="video">
<div class="item">
<div class="thumbnail">
<img src="https://i.ytimg.com/s_vi/GB9syW4zI2o/hqdefault.jpg?sqp=CNjOtKgF&rs=AOn4CLDbBXF49SYPGVhCKJ6QqYcwP3xpEA" alt="thumbnail">
<div class="caption">
<h4><span class="title">My Slideshow</span></h4>
<ul class="list-inline">
<li>0 views</li>
<li><i class="fa fa-thumbs-o-up"></i> 0</li>
<li><i class="fa fa-thumbs-o-down"></i> 0</li>
<li><i class="fa fa-comment-o"></i> 0</li>
</ul>
</div>
</div>
</div>
</div>
<div class="video">
<div class="item">
<div class="thumbnail">
<img src="https://i.ytimg.com/s_vi/b7dK2DEMkyI/hqdefault.jpg?sqp=CNjOtKgF&rs=AOn4CLC6UBWeTho-vmmSozu-CG1Zno88vQ" alt="thumbnail">
<div class="caption">
<h4><span class="title">My Slideshow</span></h4>
<ul class="list-inline">
<li>1 views</li>
<li><i class="fa fa-thumbs-o-up"></i> 0</li>
<li><i class="fa fa-thumbs-o-down"></i> 0</li>
<li><i class="fa fa-comment-o"></i> 0</li>
</ul>
</div>
</div>
</div>
</div>
<div class="video">
<div class="item">
<div class="thumbnail">
*<img src="https://i.ytimg.com/s_vi/9nizjdeEecE/hqdefault.jpg?sqp=CNjOtKgF&rs=AOn4CLC5VfvmjPALw-K5COknauUE2fTORg" alt="thumbnail">
<div class="caption">
<h4><span class="title">John Lennon - Imagine (rock instrumenta...</span></h4>
<ul class="list-inline">
<li>38 views</li>
<li><i class="fa fa-thumbs-o-up"></i> 0</li>
<li><i class="fa fa-thumbs-o-down"></i> 3</li>
<li><i class="fa fa-comment-o"></i> 0</li>
</ul>
</div>
</div>
</div>
</div>
Any help is much appreciated
It's because other divs have longer titles than others and your div are aligning them bottom by default.To fix this problem you'll need to add vertical-align:top; to your class .item, if not I think the class is .thumbnail
.item {
vertical-align:top;
}
add vertical align to video class:
vertical-align:top