I am working on a small project whose front-end is built with the latest version of Bootstrap. I have my sections of the homepage, but I am stuck on making them behave the way I want.
<body>
<div class="container-fluid max-height">
<div class="row max-height">
<div class="col-md-2 col-sm-12 col-xs-12 site-nav">
<div class="row">
<div class="brand">
<a href="index.html">
<img src="http://placehold.it/200x320" class="img-responsive" alt="logo" />
</a>
</div><!-- .brand -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sem libero, vulputate vel tellus eu, suscipit facilisis metus. Nulla tempus cursus elit, eget pellentesque risus euismod ut. Fusce sed sodales mauris. In velit arcu, blandit sed tempor vitae, feugiat eu erat. Phasellus ligula odio, porta in libero non, ultrices mollis purus. Duis sollicitudin aliquet nunc, ut dictum turpis laoreet eget. Phasellus eu neque efficitur, bibendum odio vitae, sagittis libero. Proin commodo efficitur magna ac sollicitudin. Aenean bibendum urna at diam accumsan tincidunt. Proin ac elit vitae augue rutrum convallis. Donec magna ex, tempor at libero quis, mattis pharetra nunc. Maecenas sit amet nisi in odio interdum interdum.</p>
</div><!-- .row -->
</div><!-- .col-md-2 -->
<div class="col-md-10 col-sm-12 site-content">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12 info-bar">
<h2>SOME TITLE</h2>
</div><!-- .col-md-12 -->
<div class="col-md-6">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sem libero, vulputate vel tellus eu, suscipit facilisis metus. Nulla tempus cursus elit, eget pellentesque risus euismod ut. Fusce sed sodales mauris. In velit arcu, blandit sed tempor vitae, feugiat eu erat. Phasellus ligula odio, porta in libero non, ultrices mollis purus. Duis sollicitudin aliquet nunc, ut dictum turpis laoreet eget. Phasellus eu neque efficitur, bibendum odio vitae, sagittis libero. Proin commodo efficitur magna ac sollicitudin. Aenean bibendum urna at diam accumsan tincidunt. Proin ac elit vitae augue rutrum convallis. Donec magna ex, tempor at libero quis, mattis pharetra nunc. Maecenas sit amet nisi in odio interdum interdum.</p>
<p>Quisque ligula ex, pellentesque sit amet ligula non, ullamcorper egestas nulla. Sed in sapien ut velit finibus scelerisque ac quis purus. Etiam libero nibh, euismod id augue quis, condimentum aliquam diam. Integer faucibus vitae velit sed iaculis. Praesent laoreet neque est, at pharetra nunc scelerisque sit amet. Curabitur fringilla ex a quam commodo, quis hendrerit ipsum ullamcorper. Vestibulum pretium leo odio, feugiat tristique augue laoreet id. Aenean lobortis, mi sit amet pellentesque condimentum, lectus velit gravida diam, a consequat arcu magna eget diam. Phasellus in iaculis dolor, nec rhoncus dolor.</p>
</div><!-- .col-md-6 -->
<div class="col-md-6">
<div class="article-photo">
<img src="http://placehold.it/500x350" class="img-responsive" alt="article" />
</div>
</div>
</div><!-- .row -->
</div><!-- .col-md-10 -->
</div><!-- .row -->
</div><!-- .container-fluid -->
</body>
Here is a JSFiddle.
I would like the title bar and sidebar to stay where they are and not scroll with the content. The only thing I want scrolling is the content (in blue).
How can I achieve this purely with CSS in Bootstrap?
If that top section is to be part of a dynamic page I would read about the Bootstrap Navbar (http://getbootstrap.com/components/#navbar). A very powerful tool that will be more dynamic than simple scroll styling for your page.
For a simple answer to your current fiddle you'll need to set the scroll to overflow and set a fixed height on the div(s) that you want to scroll. Adding these css attributes to the scrolling divs does what you describe.
style="overflow: scroll; max-height: 100px"
Fiddle here: http://jsfiddle.net/xb6k5vth/1/
Related
I have a page with 5 divs and a footer. I want for one DIV to be stickied at the bottom of a screen while a user scrolls. I had half achieved this with fixed bottom but then it would overlap the footer. Another thing I tried was to have the footer with a higher z-index but I'd prefer the sticky DIV to not go behind the footer. Eg. If I scroll down and my sticky div is at the bottom of the screen and I reach the footer, it will dock touching the top of the footer until I scroll back up in which case it would follow me back up the page but always stay at the bottom of the screen
http://jsfiddle.net/aq9Laaew/194890/
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container">
<div class="row">
<div class="col">
One
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras auctor mollis mi id molestie. Quisque id commodo lectus. Morbi lacus arcu, venenatis eu faucibus at, fermentum eu massa. Praesent non mauris mattis nisl maximus luctus quis a ex. Nullam rutrum bibendum bibendum. Sed felis ligula, placerat vitae lacus et, eleifend porta velit. In hac habitasse platea dictumst. Vivamus pharetra, tellus id rutrum accumsan, neque urna tincidunt sapien, in faucibus tortor enim sed purus. Curabitur posuere venenatis purus, tincidunt placerat tellus pretium ac. Mauris elementum nulla id velit fringilla luctus.
Curabitur dolor nulla, feugiat a enim id, eleifend ullamcorper augue. Curabitur sit amet neque ultrices, ornare risus id, aliquam augue. Curabitur finibus vestibulum enim nec feugiat. Nulla ac mauris ultricies, laoreet risus ut, rutrum sapien. Pellentesque sed suscipit magna. Ut vel metus at turpis semper rutrum non ut ante. Nunc venenatis nisl odio, ac eleifend ligula lacinia dictum. Sed laoreet luctus arcu, ut mattis orci facilisis a. Pellentesque sollicitudin nulla non augue semper ullamcorper. Nam nec rutrum diam. Sed purus ex, dignissim mollis mauris ut, dignissim posuere libero. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris vel euismod urna, a sodales libero. Phasellus risus orci, scelerisque sit amet nulla eu, pharetra eleifend augue.
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin bibendum mauris ornare mi porta, sit amet mattis dolor fringilla. Nunc convallis felis odio, id dapibus enim dapibus non. Nam eleifend, turpis eget tincidunt mollis, justo eros lacinia purus, quis tempor ligula purus ac velit. Proin blandit nec nulla et sollicitudin. In quis turpis ante. Nullam elementum et enim blandit venenatis. Aliquam tristique tortor non neque lacinia venenatis malesuada sit amet nisi. Etiam congue suscipit quam at laoreet. Maecenas purus lectus, maximus at luctus aliquam, consequat nec justo. Morbi libero libero, ornare sed mattis vel, consequat id lorem. Morbi pulvinar, neque eu tempus euismod, ipsum massa congue felis, et consectetur dui quam nec tortor. Donec neque nunc, sodales vel nibh sit amet, finibus tempus nibh. Quisque euismod dignissim quam, nec tempus dolor tristique nec. Nulla eget justo pulvinar, rutrum quam non, consequat mauris. </div>
</div>
<div class="row">
<div class="col">
This DIV Sticks BECAUSE IMPORTANT INFO GOES HERE </div>
</div>
<div class="row">
<div class="col">
Three
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras auctor mollis mi id molestie. Quisque id commodo lectus. Morbi lacus arcu, venenatis eu faucibus at, fermentum eu massa. Praesent non mauris mattis nisl maximus luctus quis a ex. Nullam rutrum bibendum bibendum. Sed felis ligula, placerat vitae lacus et, eleifend porta velit. In hac habitasse platea dictumst. Vivamus pharetra, tellus id rutrum accumsan, neque urna tincidunt sapien, in faucibus tortor enim sed purus. Curabitur posuere venenatis purus, tincidunt placerat tellus pretium ac. Mauris elementum nulla id velit fringilla luctus.</div>
</div>
<div class="row">
<div class="col">
Four
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras auctor mollis mi id molestie. Quisque id commodo lectus. Morbi lacus arcu, venenatis eu faucibus at, fermentum eu massa. Praesent non mauris mattis nisl maximus luctus quis a ex. Nullam rutrum bibendum bibendum. Sed felis ligula, placerat vitae lacus et, eleifend porta velit. In hac habitasse platea dictumst. Vivamus pharetra, tellus id rutrum accumsan, neque urna tincidunt sapien, in faucibus tortor enim sed purus. Curabitur posuere venenatis purus, tincidunt placerat tellus pretium ac. Mauris elementum nulla id velit fringilla luctus.</div>
</div>
<div class="row">
<div class="col">
Five </div>
</div>
</div>
<!-- Footer -->
<footer class="page-footer font-small blue pt-4" style="background-color:orange;">
<!-- Footer Links -->
<div class="container-fluid text-center text-md-left">
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-md-6 mt-md-0 mt-3">
<!-- Content -->
<h5 class="text-uppercase">Footer Content</h5>
<p>Here you can use rows and columns here to organize your footer content.</p>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none pb-3">
<!-- Grid column -->
<div class="col-md-3 mb-md-0 mb-3" >
<!-- Links -->
<h5 class="text-uppercase">Links</h5>
<ul class="list-unstyled">
<li>
Link 1
</li>
<li>
Link 2
</li>
<li>
Link 3
</li>
<li>
Link 4
</li>
</ul>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-3 mb-md-0 mb-3">
<!-- Links -->
<h5 class="text-uppercase">Links</h5>
<ul class="list-unstyled">
<li>
Link 1
</li>
<li>
Link 2
</li>
<li>
Link 3
</li>
<li>
Link 4
</li>
</ul>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
<!-- Footer Links -->
<!-- Copyright -->
<div class="footer-copyright text-center py-3">© 2018 Copyright:
MDBootstrap.com
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
You will need to use Javascript to achieve this functionality on your website. Please see this question which outlines what you need to do to achieve:
'Fixed div that stops at footer'
Make sticky/fixed element stop at footer
Deleted all the extra stuff, all I want is the row to float left so there is some text next to the image, but it only moves over one line. Using bootstrap if that helps, along with my own CSS file.
example
<!--main body container -->
<div class="container">
<div class="col-sm-6">
<div class="row">
<h1>About Me</h1>
</div>
<div id="bio" class="row">
<img src= "assets/images/linkedin-logo.png" alt="default photo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dapibus orci nisl, ut maximus eros congue commodo. Vivamus fermentum dictum erat. Fusce feugiat maximus nulla, eget scelerisque eros sodales vel. Ut vehicula velit nisl, et tempor justo blandit in. Morbi a elit eleifend, efficitur felis sed, pellentesque risus. Praesent quis ante et massa vehicula efficitur. Cras id tortor et elit ornare bibendum non non arcu. Sed lectus enim, consectetur eget pretium in, tempus et quam. Suspendisse elementum porttitor elementum. Donec egestas lectus gravida risus convallis consectetur.
</div>
</div>
<!--Main Container End-->
</div>
css code:
#bio {
float: left;
}
Float your image to the left
#bio img {
float: left;
}
Example: https://jsfiddle.net/L75dhtny/
you can try this one:
<!--main body container -->
<div class="container">
<div class="col-sm-6">
<div class="row">
<h1>About Me</h1>
</div>
<div id="bio" class="row">
<img src= "assets/images/linkedin-logo.png" alt="default photo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Etiam dapibus orci nisl, ut maximus eros congue commodo. Vivamus fermentum dictum erat. Fusce feugiat maximus nulla, eget scelerisque eros sodales vel. Ut vehicula velit nisl, et tempor justo blandit in. Morbi a elit eleifend, efficitur felis sed, pellentesque risus. Praesent quis ante et massa vehicula efficitur. Cras id tortor et elit ornare bibendum non non arcu. Sed lectus enim, consectetur eget pretium in, tempus et quam. Suspendisse elementum porttitor elementum. Donec egestas lectus gravida risus convallis consectetur.
</div>
</div>
<!--Main Container End-->
</div>
DEMO HERE
You can try this -
/* css code */
img {
float: left;
padding:2px;
margin-right:4px;
}
<!--main body container -->
<div class="container">
<div class="col-sm-6">
<div class="row">
<h1>About Me</h1>
</div>
<div id="bio" class="row">
<img src="http://placehold.it/350x150">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dapibus orci nisl, ut maximus eros congue commodo. Vivamus fermentum dictum erat. Fusce feugiat maximus nulla, eget scelerisque eros sodales vel. Ut vehicula velit nisl, et tempor justo blandit in. Morbi a elit eleifend, efficitur felis sed, pellentesque risus. Praesent quis ante et massa vehicula efficitur. Cras id tortor et elit ornare bibendum non non arcu. Sed lectus enim, consectetur eget pretium in, tempus et quam. Suspendisse elementum porttitor elementum. Donec egestas lectus gravida risus convallis consectetur.
</div>
</div>
<!--Main Container End-->
</div>
Add
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
Ok. I am trying to achieve a "Medium.com style" image alignment, making it larger than it's container and full width. I did what I knew I had to do with the CSS:
img {
position: relative;
left: 50%;
height: auto;
margin: 0px 0 0 -50vw;
width: 100vw;
max-width: 100vw;
}
It almost do what I want it to do, except that, when I use all the 12 grids of Bootstrap, for some reason, it adds a border on the left, as you can see in this fiddle: https://jsfiddle.net/35f4ntqq/
If I change the col-sm-11 to col-sm-10 (making it 11 cols in total), though, it works perfectly fine.
What am I missing here? Or doing wrong...? :/
I think you can changies margin property for img tag:
Like this:
img {
position: relative;
left: 52%;
height: auto !important;
margin: 0px 0 0 -55vw;
width: 100vw;
max-width: 100vw !important;
height: auto !important;
}
See Updated Bootply
You can use container-fluid to achieve the desired result.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<style>
img {
height: auto;
width: 100%;
}
</style>
<div class="container">
<div class="row">
<div class="col-sm-1">
Boo
</div>
<div class="col-sm-11">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed ligula nec erat dapibus ullamcorper. Aliquam egestas, justo nec dictum vestibulum, dui eros ullamcorper mauris, non facilisis lorem ligula ut ex. Mauris scelerisque libero nulla, eget luctus velit fringilla ut. Etiam ut magna eget elit gravida ultrices. Quisque a enim id leo tincidunt lobortis. Pellentesque nulla mi, aliquet non mauris et, aliquam egestas leo. Nulla convallis tincidunt gravida. Suspendisse aliquam lacinia eros sit amet pretium. Nam eu ipsum sit amet velit suscipit consectetur vel sit amet dolor. Sed ac aliquam est, dictum gravida est. Donec pellentesque condimentum est at bibendum. Aliquam erat volutpat. Nulla id urna non mauris faucibus fermentum. Phasellus quam ante, bibendum eget orci a, aliquam fringilla tortor. In vitae nulla nec leo tincidunt convallis. Integer ac ipsum a lorem sagittis pretium tincidunt id erat.</p>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<img src="http://www.lpzoo.org/sites/default/files/images/multimedia/kapukikingnosetonose1200.jpg">
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-1">
</div>
<div class="col-sm-11">
<p>Duis maximus est nec eros euismod, quis volutpat magna pellentesque. Maecenas orci sapien, gravida quis commodo a, pharetra at sapien. Etiam scelerisque nunc sit amet ligula volutpat convallis. Nam egestas commodo tortor at pellentesque. Pellentesque vitae dictum urna. Etiam tincidunt magna et aliquam tincidunt. Vestibulum blandit arcu a pulvinar auctor. Phasellus malesuada, tortor sit amet mollis pulvinar, felis felis lacinia tellus, tempus ultricies urna magna et augue. Fusce ut ipsum eget odio sodales viverra. Morbi sit amet hendrerit purus, sit amet porttitor sapien. Quisque ut quam eu erat elementum lobortis. Proin sit amet nisl eget est feugiat vulputate. Morbi eu orci semper, rhoncus lacus eget, fringilla lorem.</p>
</div>
</div>
</div>
https://jsfiddle.net/glebkema/pn8jbk8p/
try this.
"medium.com style"
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-1">
Boo
</div>
<div class="col-xs-11">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed ligula nec erat dapibus ullamcorper. Aliquam egestas, justo nec dictum vestibulum, dui eros ullamcorper mauris, non facilisis lorem ligula ut ex. Mauris scelerisque libero nulla, eget luctus velit fringilla ut. Etiam ut magna eget elit gravida ultrices. Quisque a enim id leo tincidunt lobortis. Pellentesque nulla mi, aliquet non mauris et, aliquam egestas leo. Nulla convallis tincidunt gravida. Suspendisse aliquam lacinia eros sit amet pretium. Nam eu ipsum sit amet velit suscipit consectetur vel sit amet dolor. Sed ac aliquam est, dictum gravida est. Donec pellentesque condimentum est at bibendum. Aliquam erat volutpat. Nulla id urna non mauris faucibus fermentum. Phasellus quam ante, bibendum eget orci a, aliquam fringilla tortor. In vitae nulla nec leo tincidunt convallis. Integer ac ipsum a lorem sagittis pretium tincidunt id erat.</p>
</div>
<div class="col-sm-12">
<img class="img-responsive" src="http://www.lpzoo.org/sites/default/files/images/multimedia/kapukikingnosetonose1200.jpg">
</div>
<div class="col-sm-12">
<p>Duis maximus est nec eros euismod, quis volutpat magna pellentesque. Maecenas orci sapien, gravida quis commodo a, pharetra at sapien. Etiam scelerisque nunc sit amet ligula volutpat convallis. Nam egestas commodo tortor at pellentesque. Pellentesque vitae dictum urna. Etiam tincidunt magna et aliquam tincidunt. Vestibulum blandit arcu a pulvinar auctor. Phasellus malesuada, tortor sit amet mollis pulvinar, felis felis lacinia tellus, tempus ultricies urna magna et augue. Fusce ut ipsum eget odio sodales viverra. Morbi sit amet hendrerit purus, sit amet porttitor sapien. Quisque ut quam eu erat elementum lobortis. Proin sit amet nisl eget est feugiat vulputate. Morbi eu orci semper, rhoncus lacus eget, fringilla lorem.</p>
</div>
</div>
</div>
I'm trying to assign different anchors to different divs, but they don't seem to be taking effect. I've tried using <a name="anchor">, <a id="anchor">, and <div id="anchor"> (which worked with some divs, but not all).
This is my current HTML:
<div class="about">
<a name="nabout"></a>
<div class="section">
<div class="section-title job-section-header section-header section-subheader">
<div class="section-bar"></div>
<img src="images/about-photo.png" class="left-image" />
</div>
<div class="section-body jobs">
<p class="section-subtext-md section-subtext section-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lobortis nulla a eros porttitor, ut congue elit commodo. Nunc ut dapibus elit. Suspendisse euismod rhoncus felis, id vulputate mauris posuere vitae. Praesent bibendum maximus nibh, nec
tempor diam blandit in. Praesent non metus in odio vehicula cursus vulputate quis quam. Nulla varius massa ac libero commodo imperdiet. Fusce tincidunt metus sapien, sed fringilla nibh vulputate eget. Suspendisse sodales nisi quis hendrerit porttitor.
Morbi in augue sapien. Maecenas ultricies, nisl vitae vehicula vulputate, nunc tellus sagittis turpis, nec laoreet quam velit non nunc. In aliquam libero a tellus commodo, at aliquet risus imperdiet. Fusce finibus a nulla et facilisis. Maecenas
condimentum sit amet velit et sodales. Duis mauris augue, feugiat non ornare pharetra, convallis nec metus. Integer vitae consequat dolor, at tristique lorem.</p>
<p class="section-subtext-md section-subtext section-text">Cras libero massa, fringilla id condimentum ut, aliquam ut nisi. Vestibulum ullamcorper commodo elit at commodo. Nullam dignissim id lacus sed faucibus. Quisque sollicitudin quam sit amet est facilisis tempor. Morbi vehicula quam et mauris faucibus
semper. Etiam vel est eu magna viverra viverra. Donec venenatis, nisl eget rhoncus auctor, lorem est gravida magna, ac consectetur velit libero at turpis. Vivamus at quam sed arcu eleifend suscipit non id mauris. Pellentesque tempor ornare imperdiet.
Morbi ornare luctus imperdiet. Fusce sagittis lorem ut elementum fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div style="clear: both;"></div>
</div>
</div>
Why does <a name> not work sometimes and what should I be using in this case?
The way that HTML anchors works is as follows.
When you give a div or any other DOM object an id attribute, you can then "link" to that object by specifying that id, with a # in your href, to have an a tag link to that tag.
For example:
HTML
Testing
...
<div id="testing">
<h1>Testing DIV</h1>
</div>
By clicking on the above <a> tag, the user's browser will scroll until the very top of the #testing div is at the top of the page, assuming the browser has space to scroll.
Try this
Test
.........
<a name="test"></a>
<h1>Testing</h1>
or this
Test
.......
<div id="test">
<h1>Test</h1>
</div>
I'm not 100% sure why it's not jumping to the location on load, but if you add this javascript
window.location.href = window.location.hash;
to the bottom of the page, that should fix your problem.
So I am trying to teach myself how to use bootstrap and for some reason I can not get the website to format correctly when displaying on a mobile device. The website is formatting correctly when the browser is resized but not when emulating a mobile device.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="bootstrap.min.css" rel="stylesheet" >
</head>
<body>
<div class="container-fluid">
<h1>HERE IS WHERE THE CONTAINER IS. </h1>
<div class="row-fluid">
<div class="col-lg-4 col-md-4 col-sm-4">
<h2>Paragraph 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum leo ut posuere suscipit. Suspendisse sed ex venenatis, tempus quam sit amet, porta sapien. Maecenas in nibh leo. In elementum eleifend odio, id pellentesque justo. Cras vitae placerat mauris. Aliquam erat volutpat. Integer faucibus eget nulla eget mollis. Pellentesque interdum vitae purus ut venenatis. Fusce hendrerit ultricies dignissim.</p>
</div><!--col-lg-4 col-md-4 col-sm-4-->
<div class="col-lg-4 col-md-4 col-sm-4">
<h2>Paragraph 2</h2>
<p>Duis elementum quam sit amet ante imperdiet, id bibendum nunc finibus. Donec et semper quam, et tempus tellus. Nullam quis nisl eu sem sodales consectetur. Donec ornare urna elit, in euismod leo feugiat eget. In eu placerat tellus. Nullam et tristique purus. Sed ut accumsan ipsum, nec semper mauris.</p>
</div><!--col-lg-4 col-md-4 col-sm-4-->
<div class="col-lg-4 col-md-4 col-sm-4">
<h2>Paragraph 3</h2>
<p>Mauris euismod massa a gravida posuere. Etiam placerat euismod est. Nam sed scelerisque elit. Mauris id ultrices enim. Nulla eu justo eget tellus vestibulum lacinia non eu augue. Maecenas porta purus vitae vehicula mattis. Nam auctor euismod ornare. Morbi eleifend luctus varius. Sed non nisl porta, vehicula elit sed, rhoncus felis. Aliquam ac elementum nunc. Integer blandit porta nisi, et venenatis nibh. Donec velit lorem, aliquet vel lorem in, efficitur tempus leo. Nulla facilisi. Nam vel malesuada mauris. Vivamus leo libero, finibus ut justo eget, tristique lobortis lectus. Etiam luctus urna eget leo lobortis blandit.</p>
</div><!--col-lg-4 col-md-4 col-sm-4-->
</div><!--row-->
</div><!--container-->
</body>
</html>
I have been unable to figure out why this would be. Any help would be appreciated.
It looks like your using Bootstrap 2 here, take a look at this tutorial on configuring Bootstrap 3 to work on mobile devices.