I have a website I'm making updates to, and one of the updates is making an image in the center larger without causing the text and alignment to change. The pictures below are what I'm working on and what I want to avoid.
Basically, I need the logo in the middle to be larger without messing with how the text is lined up, but whenever I make it larger it pushes all the text down and takes the logo out of the center. Below is the code for the area I'm working on and the images..
HTML
<div class="padding">
<div class="container">
<div class="row text-center mt-30">
<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12">
<div class="text-icons" ><img src="images/<?php echo $icons[2]["icon_img"]; ?>"></div>
<div class="featureitem img-item">
<!-- <strong >Empowerment</strong> -->
<p class="">An innovative approach that drives the discovery of new medicines. By collaborating with Circuit Clinical’s network, we have empowered individuals to take charge of the journey to finding cures through their participation.</p>
</div>
</div>
<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12">
<div class="text-icons-middle" >
<img src="images/<?php echo $icons[0]["icon_img"]; ?>">
</div>
<div class="featureitem img-item">
<!-- <strong >Engagement</strong> -->
<p class="">We are an Integrated Research Organization [IRO] dedicated to optimizing the clinical research experience by delivering a comprehensive research program into our physicians practices. We make clinical research more manageable with our dedicated team of research professionals who match clinical trials to a physician’s areas of interest, assist with patient recruitment and study visits while filing all regulatory requirements.</p>
</div>
</div>
<!-- <div class="border"></div> -->
<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12">
<div class="text-icons" ><img src="images/<?php echo $icons[1]["icon_img"]; ?>"></div>
<div class="img-item">
<!-- <strong >Enablement</strong> -->
<p class="">Transforms the experience of finding and participating in clinical trials for patients everywhere. It empowers prospective patients to confidently select a trial site trusted by their peers. Sites, sponsors and CROs leverage TrialScout<sup>TM</sup> to share their story and engage patients to consider participating in their trials.</p>
</div>
</div>
<!-- <div class="border"></div> -->
<div class="col-md-1"></div>
</div>
</div>
</div>
CSS
.text-icons img{
clear: both;
height: auto;
max-width: 300px;
margin: 0 auto;
margin-bottom: 15px;
margin-top: 15px;
}
.text-icons-middle img{
clear: both;
height: auto;
max-width: 300px;
margin: 0 auto;
margin-bottom: 15px;
margin-top: 15px;
}
I think you can use "position" method to avoid this problem, just set the "position" of parent div to "relative" and the div of "text" to "absolute", then set the text to have a fixed-top value. So when you increase the size of the picture, it wont effect the position of below text. I had made a simple program for your reference:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Template</title>
<style>
#parent_div{
position: relative;
}
#div_image{
position: absolute;
top:0px;
left:0px;
background-color: green;
height:100px;
width: 300px;
}
#div_text{
position: absolute;
top:150px;
left:0px;
size:5px;
height:100px;
width: 300px;
}
#button{
position: absolute;
left:400px;
}
</style>
</head>
<body>
<div id="parent_div">
<div id="div_image">
<img src="">
<div>
<div id="div_text">
Basically, I need the logo in the middle to be larger without messing with how the text is lined up, but whenever I make it larger it pushes all the text down and takes the logo out of the center. Below is the code for the area I'm working on and the images..
</div>
</div>
<button id="button" type="button" onclick="inc_size()">Increase size</button>
<script>
function inc_size(){
var test = document.getElementById("div_image").style.height = "150px";
}
</script>
</body>
</html>
Related
please see the picture and the problem.
you can see that the p element is not full but breaks a line.
can you tell me the reason?
thanks a lot!
The code consists of three blocks, each with three text descriptions. But in the second text block, when the page pixel is less than 768px, even if a line of text is not full, it will still break the line. Right? I looked at my code and still didn't know what was wrong. I hope you can answer my questions. thank you
.info{
background-color: #ffffff;
box-shadow: #aaa9a9 5px 3px 50px ;
margin-top: 40px;
border-radius: 15px;
}
.info1_1{
height: 350px;
}
.info1_2{
float: right;
margin-top: 40px;
}
.info2_1{
height: 450px;
}
.info3_1{
height: 400px;
}
.info p{
color: #eb6100;
font-size: 20px;
margin: 0 8%;
padding-top: 10%;
}
.info_img{
text-align: center;
margin: 30px auto;
}
#media screen and (max-width: 768px){
.info1,.info2,.info3{
width: 70%;
margin: 0 auto;
}
.col-sm-5,.col-sm-6{
float: none;
}
}
#media screen and (max-width: 640px){
.info1,.info2,.info3{
width: 90%;
}
}
#media screen and (max-width: 500px){
.info p{
font-size: 16px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maxinum-scale=1.0,user-scale=no" />
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
<title>Hamiio technology--professional software and hardware customization</title>
</head>
<body>
<header></header>
<div class="body">
<div class="about">
<div class="row">
<div class="col-lg-1 col-md-1 col-sm-1"></div>
<div class="row col-lg-11 col-md-11">
<div class="info1 col-lg-6 col-md-6 col-sm-6">
<div class="info1_1 info">
<p>Hami technology, founded by shenzhen yicu innovation software co., LTD in 2010, is located in huizhou, guangdong, the beautiful founder of the former xunlei group of system architects, the company has a number of long-term software development professionals.</p>
</div>
<div class="info1_2 hidden-sm"><img src="paper.png"></div>
</div>
<div class="info2 col-lg-5 col-md-5 col-sm-5 ">
<div class="info2_1 info">
<p>The company's main business is: 1. Software customization development. 2.Customized development of software and hardware. Including system customization (Linux , Android , wince), software development.
</p>
<div class="info_img">
<img src="solution2.png">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-2 "></div>
<div class="col-lg-8 col-md-8 col-sm-8 info3">
<div class="info info3_1">
<p>After more than 10 years of development experience, our project implementation team can more accurately make corresponding solutions according to the actual needs of customers. Hami team is a dedicated customer service team to give customers a perfect result.</p>
<div class="info_img">
<img src="img/solution1.png">
</div>
</div>
</div>
</div>
</div>
</div>**strong text**
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
i got the answer!
because bootstrap class "hidden-sm" just make the element's opacity to 0. So the element still taking up space.
Good day, as the title says, I am having issues with aligning the text in the exact center of my image. I tried adding a class with the css vertical-align:middle with no effect. Also, I tried using the span class to surround the text that will be centered. Both the image and the text are encased in a bootstrap grid. Any help will be appreciated thank you.
HTML/Bootstrap:
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<img src="img/mission-mywhitecard.jpg" class="img-responsive align_text">
</div>
<div class="col-md-9 justify_text">
<span>
<h2 class="med_bg">OUR MISSION</h2>
<p class="mv_font">“To provide a mutually-beneficial platform for partners through high-quality, lower cost and friendly access to health, wellness and beauty.”</p>
</span>
</div>
</div>
</div>
CSS:
.align_text {
vertical-align: middle;
}
Considering you are using bootstrap4, you can achieve that using the class .align-items-center, or use display:flex as stated by others :)
img {
background: gray;
height: 250px;
display: block;
max-width: 100%;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-3">
<img src="img/mission-mywhitecard.jpg" class="img-responsive align_text">
</div>
<div class="col-9 justify_text">
<h2 class="med_bg">OUR MISSION</h2>
<p class="mv_font">“To provide a mutually-beneficial platform for partners through high-quality, lower cost and
friendly access to health, wellness and beauty.”</p>
</div>
</div>
</div>
I believe this produces what you ask for. It is using 2 flexboxes:
First one (.row) to put the image and text next to each other in a responsive way;
Second one (.col-md-9) to position the span in the center
html,
body {
width: 100%;
}
.row {
display: flex;
width: 100%;
}
.row>* {
flex: 1; /* Allow the flex items to grow and shrink */
}
.col-md-9 {
display: flex;
justify-content: center;
align-items: center;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<img src="https://via.placeholder.com/100x300" class="img-responsive align_text">
</div>
<div class="col-md-9">
<span>
<h2 class="med_bg">OUR MISSION</h2>
<p class="mv_font">“To provide a mutually-beneficial platform for partners through high-quality, lower cost and friendly access to health, wellness and beauty.”</p>
</span>
</div>
</div>
</div>
You can aslo use align-self-center in column div class without any height of image and other css also add larger image no design change when you use align-self-center in column div no need set image height
.align_text {
vertical-align: middle;
}
img {
max-width: 100%;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<img src="http://placekitten.com/1000/500" class="img-responsive align_text">
</div>
<div class="col-md-9 justify_text align-self-center">
<span>
<h2 class="med_bg">OUR MISSION</h2>
<p class="mv_font">“To provide a mutually-beneficial platform for partners through high-quality, lower cost and friendly access to health, wellness and beauty.”</p>
</span>
</div>
</div>
</div>
I added some images to two columns in a single row using Bootstrap 4. There's a gap between the first and second column, causing unwanted uneven spacing between my images (as you can see below). I would like the spacing to be the same between the second and third image as between the first and second (and third and fourth).
I tried following the directions on the Bootstrap 4 documentation for the no-gutters class, adding it to the row div as well as the following CSS, which didn't do anything (maybe I'm supposed to change something?):
.no-gutters {
margin-right: 0;
margin-left: 0;
> .col,
> [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
}
I also tried (as suggested elsewhere) this, which also did nothing:
.row.no-gutters {
margin-right: 0;
margin-left: 0;
}
.row.no-gutters > [class^="col-"],
.row.no-gutters > [class*=" col-"] {
padding-right: 0;
padding-left: 0;
}
Additionally, here's the relevant HTML:
<div class="card">
<div class="card-header">
<h3 class="text-center">Works</h3>
</div>
<div class="card-body">
<!-- Class no-gutters removes gutters (gaps) between column content -->
<div class="row text-center no-gutters">
<!-- Using two col classes; Bootstrap automatically creates two equal-width columns for all devices -->
<div class="col">
<img src="https://image.ibb.co/mYFYe7/hum3.jpg" alt="The Natural History of Religion" class="works">
<img src="https://image.ibb.co/iRtr1n/hum0.jpg" alt="A Treatise of Human Nature" class="works">
</div>
<div class="col">
<img src="https://image.ibb.co/dZ5Ye7/hum2.jpg" alt="An Enquiry Concerning Human Understanding" class="works">
<img src="https://image.ibb.co/kdbjmn/hum4.jpg" alt="An Enquiry Concerning the Principles of Morals" class="works">
</div>
</div>
</div>
</div>
View CodePen for full code.
The no-gutters was necessary but the issue now is with alignment. You are using text-center which make the image centred in each col. A solution is to put all the image in the same col
<div class="row text-center no-gutters">
<div class="col">
<img src="https://image.ibb.co/mYFYe7/hum3.jpg" alt="The Natural History of Religion" class="works">
<img src="https://image.ibb.co/iRtr1n/hum0.jpg" alt="A Treatise of Human Nature" class="works">
<img src="https://image.ibb.co/dZ5Ye7/hum2.jpg" alt="An Enquiry Concerning Human Understanding" class="works">
<img src="https://image.ibb.co/kdbjmn/hum4.jpg" alt="An Enquiry Concerning the Principles of Morals" class="works">
</div>
</div>
Or change text-alignment for each col BUT you will need to re-adjust it on small devices:
<div class="row no-gutters">
<div class="col text-right">
<img src="https://image.ibb.co/mYFYe7/hum3.jpg" alt="The Natural History of Religion" class="works">
<img src="https://image.ibb.co/iRtr1n/hum0.jpg" alt="A Treatise of Human Nature" class="works">
</div>
<div class="col text-left">
<img src="https://image.ibb.co/dZ5Ye7/hum2.jpg" alt="An Enquiry Concerning Human Understanding" class="works">
<img src="https://image.ibb.co/kdbjmn/hum4.jpg" alt="An Enquiry Concerning the Principles of Morals" class="works">
</div>
</div>
Full code for the first solution:
body {
margin-top: 2em;
font-family: "Raleway", sans-serif;
}
h1 {
text-transform: uppercase;
}
.jumbotron {
text-align: center;
}
img {
margin: 1em;
width: 90%;
}
img.works {
height: 300px;
width: auto;
}
.no-gutters {
margin-right: 0;
margin-left: 0;
> .col,
> [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
}
blockquote {
text-align: left;
/* text-align: center (applied to .jumbotron) requires an element to be inline or contain text as direct child descendant to be functional. Since blockquote's text is inside block-level elements <p> and <footer>, setting it to display: inline-block is a workaround. Note also block is needed for top/bottom margins to appear */
display: inline-block;
font-family: Georgia, serif;
font-style: italic;
margin: 4em 0;
padding: 0.35em 2.5em;
line-height: 1.45;
position: relative;
color: #383838;
}
blockquote p {
font-size: 1em !important;
}
blockquote:before {
display: block;
padding-left: 10px;
content: "\201C";
font-size: 3em;
/* Element with abolute positioning is positioned relative to nearest positioned ancestor */
position: absolute;
/* Offsets from edges of element's containing block, ancestor to which element is relatively positioned */
left: -3px; /* Negative moves it left */
top: -13px; /* Negative moves it toward top */
color: #7a7a7a;
}
blockquote cite {
color: #999;
font-size: 14px;
margin-top: 5px;
}
ul {
/* text-align: center, applied to parent jumbotron class, only works on inline elements; applying this ensures ul is centered */
display: inline-block;
text-align: left;
/* Bottom set to 4em to match margin above ul created by blockquote */
margin-bottom: 4em;
list-style: none;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>David Hume</title>
<!-- Ensures proper rendering and touch zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Provides a responsive, fixed-width container. Needed as outermost wrapper in order for Bootstrap grid system to work correctly -->
<div class="container">
<!-- Big grey box for calling extra attention to content -->
<div class="jumbotron">
<div class="row">
<!-- Using a single col in a row, Bootstrap automatically creates a single column (works for all devices) -->
<div class="col">
<h1>David Hume</h1>
<h6>Philosopher, Historian, Economist, and Essayist</h6>
<div class="card">
<div class="card-body">
<img src="https://cdn.theatlantic.com/assets/media/img/2015/09/03/BOB_Essay_Opener_WEBCrop/1920.jpg?1441298243" alt="Portrait of David Hume">
<div class="caption text-secondary">"Portrait of David Hume," 1754, by Allan Ramsay</div>
</div>
</div>
<blockquote>
<p>A wise man proportions his belief to the evidence.</p>
<footer class="blockquote-footer"><cite>David Hume</cite></footer>
</blockquote>
<h6>A brief timeline in events of David Hume's life:</h6>
<br>
<ul>
<li><strong>1711</strong> – Born as David Home in Edinburgh, Scotland</li>
<li><strong>1713</strong> – Father dies</li>
<li><strong>1723</strong> – Enrolls at University of Edinburgh at the age of 12 (14 was typical)</li>
<li><strong>1734</strong> – Changes surname to Hume</li>
<li><strong>1739</strong> – Publishes Books 1 and 2 of <em>A Treatise on Human Nature</em></li>
<li><strong>1748</strong> – Publishes <em>An Enquiry Concerning Human Understanding</em></li>
<li><strong>1751</strong> – Publishes <em>An Enquiry Concerning the Principles of Morals</em></li>
<li><strong>1776</strong> – Dies at the age of 65</li>
</ul>
</div>
</div> <!-- End of row div -->
<div class="card">
<div class="card-header">
<h3 class="text-center">Works</h3>
</div>
<div class="card-body">
<!-- Class no-gutters removes gutters (gaps) between column content -->
<div class="row text-center no-gutters">
<!-- Using two col classes; Bootstrap automatically creates two equal-width columns for all devices -->
<div class="col">
<img src="https://image.ibb.co/mYFYe7/hum3.jpg" alt="The Natural History of Religion" class="works">
<img src="https://image.ibb.co/iRtr1n/hum0.jpg" alt="A Treatise of Human Nature" class="works">
<img src="https://image.ibb.co/dZ5Ye7/hum2.jpg" alt="An Enquiry Concerning Human Understanding" class="works">
<img src="https://image.ibb.co/kdbjmn/hum4.jpg" alt="An Enquiry Concerning the Principles of Morals" class="works">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<blockquote>
<p>Be a philosopher; but, amidst all your philosophy, be still a man.</p>
<footer class="blockquote-footer"><cite>David Hume</cite></footer>
</blockquote>
<h6>Learn more on Wikipedia.</h6>
</div>
</div>
</div> <!-- End of jumbotron div -->
</div> <!-- End of container div -->
<footer class="text-center">
<hr>
<p>Written and coded by Natalie Cardot</p>
</footer>
</body>
</html>
I have a container with 4 rows each row has two columns in 4:8 ratio.
For each column it works perfectly for screens with width more than 1080px, for less than this the content overlaps.
What i want to do, is make all the columns turn into rows with a full width of the screen.
If anyone have any recommendation to get better results please help me.
I have found many questions for people having the same issue and tried their solution but nothing worked for me.
.proctitleleft {
font-size: 20px;
position: absolute;
left: 90px;
top: 20px;
bottom: 20px;
}
.procimageleft {
position: relative;
margin-bottom: 40px;
margin-right: 90px;
margin-top: 20px;
}
.procimageright {
position: relative;
margin-bottom: 40px;
margin-left: 90px;
}
.procparagleft1 {
position: absolute;
left: 100px;
top: 138px;
font-size: 14px;
}
.procparagleft2 {
position: absolute;
left: 100px;
top: 138px;
font-size: 14px;
}
.procparagleft3 {
position: absolute;
left: 100px;
top: 138px;
font-size: 14px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="processcontainer">
<div class="arw_tab_title">
<div class="tab_title">
<h2 class="title">The Process</h2>
<p class=""></p>
</div>
<div class="tab_sub_title">
<h2 class="title">our perfect process</h2>
</div>
</div>
<div class="row">
<div class="col-xs-8">
<div class="proctitleleft">
<h3>1-Far far away</h3>
</div>
<div class="procparagleft1">
<p>It all started with a farmer and his extraordinary efforts to grow what people later called the best cotton in town
<br>To Bangladesh we went to see if that was true.And it was!<br>
</p>
</div>
</div>
<div class="col-xs-4">
<div class="procimageleft">
<img src="https://cdn.shopify.com/s/files/1/1965/8259/t/4/assets/process1.png">
</div>
</div>
<div class="row">
<div class="col-xs-4">
<div class="procimageright">
<img src="https://cdn.shopify.com/s/files/1/1965/8259/t/4/assets/process2.png">
</div>
</div>
<div class="col-xs-8">
<div class="proctitleleft">
<h3>2-Lavish Studio left their mark </h3>
</div>
<div class="procparagleft2">
<p>Oh buddy! What can I say?
<br>Working around the clock to deliver powerful yet very elegant designs that was approved by an internal community before seeing the light of day<br>
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-8">
<div class="proctitleleft">
<h3>3-Complete the artwork</h3>
</div>
<div class="procparagleft3">
<p>Partnering up with the same factory that deal with Adidas, Reebok and Name, we were able to transform an idea into a very big powerful reality
</p>
</div>
</div>
<div class="col-xs-4">
<div class="procimageleft">
<img src="https://cdn.shopify.com/s/files/1/1965/8259/t/4/assets/process3.png">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<div class="procimageright">
<img src="https://cdn.shopify.com/s/files/1/1965/8259/t/4/assets/process4.png">
</div>
</div>
<div class="col-xs-8">
<div class="proctitleleft">
<h3>4- Quality meets perfection
</h3>
</div>
<div class="procparagleft2">
<p>We stand by our products because we’re confident in what we deliver.
<br> That’s why we designed an unsurpassed shopping and unboxing experience to befit such creations
<br>
</p>
</div>
</div>
</div>
</div>
use col-md-4 and col-md-8 instead of col-xs-* so you have 4:8 ratio above 992px width and full col-width under 992px. You don't have to do it by your own. It's the standard behavior of bootstrap.
see https://getbootstrap.com/css/#grid-media-queries for further details
use three classes col-md-4, col-sm-4 and col-xs-12, last one for smallest devices full width div tag.
I'm trying to build a company intranet page, with a "grid" style layout. In the past I've used tables, however I know that these are extremely problematic when used for layouts, hence I am attempting to construct the layout using bootstrap and Divs - however it's proving problematic.
Ultimately what I'm trying to achieve in the top right hand corner of the page is:
However what I'm ACTUALLY rendering is the following:
Ignoring the fact that the weather data is a little more expanded, I'm struggling to get the desired result and am really tempted to revert back to tables to get this thing to line up!
Here is the code that I am using on the main template page:
<div class="row">
<div class="col-sm-3">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-5">
<img src="~/Content/Images/companylogo.png" style="float: right; padding-right: 15px; padding-bottom:25px;"/>
<div style="padding-top:25px; border-bottom: 1px solid black;">
<div id="weatherDiv" style="float:left;"></div>
<div id="dateDiv" style="float:right; padding-right:10px; vertical-align: bottom;"></div>
</div>
</div>
</div>
And then upon page load, the two DIVs (weatherDiv & dateDiv) are filled in using AJAX:
WeatherDiv:
<div id="weatherDiv" style="float:left;">
<link href="/Content/css/weather-icons.css" rel="stylesheet">
<link href="/Content/css/weather-icons-wind.css" rel="stylesheet">
<div>
<ul style="list-style: none; margin-left: 0px; padding-left:0px;">
<li>Brisbane - Hot and sunny - 32c <i class="wi wi-day-sunny"></i></li>
<li>Melbourne - Early shower or two - 17c <i class="wi wi-showers"></i></li>
</ul>
</div>
</div>
DateDiv:
<div id="dateDiv" style="float:right; padding-right:10px; vertical-align: bottom;">
<h4>Friday, 20 November 2015</h4>
</div>
I understand totally that my use of CSS, Bootstrap & Divs are almost laughable, however the above is a result of hours of trying and trying!
Any help is much appreciated.
It's hard to be exactly sure how you want this layout to work on mobile. But here is a jsfiddle I've created that could help.
https://jsfiddle.net/2dqqajs1/
body {
min-width: 320px;
}
.text-right img{
display: inline-block;
}
/*extra small screens only*/
#media (max-width: 767px) {
#weatherDiv{
text-align: right;
}
}
hr {
margin: 0;
border-top: solid 2px #e0e0e0;
}
<div class="container">
<div class="row">
<div class="col-xs-4"></div>
<div class="col-xs-8">
<div class="row">
<div class="col-xs-12 text-right">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=CompanyLogo&w=400&h=100" class="img-responsive" />
</div>
</div>
<div class="row">
<div id="dateDiv" class="col-xs-12 col-sm-5 col-sm-push-7 text-right">
<h4>Friday</span>, 20 Nov<span class="hidden-xs hidden-sm">ember</span> 2015</h4>
</div>
<div id="weatherDiv" class="col-xs-12 col-sm-7 col-sm-pull-5">
<ul style="list-style: none; margin-left: 0px; padding-left:0px;">
<li>Bris<span class="hidden-sm">bane</span> <span class="hidden-xs">- Hot and sunny </span>- 32c <i class="fa fa-sun-o"></i></li>
<li>Melb<span class="hidden-sm">ourne</span> <span class="hidden-xs">- Early shower or two </span>- 17c <i class="fa fa-cloud"></i></li>
</ul>
</div>
<div class="col-xs-12"><hr/></div>
</div>
</div>
</div>
</div>