CODEWITHSUNDEEP
csstwitter-bootstrap-3
user2843365
user2843365

Reputation: 397

Bootstrap grid alignment of images

I am creating a Node/Express staff directory. It's all working fine so far except one single image appears out of line and I cannot figure out why this one image is not behaving like the rest. The first image in the row is higher than the rest, even though all images are the same size, and all are placed on the page with the same class. This is what the page looks like: Staff Directory

As you can see, only the first image is falling out out alignment. I've attached the relevant parts of the code in hopes that someone could see something I am obviously missing.

Thanks for the help!

This is my header.ejs file:

<!DOCTYPE HTML>
<html>

<head>
    <link rel="stylesheet" type = "text/css" href = "/bootstrap/css/bootstrap.min.css"> 
    <link rel="stylesheet" type = "text/css" href = "/css/styles.css">
</head>

<body>

This is the staff.ejs file:

<%include header %>

<div class = "container">

<header class = "jumbotron">
    <h1>Staff Directory</h1>
</header>

<div class = "row row-grid">
<% staff.forEach(function(staff){ %>
    <div class="col-sm-1">
    <div class="thumbnail">
    <div class = "imagewrap">
        <!--<h4><%= staff.name %></h4>-->
        <img src = "<%=staff.image%>">
        <a href = "#" class="round-button"><%=staff.initials%></a>
    </div>
    </div>
    </div>

<% }); %>
</div>

</div>  




<%include footer%>

And this is my css:

/* THE CSS TO OVERLAY BUTTON ON THE BOTTOM LEFT CORNER OF IMAGE */
.imagewrap {
  display:inline-block;
  position:relative;
}

.button2 {
  position:absolute;
  bottom:0;
  right:0;
}

/* A BUNCH OF CSS TO MAKE A ROUND BUTTON*/
.round-button {
    position:absolute;
    width:20px;
    height:20px;
    line-height:20px;
    border: 2px solid #f5f5f5;
    border-radius: 50%;
    color:#f5f5f5;
    text-align:center;
    text-decoration:none;
    background: #4679BD; 
    box-shadow: 0 0 3px gray;
    font-size:10px;
    font-weight:bold;
    bottom:0;
    right:0;
}

.round-button:hover {
    background:#30588e;
}
img {
    width:100%;

}
.row .display-flex {
  display: flex;
  flex-wrap: wrap;
}
.row .display-flex > [class*='col-'] {
  display:flex;
  flex-direction:column;
}
.row.row-grid [class*="col-"] + [class*="col-"] {
    margin-top: 15px;
}

Upvotes: 0

Views: 300

Answers (2)

user2843365
user2843365

Reputation: 397

Fixed it - the problem was the row-grid class. I deleted the second [class*="col-"], and the first picture fell into place. Thanks!!

Upvotes: 1

Steven Smith
Steven Smith

Reputation: 406

due to the CSS/Bootstrap Have you tried it on

'img-thumbnail'     //Shapes the image to a thumbnail   
'img-responsive'    //Makes an image responsive (will scale nicely to the parent element)

as you can use it 

 <img src = "<%=staff.image%>" class="img-responsive">

Upvotes: 0

Related Questions