I can't manage to center these divs as I would.
I would like to have all icons aligned vertically and the same for the text in order to have something like that :
The logo picture is a simple <img> tag and the text is a <h4> tag.
If someone is able to help me with this please, I am stuck for a long time on this problem...
Thank you !
Flexbox is great for this sort of thing. You can use align-items:center; to center everything within the flex container vertically and you can use justify-content:center; to center horizontally.
.item {
display:flex;
align-items:center;
justify-content:center;
}
.item-text {
line-height:1rem;
margin-left:10px;
}
<div class="container">
<div class="item">
<div class="item-image"><img src="https://via.placeholder.com/50" /></div>
<h4 class="item-text">Lorem Ipsum</h4>
</div>
<div class="item">
<div class="item-image"><img src="https://via.placeholder.com/50" /></div>
<h4 class="item-text">Lorem Ipsum</h4>
</div>
<div class="item">
<div class="item-image"><img src="https://via.placeholder.com/50" /></div>
<h4 class="item-text">Lorem Ipsum</h4>
</div>
</div>
Add the previous code, adjust the width from img and h4
.item {
display: flex;
align-items: center;
justify-content: center;
max-width: 100%;
}
.item-text {
line-height: 1rem;
margin-left: 10px;
}
.item-image {
display: flex;
flex-direction: row-reverse;
width: 30%;
}
h4 {
width: 60%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="/style.css" />
</head>
<body>
<div class="container">
<div class="item">
<div class="item-image">
<img src="https://via.placeholder.com/50" />
</div>
<h4 class="item-text">Html</h4>
</div>
<div class="item">
<div class="item-image">
<img src="https://via.placeholder.com/50" />
</div>
<h4 class="item-text">MongoDB</h4>
</div>
<div class="item">
<div class="item-image">
<img src="https://via.placeholder.com/50" />
</div>
<h4 class="item-text">Java</h4>
</div>
<div class="item">
<div class="item-image">
<img src="https://via.placeholder.com/50" />
</div>
<h4 class="item-text">C</h4>
</div>
<div class="item">
<div class="item-image">
<img src="https://via.placeholder.com/50" />
</div>
<h4 class="item-text">C++</h4>
</div>
</div>
</body>
</html>
Related
Does anyone of you know how to create this gallery box and text (with the line) from the image?
Can you help me, please?
I want to learn how to create this gallery box and add a magnifier icon when I hover over the image.
I also want to open the image when I click on it, in full size if possible.
May you please help me with this?
Thank you all for trying to help me, I did this, and it's working. Although I didn't add a magnifier icon on hover.
<div id="portfolio">
<div class="container-fluid w-75">
<div class="row">
<h3 style="color: #bb9754;"> Spoljašnost zgrade </h3>
<hr style="background-color: #bb9754;">
<div class="col-lg-2 col-md-4 col-6 my-3">
<a class="portfolio-box" href="assets/img/portfolio/fullsize/1.jpg" title="Project Name">
<img class="img-fluid" src="https://via.placeholder.com/200x200" alt="..." />
</a>
</div>
</div>
</div>
</div>
Hope this helps:
.container {
width: "80vw";
margin: "0 auto";
}
.heading {
display: flex;
align-items: center;
}
.text {
flex-basis: 15%;
}
.divider {
content: "";
height: 4px;
background: #000;
width: 100%;
}
.gallery {
display: flex;
flex-wrap: wrap;
}
.gallery img {
height: 100px;
max-width: 100px;
margin: 20px;
}
<div class="container">
<div class="heading">
<div class="text">
TEXT
</div>
<div class="divider"></div>
</div>
<div class="gallery">
<img src="https://via.placeholder.com/350x150" alt="" />
<img src="https://via.placeholder.com/350x150" alt="" />
<img src="https://via.placeholder.com/350x150" alt="" />
<img src="https://via.placeholder.com/350x150" alt="" />
<img src="https://via.placeholder.com/350x150" alt="" />
<img src="https://via.placeholder.com/350x150" alt="" />
<img src="https://via.placeholder.com/350x150" alt="" />
<img src="https://via.placeholder.com/350x150" alt="" />
<img src="https://via.placeholder.com/350x150" alt="" />
<img src="https://via.placeholder.com/350x150" alt="" />
<img src="https://via.placeholder.com/350x150" alt="" />
</div>
</div>
#title{
font-size:20px;
color:#A5A195;
display:flex;
justify-content:center;
}
#item{
display:flex;
flex-flow:row wrap;
}
.img{
width:150px;
border-radius:15px;
margin-right: 50px;
margin-top: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test</title>
</head>
<body>
<div id="title">
SPOLJASNJOST ZGRADE
</div>
<hr>
<div id="item">
<img class="img" src="https://via.placeholder.com/350x300">
<img class="img" src="https://via.placeholder.com/350x300">
<img class="img" src="https://via.placeholder.com/350x300">
<img class="img" src="https://via.placeholder.com/350x300">
<img class="img" src="https://via.placeholder.com/350x300">
<img class="img" src="https://via.placeholder.com/350x300">
<img class="img" src="https://via.placeholder.com/350x300">
</div>
</body>
</html>
I have a simple div that simulates table with images that would look like and some styling,
I managed to use CSS to fit images into container width (container as browser or another div), but I am really having hard time with height, SO is it possible to make pictures fit width and height that way?
.cabinet {
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
min-height: 100vh;
}
.module {
display: table-cell;
}
.module button {
border-color: black;
border-style: solid;
border-width: thin;
}
.module img {
width: 100%;
}
<div class="cabinet">
<div class="rack">
<div class="module">
<button>
<img src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg" />
</button>
</div>
<div class="module">
<button>
<img src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg" />
</button>
</div>
<div class="module">
<button>
<img src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg" />
</button>
</div>
<div class="module">
<button>
<img src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg" />
</button>
</div>
</div>
<div class="rack">
<div class="module">
<button>
<img src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg" />
</button>
</div>
<div class="module">
<button>
<img src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg" />
</button>
</div>
<div class="module">
<button>
<img src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg" />
</button>
</div>
<div class="module">
<button>
<img src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg" />
</button>
</div>
</div>
</div>
I have refactored your code a bit. Removed unnecessary HTML and CSS . See if this is the result you want.
.cabinet {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 1px;
}
img {
width: 100%;
object-fit: cover;
border: 1px solid #000;
}
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div class="cabinet">
<div class="module">
<img
src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg"
/>
</div>
<div class="module">
<img
src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg"
/>
</div>
<div class="module">
<img
src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg"
/>
</div>
<div class="module">
<img
src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg"
/>
</div>
<div class="module">
<img
src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg"
/>
</div>
<div class="module">
<img
src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg"
/>
</div>
<div class="module">
<img
src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg"
/>
</div>
<div class="module">
<img
src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg"
/>
</div>
</div>
</body>
</html>
This question already has an answer here:
How do I fill up the page grid and lay out the content widths in a single column?
(1 answer)
Closed 2 years ago.
I'm trying to learn the basics of CSS code to create flex box columns for web development. However, all I managed to do is produce one column of flex boxes. What are some basic CSS codes that would verify that the div cards always fill up the page grid and that for a width small enough, the contents are laid out in a single column?? The first section of code is in HTML. The second section is in CSS. Should I have created a second class for the div card?
<!doctype html>
<html lang="en">
<head>
<!--
HTML Code
-->
<meta charset="utf-8">
<title>Coding Challenge 5-2</title>
<link href="code5-2_layout.css" rel="stylesheet" />
<link href="code5-2_flex.css" rel="stylesheet" />
</head>
<body>
<h1>Social Media Sites</h1>
<section>
<div class="card">
<header><h1>Facebook</h1></header>
<img src="facebook.png" alt="Facebook" class="icon" />
<footer>238,150 followers</footer>
</div>
<div class="card">
<header><h1>Twitter</h1></header>
<img src="twitter.png" alt="Twitter" class="icon" />
<footer>48,871 followers</footer>
</div>
<div class="card">
<header><h1>Instagram</h1></header>
<img src="instagram.png" alt="Instagram" class="icon" />
<footer>171,244 followers</footer>
</div>
<div class="card">
<header><h1>GooglePlus</h1></header>
<img src="google-plus.png" alt="GooglePlus" class="icon" />
<footer>64,288 followers</footer>
</div>
<div class="card">
<header><h1>YouTube</h1></header>
<img src="youtube.png" alt="YouTube" class="icon" />
<footer>Subscribe to our Channel</footer>
</div>
<div class="card">
<header><h1>Vimeo</h1></header>
<img src="vimeo.png" alt="Vimeo" class="icon" />
<footer>Get the Vimeo Feed</footer>
</div>
<div class="card">
<header><h1>Skype</h1></header>
<img src="share.png" alt="Skype" class="icon" />
<footer>Join a Skype Chat</footer>
</div>
<div class="card">
<header><h1>Pinterest</h1></header>
<img src="pinterest.png" alt="Pinterest" class="icon" />
<footer>Create your Page</footer>
</div>
<div class="card">
<header><h1>Bloggr</h1></header>
<img src="bloggr.png" alt="Bloggr" class="icon" />
<footer>Subscribe to our Feed</footer>
</div>
<div class="card">
<header><h1>Tumblr</h1></header>
<img src="tumblr.png" alt="Tumblr" class="icon" />
<footer>Get Daily Updates</footer>
</div>
<div class="card">
<header><h1>Share</h1></header>
<img src="share.png" alt="Share" class="icon" />
<footer>Share our Content</footer>
</div>
<div class="card">
<header><h1>E-mail</h1></header>
<img src="email.png" alt="email" class="icon" />
<footer>E-mail Us!</footer>
</div>
</section>
</body>
</html>
#charset "utf-8";
/*
CSS Code
*/
section {
display: flexbox;
flex-direction: row;
flex-wrap: wrap-reverse;
}
div.card {
display: flex;
flex-basis: 200px;
flex-grow: 1;
flex-shrink: 1;
flex-direction: column;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
}
Firstly, you need to wrap your css inside <style></style> tag to make it work.
Secondly, Flexbox is preferable for single-dimensional use. But you can work around to achieve your goal pretty easily.
<section>
<div class="row">
...
</div>
<div class="row">
...
</div>
</section>
You can, then, set each row to display: flex if you want it this way.
I hope that's what you want
<!doctype html>
<html lang="en">
<head>
<!--
HTML Code
-->
<meta charset="utf-8">
<title>Coding Challenge 5-2</title>
<link href="code5-2_layout.css" rel="stylesheet" />
<link href="code5-2_flex.css" rel="stylesheet" />
<style>
section {
display: flexbox;
flex-direction: row;
flex-wrap: wrap-reverse;
}
div.card {
display: flex;
flex-basis: 200px;
flex-grow: 1;
flex-shrink: 1;
flex-direction: column;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
}
.row
{
background-color: red;
margin: 0 20%;
display: flex;
justify-content: space-evenly;
}
</style>
</head>
<body>
<h1>Social Media Sites</h1>
<section>
<div class="row">
<div>
<header><h1>Facebook</h1></header>
<img src="facebook.png" alt="Facebook" class="icon" />
<footer>238,150 followers</footer>
</div>
<div>
<header><h1>Twitter</h1></header>
<img src="twitter.png" alt="Twitter" class="icon" />
<footer>48,871 followers</footer>
</div>
</div>
<div class="row">
<div>
<header><h1>Facebook</h1></header>
<img src="facebook.png" alt="Facebook" class="icon" />
<footer>238,150 followers</footer>
</div>
<div>
<header><h1>Twitter</h1></header>
<img src="twitter.png" alt="Twitter" class="icon" />
<footer>48,871 followers</footer>
</div>
</div>
</section>
</body>
</html>
I have dynamic div boxes created in a website, I want to have 4 boxes in each row using bootstrap, that's working, but each box has some text at the bottom, the problem is that when the text is too long and it creates a new line, the div expands but the box underneath this div moves to the right, instead of moving all the row underneath down.
This is the html:
<div class="row">
<div ng-repeat=""class="col-sm-3 album-art"> //loop to create the boxes
<div class="thumb">
<div class="box">
<span class="play" ng-click="">►</span>
<div class="overlay"></div>
</div>
<img src= height="200" width="200">
<p>text</p>
<p><i>text</i></p>
</div>
</div>
And this is the css I have:
.album-art{
padding-bottom: 20px;
padding-top: 20px;
margin-bottom: 10px;
}
.thumb {
position: relative;
}
.thumb .box {
position: absolute;
top: 0;
display: block;
width: 200px;
height: 200px;
text-align: center;
text-decoration: none;
cursor: pointer;
}
Basically what I'd need is that when the text overflows and creates a new line, the row below the current row moves down and not move every element to the right.The problem seems to be in the "album-art" class, since I removed all the other classes and the problem still there.
thanks
EDIT: I've added images for a better explanation
This is when everything is normal
But when the text is longer
EDIT2: I put an example here: jsfiddle.net/qgo7a701 you might have to expand the result area to the left in order to see 4 squares per row
I don't understand you question very well , but in bootstrap the row divided to 12 cell, and you can define divs in row with different sizes.and you can use col-[xl,lg,md,sm,xs]-[1 to 12] classes for that. you can look to this link :
http://getbootstrap.com/examples/grid/
for you example below i have tried to make two row with two boxes and i only break the text to prevent it to overflow to next div
.album-art{
padding-bottom: 20px;
padding-top: 20px;
margin-bottom: 10px;
}
p{
word-break: break-all;
}
.thumb {
position: relative;
}
.thumb .box {
position: absolute;
top: 0;
display: block;
width: 200px;
height: 200px;
text-align: center;
text-decoration: none;
cursor: pointer;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="row">
<div ng-repeat=""class="col-sm-3 album-art">
//loop to create the boxes
<div class="thumb">
<div class="box">
<span class="play" ng-click="">►</span>
<div class="overlay">
</div>
</div>
<img src= height="200" width="200"/>
<p style="">text helooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</p>
<p><i>text</i></p>
</div>
</div>
<div ng-repeat=""class="col-sm-3 album-art">
//loop to create the boxes
<div class="thumb">
<div class="box">
<span class="play" ng-click="">►</span>
<div class="overlay">
</div>
</div>
<img src= height="200" width="200"/>
<p style="">text heloooooooooooooooooooooooooooooooooooooooooo</p>
<p><i>text fffffffffffffffffffffffffffffffffffffffffffffffddddddddddddddsssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssdddddddddddddddddddddddddddddddddddd fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</i></p>
</div>
</div>
</div>
<div class="row">
<div ng-repeat=""class="col-sm-3 album-art">
//loop to create the boxes
<div class="thumb">
<div class="box">
<span class="play" ng-click="">►</span>
<div class="overlay">
</div>
</div>
<img src= height="200" width="200"/>
<p style="">text helooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</p>
<p><i>text</i></p>
</div>
</div>
<div ng-repeat=""class="col-sm-3 album-art">
//loop to create the boxes
<div class="thumb">
<div class="box">
<span class="play" ng-click="">►</span>
<div class="overlay">
</div>
</div>
<img src= height="200" width="200"/>
<p style="">text helooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</p>
<p><i>text</i></p>
</div>
</div>
</div>
I tested what you did and it was working as intended. You used 1 row for the complete collection of cols, so they behaved as intended. To change that, you must force a grouping of cols and you can do it like this:
(Resume here:
- Add div class="col-sm-12" style="display: table" and close it after 4 of your "col-sm-3 divs". Add another one for the rest of the "col-sm-3 divs". Everything should be inside the div class="row". (I would have used two rows every 4 "col-sm-3 divs" but, is your code).
- Change the "style" into a css, include it in your stylesheet, add the class to the div. End.
.album-art {
padding-bottom: 20px;
padding-top: 20px;
margin-bottom: 10px;
}
.thumb {
position: relative;
}
.thumb .box {
position: absolute;
top: 0;
display: block;
width: 200px;
height: 200px;
text-align: center;
text-decoration: none;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<style>
.album-art {
padding-bottom: 20px;
padding-top: 20px;
margin-bottom: 10px;
}
.thumb {
position: relative;
}
.thumb .box {
position: absolute;
top: 0;
display: block;
width: 200px;
height: 200px;
text-align: center;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body>
<div class="row">
<div class="col-sm-12" style="display: table;">
<div class="col-sm-3" style="padding-bottom: 20px; padding-top: 20px">
<div class="thumb">
<div class="box">
<span class="play"></span>
<div class="overlay"></div>
</div>
<img src="#" height="50" width="50" />
<p style="color: black">tedddddddxxxx ewhuiofhew hfiuhiufw shidfshksdhxfffffffffffffxxxxxddddddxt</p>
</div>
</div>
<div class="col-sm-3" style="padding-bottom: 20px; padding-top: 20px">
<div class="thumb">
<div class="box">
<span class="play"></span>
<div class="overlay"></div>
</div>
<img src="#" height="50" width="50" />
<p style="color: black">text</p>
</div>
</div>
<div class="col-sm-3" style="padding-bottom: 20px; padding-top: 20px">
<div class="thumb">
<div class="box">
<span class="play"></span>
<div class="overlay"></div>
</div>
<img src="#" height="50" width="50" />
<p style="color: black">text</p>
</div>
</div>
<div class="col-sm-3" style="padding-bottom: 20px; padding-top: 20px">
<div class="thumb">
<div class="box">
<span class="play"></span>
<div class="overlay"></div>
</div>
<img src="#" height="50" width="50" />
<p style="color: black">text</p>
</div>
</div>
</div>
<div class="col-sm-12" style="display: table;">
<div class="col-sm-3" style="padding-bottom: 20px; padding-top: 20px">
<div class="thumb">
<div class="box">
<span class="play"></span>
<div class="overlay"></div>
</div>
<img src="#" height="50" width="50" />
<p style="color: black">text</p>
</div>
</div>
<div class="col-sm-3" style="padding-bottom: 20px; padding-top: 20px">
<div class="thumb">
<div class="box">
<span class="play"></span>
<div class="overlay"></div>
</div>
<img src="#" height="50" width="50" />
<p style="color: black">text</p>
</div>
</div>
<div class="col-sm-3" style="padding-bottom: 20px; padding-top: 20px">
<div class="thumb">
<div class="box">
<span class="play"></span>
<div class="overlay"></div>
</div>
<img src="#" height="50" width="50" />
<p style="color: black">text</p>
</div>
</div>
<div class="col-sm-3" style="padding-bottom: 20px; padding-top: 20px">
<div class="thumb">
<div class="box">
<span class="play"></span>
<div class="overlay"></div>
</div>
<img src="#" height="50" width="50" />
<p style="color: black">text</p>
</div>
</div>
</div>
</div>
</body>
</html>
I am new to responsive design and I am trying to use bootstrap.
My problem is that I cannot get a portion of the html to display on a single row when on small screens.
I have the following HTML:
<!DOCTYPE HTML>
<html>
<head lang="en">
<title>Test</title>
<meta content="IE=11.0000" http-equiv="X-UA-Compatible">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-width=1.0">
<link href="files/bootstrap.css" rel="stylesheet">
<link href="files/bootstrap-responsive.css" rel="stylesheet">
<style>
body, html
{
height: 100%;
margin: 0;
padding: 0;
}
.container-fluid
{
display: table !important;
height: 100% !important;
width: 100%;
}
.row-fluid
{
display: table-row !important;
height: 100% !important;
width: 100%;
}
.fullwidth
{
width: 100% !important;
}
#media screen and (min-width: 750px)
{
.top-bar-items
{
display: table !important;
height: 80px;
}
}
.content
{
display: table-cell;
vertical-align: middle;
text-align: center;
}
.navbar-cell
{
padding-top: 18px;
}
.blue
{
background-color: Blue;
}
.red
{
background-color: red;
}
.green
{
background-color: green;
}
</style>
</head>
<body>
<header>
<div class="container-fluid">
<div class="row-fluid">
<div class="col-md-5 col-sm-7 text-left">
<img src="images/logo.png" />
</div>
<div class="col-md-2 col-sm-5 red top-bar-items">
<div class="content">
<div class="row-fluid">
<div class="col-md-9 green col-sm-7 col-xm-6">
<img src="images/linkedin.png" />
<img src="images/linkedin.png" />
<img src="images/linkedin.png" />
</div>
<div class="col-md-3 blue col-sm-5 col-xm-6">
<img src="images/default.png" />
<img src="images/default.png" />
</div>
</div>
</div>
</div>
<div class="col-md-5 text-center visible-desktop">
<div style="padding-top:20px;">
<img src="images/header.png" />
</div>
</div>
</div>
<div class="row-fluid">
<div class="col-md-6 blue">
Something2
</div>
<div class="col-md-6 red">
Something2
</div>
</div>
</div>
</header>
<script src="files/jquery.min.js"></script>
<script src="files/bootstrap.js"></script>
</body>
</html>
The html code I am referring to is the following:
<div class="col-md-2 col-sm-5 red top-bar-items">
<div class="content">
<div class="row-fluid">
<div class="col-md-9 green col-sm-7 col-xm-6">
<img src="images/linkedin.png" />
<img src="images/linkedin.png" />
<img src="images/linkedin.png" />
</div>
<div class="col-md-3 blue col-sm-5 col-xm-6">
<img src="images/default.png" />
<img src="images/default.png" />
</div>
</div>
</div>
</div>
This when on medium and large screens displays in a single row but when displayed on a small screen it breaks into two rows which is the problem.
Thanks in advance.
As AntB pointed out, this is just a case of accidentally using col-xm-6 instead of col-xs-6.
When a column size is applied for any screen screen size, all sizes below it are automatically given a width of 12 columns unless otherwise specified. In this case the class col-xm-6 doesn't hit any rules so it doesn't tell bootstrap anything. When there are more than 12 columns worth of elements in a given row, they just wrap over into the next row, so your two small 12-column width divs just wrapped into two rows.
Change it to this:
<div class="content">
<div class="row-fluid">
<div class="col-md-9 green col-sm-7 col-xs-6">
<!-- content -->
</div>
<div class="col-md-3 blue col-sm-5 col-xs-6">
<!-- content -->
</div>
</div>
</div>
Demo in fiddle