I want to affix the following code to the top of the page, below the nav so it is always visible.
<div class="col-lg-5 nopadd affix">
<h3>Project One</h3>
<p>Lorem ipsum dolor ...</p>
</div>
However when I add the bootstrap .affix it makes it ignore the col-lg-5 class that has been applied.
Here is the code I have so far.
http://jsfiddle.net/P9d5k/2/
http://jsfiddle.net/P9d5k/2/embedded/result/
try this fiddle
I just add a 100% width div with the affix class and inside a .container with your grid inside
<div class="affix" style="width:100%;z-index:2">
<div class="container">
<div class="col-lg-5">
<h3>Project One</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae. Sed dui lorem, adipiscing in adipiscing et, interdum nec metus. Mauris ultricies, justo eu convallis placerat, felis enim.</p>
</div>
</div>
</div>
Related
I'm having some trouble ensuring my text and bootstrap button stay in the vertical middle of my bootstrap row as the screen size reduces/expands. There must be an easy way to achieve this...
<div class="cta-promo">
<div class="container">
<div class="row">
<div class="hidden-xs col-sm-7 col-md-7 col-lg-8">
<p class="cta-promo-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent posuere pharetra rhoncus. Sed et lorem vehicula, tincidunt quam at, pharetra nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus eget mollis magna, a fermentum mauris. Mauris orci neque, egestas nec diam nec, vestibulum vestibulum nibh.</p>
</div>
<div class="col-xs-12 col-sm-offset-1 col-sm-4 col-md-offset-1 col-md-4 col-lg-offset-1 col-lg-3">
<button>Apply for this today</button>
</div>
</div>
</div>
Here's a fiddle https://jsfiddle.net/74vsr332/
The text is hidden on xs view.
To do this in Bootstrap you can combine Flexbox and media queries and add rule when min-width: 768 because you are using sm DEMO
#media(min-width: 768px) {
.flex {
display: flex;
align-items: center;
}
}
I have a list of items where each item contains a header and a text. The item may also contain an image between the header and the text.
If the item contains an image, the header should be overlayed on top of the image.
How can I accomplish this by applying CSS to the following markup (which cannot be changed!):
<div class="wrapper">
<h2>First item</h2>
<img src="MyImage.jpg" width="400" height="200" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Pellentesque in orci consectetur, auctor risus
sed, adipiscing neque. Integer ornare vestibulum
mauris, quis blandit nibh vestibulum sed.
</p>
</div>
<div class="wrapper">
<h2>Second item</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Pellentesque in orci consectetur, auctor risus
sed, adipiscing neque. Integer ornare vestibulum
mauris, quis blandit nibh vestibulum sed.
</p>
</div>
I've created a jsfiddle for you to play with: http://jsfiddle.net/9GSB8/
To overlay the header on top of the image I've tried setting "position: absolute" on the header. This works fine, but it will also make the header to be on top of the text when there is no image. This is my problem - to make it work both with and without the image.
Note that the header can be long enough that it will span over two rows.
Any help appreciated! :)
I'm using Bootstrap 3's grid system (for the first time) to prototype a site. One of the pages should end up laid out like this:
My initial markup is along these lines (I've added <div>s to group elements into what I think I'll want to turn into blocks of grid content.)
<body>
<h1>Plays</h1>
<h2>The Chair</h2>
<div id="intro">
<h3>Intro</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at elit nibh, in pretium tellus. Donec id dui mi. Nam malesuada, velit sed porta mollis, dolor felis eleifend diam, nec convallis orci libero eget augue. Vestibulum quis pretium tellus. Morbi nulla nulla, tempus congue viverra id, iaculis ultricies lorem.</p>
</div>
<div class="excerpt" id="excerpt-1">
<h3>Excerpt 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at elit nibh, in pretium tellus. Donec id dui mi. Nam malesuada, velit sed porta mollis</p>
<p>Cras at elit nibh, in pretium tellus. Donec id dui mi. Nam malesuada, velit sed porta mollis</p>
<p>...</p>
</div>
<div class="excerpt" id="excerpt-2">
<h3>Excerpt 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at elit nibh, in pretium tellus. Donec id dui mi. Nam malesuada, velit sed porta mollis</p>
<p>Cras at elit nibh, in pretium tellus. Donec id dui mi. Nam malesuada, velit sed porta mollis</p>
<p>...</p>
</div>
</body>
I'm pretty much a beginner with grid-based designs in general, and I'm a little lost as to how I would mark this up with Bootstrap's rows and columns.
The key things in my mind are: 1) #excerpt-2 starts at the same height as #intro, and 2) the start height of #excerpt-1 is before the end height of #excerpt-2. How do I cope with this in a Bootstrap 3 grid? Am I missing an obvious trick? Is there a way of laying this out without changing the document source order?
This code sample will get you started:
<div class="container">
<div id="row-1st" class="row">
<div class="col-xs-12">
<h1>Header</h1>
</div>
</div>
<div id="row-2nd" class="row">
<div class="col-xs-12">
<h1>Header Second</h1>
</div>
</div>
<div id="row-3rd" class="row">
<div class="col-xs-12">
<div class="row">
<div class="col-sm-6 col-xs-12">
<div class="row">
<div class="col-xs-12">
<h1>Intro</h1>
</div>
</div>
<div class="row">
<div class="col-xs-12">
Excerpt 1
</div>
</div>
</div>
<div class="col-sm-6 col-xs-12">
Excerpt 2
</div>
</div>
</div>
</div>
</div>
I am using Boostrap 3 for some website I am creating, what i want to make i next.
Here is a code
<section class="container-fluid">
<div class="container">
<div class="row">
<div class="col-md-6"><img class="img-responsive" src=
"http://webdesignledger.com/wp-content/uploads/2009/09/logo_design_4.jpg" /></div>
<div class="col-md-6">
<h2">Lorem ipsum dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aenean eu sollicitudin felis. Vestibulum vitae imperdiet nibh. Curabitur euismod
auctor libero sit amet varius. Maecenas eu porta libero. Pellentesque et sem et
turpis scelerisque hendrerit vel ac nibh. Nam tempor ullamcorper scelerisque.
Aenean accumsan ac justo ac laoreet. Aliquam eu libero</p>
</div>
</div>
</div>
<section>
Here is working fiddle
http://jsfiddle.net/gSmRw/
On big screen text always to be allign in the middle of the picture, i dont know how big picture will it be, maybe small maybe big, any idea, or help.
Here is picture what i want to make and how it has to look up
http://jsfiddle.net/gSmRw/3/
I've basically added a calss table to the .container element and changed the CSS of this container to be styled as table.
it's important to give the image div wrapper a width of 1% so the cell will not be wider than the image.
here's what I wan't to create: http://i.imgur.com/9KdL0UW.jpg, here's what I have: http://i.imgur.com/mRDWoRo.jpg. My problem is the layout of news, as you can see, it's not working properly. I'm working with 960 grid and don't know how to reference it in the fiddle, so i posted is as an image instead.
html:
<div class="highlightednews grid_3">
<h4>News Preview</h4>
<h2>Under The Dome: “Big Jim is just too fat, we have to fire him!”</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et dolor pellentesque.</p>
</div>
<div class="highlightednews grid_3">
<h4>News Preview</h4>
<h2>Under The Dome: “Big Jim is just too fat, we have to fire him!”</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et dolor pellentesque.</p>
</div>
<div class="highlightednews grid_3">
<h4>News Preview</h4>
<h2>Under The Dome: “Big Jim is just too fat, we have to fire him!”</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et dolor pellentesque.</p>
</div>
<!--FEATURED NEWS-->
<div class="featurednews grid_3 ">
<h3>How am I gonna be an optimist about this? </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et dolor. </p>
<p>posted 15th November </p>
</div>
<div class="featurednews grid_3 ">
<h3>How am I gonna be an optimist about this? </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et dolor. </p>
<p>posted 15th November </p>
</div>
<div class="featurednews grid_3 ">
<h3>How am I gonna be an optimist about this? </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et dolor. </p>
<p>posted 15th November </p>
</div>
<div class="featurednews grid_3 ">
<h3>How am I gonna be an optimist about this? </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et dolor. </p>
<p>posted 15th November </p>
</div>
<div class="featurednews grid_3 ">
<h3>How am I gonna be an optimist about this? </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et dolor. </p>
<p>posted 15th November </p>
</div>
<!--NEWEST-->
<div class="newest grid_9">
<h1>Almost Human starting in one week!</h1>
<p>posted 15th November by Andrew</p>
<p>News Preview</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec faucibus suscipit metus non pellentesque. Aliquam erat volutpat. Suspendisse nec posuere erat. Cras in sem sed erat hendrerit tempus ac a sem. Fusce laoreet nulla in dolor feugiat, non adipiscing ante pharetra. Nunc pretium dui quis augue pretium, elementum varius odio interdum. Duis sit amet</p>
<p>Social Buttons</p>
<ul>
<li>255 COMMENTS</li>
<li>READ MORE</li>
</ul>
</div>
<div class="newest grid_9">
<h1>Almost Human starting in one week!</h1>
<p>posted 15th November by Andrew</p>
<p>News Preview</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec faucibus suscipit metus non pellentesque. Aliquam erat volutpat. Suspendisse nec posuere erat. Cras in sem sed erat hendrerit tempus ac a sem. Fusce laoreet nulla in dolor feugiat, non adipiscing ante pharetra. Nunc pretium dui quis augue pretium, elementum varius odio interdum. Duis sit amet</p>
<p>Social Buttons</p>
<ul>
<li>255 COMMENTS</li>
<li>READ MORE</li>
</ul>
</div>
<div class="newest grid_9">
<h1>Almost Human starting in one week!</h1>
<p>posted 15th November by Andrew</p>
<p>News Preview</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec faucibus suscipit metus non pellentesque. Aliquam erat volutpat. Suspendisse nec posuere erat. Cras in sem sed erat hendrerit tempus ac a sem. Fusce laoreet nulla in dolor feugiat, non adipiscing ante pharetra. Nunc pretium dui quis augue pretium, elementum varius odio interdum. Duis sit amet</p>
<p>Social Buttons</p>
<ul>
<li>255 COMMENTS</li>
<li>READ MORE</li>
</ul>
</div>
css:
.grid_3{
background-color: orange;
margin-bottom:10px;}
.grid_9 {
background-color: pink;}
.highlightednews{
float:left;}
.featurednews{
float:right;
background-color:green;
clear:both;}
Your problem here is to do with how your elements are nested. You need to have two parent divs to hold your content like so
<!-- THIS IS THE LEFT COLUMN -->
<div class="grid_9">
<div class="grid_3">
NEWS ITEM
</div>
<div class="grid_3">
NEWS ITEM
</div>
<div class="grid_3">
NEWS ITEM
</div>
<div class="grid_9">
Full width item
</div>
</div>
<!-- THIS IS THE RIGHT COLUMN -->
<div class="grid_3">
<div>FEATURED NEWS ITEM</div>
<div>FEATURED NEWS ITEM</div>
</div>