I want to create a bootstrap based WordPress. But the out put doesn't give me the same. Attached screenshot.
The code for wordpress is below:
<div class="container">
<img src="<?php echo get_template_directory_uri(); ?>/images/security-and-surveillance-banner.jpg" class="img-fluid" alt="Responsive image" style="width:100%;display:block">
<!-- Main component for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="row">
<?php query_posts('showposts=3');?>
<?php if(have_posts()) :?><?php while(have_posts()) : the_post(); ?>
<div class="col-md-4">
<h2><?php the_title(); ?></h2>
<?php the_content(); ?>
</div>
<?php endwhile;?>
<?php endif; ?>
</div>
</div>
</div>
and the cited code is below, check the code, and seems to be the same for HTML, not sure why giving me different view?
<div class="container">
<img src="images/sample1.png" class="img-fluid" alt="Responsive image" style="width:100%;display:block">
<!-- Main component for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="row">
<div class="col-md-4">
<h2>Heading</h2>
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
</div>
<div class="col-md-4">
<h2>Heading</h2>
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
</div>
<div class="col-md-4">
<h2>Heading</h2>
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
</div>
</div>
</div>
</div>
What I want to output is that same paragraph font style and background color. If I remove jumbotron, then it would be the same as I wish, but background color will be removed, which is not my expected.
Related
I'm trying to use Bootstrap' grid for blog posts. I want them to be aligned under each other - but I can't seem to figure out how. I have my col-md placed inside a container, then a row. I have Googled my way around, but there doesn't seem to be a straight answer, or I cant find it.
How it looks now
How I want it to look
The code
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="blogpost">
<div class="pad">
<h2>Designed by Apple - Intention</h2>
<p>Here, simple phrases paired with elegant visuals describe the thoughts and emotions that go into creating each Apple product.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="blogpost">
<img src="assets/img/1.jpg" alt="">
<div class="pad">
<h2>Official launch today</h2>
<p>Duis id sagittis ipsum. Proin gravida libero augue. Vivamus dignissim ipsum blandit magna tempus, porta porta nisi pellentesque. Sed ligula lorem, semper non sem maximus, suscipit tincidunt nisi. Etiam pulvinar quam purus, at fringilla erat ultricies ac. Aenean vitae laoreet ligula.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="blogpost">
<img src="assets/img/1.jpg" alt="">
<div class="pad">
<h2>Official launch today</h2>
<p>Duis id sagittis ipsum. Proin gravida libero augue. Vivamus dignissim ipsum blandit magna tempus, porta porta nisi pellentesque. Sed ligula lorem, semper non sem maximus, suscipit tincidunt nisi. Etiam pulvinar quam purus, at fringilla erat ultricies ac. Aenean vitae laoreet ligula.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="blogpost">
<div class="pad">
asdasd
</div>
</div>
</div>
</div>
To get what you want your template does not have to be arranged in rows but only for columns in this way the elements within each column will be in place under each other without space constraint imposed by the line. For do this remove the external
Try a look a this sample
I've been trying to recreate a list like the one below (the checkbox and the x are just png images) but I can't seem to figure it out.
I have tried using two texted cols but I can't for the life of me figure out how to get the alignment and the text breaks correct.
Any help would be very much appreciated.
Right now, my code looks like this:
<div class="row">
<div class="col-md-6 col-md-6-offset-2">
<h4 style="text-align: center;">THEY LOVE</h4>
<div class="row ">
<div class="col-xs-1">
<img src="http://d26mw3lpqa99qj.cloudfront.net/prod-fool/sell/yes-15d4ba569f9f4beb7d8cfd8adc8ed886.png">
</div>
<div class="col-xs-11">
<p style="padding-top: 8px;">Stuff</p>
</div>
</div>
</div>
<div class="col-md-6" style="text-align: center;"><h4>THEY DON'T LOVE</h4></div>
<div class="row ">
<div class="col-xs-1">
<img src="http://d26mw3lpqa99qj.cloudfront.net/prod-fool/sell/yes-15d4ba569f9f4beb7d8cfd8adc8ed886.png">
</div>
<div class="col-xs-10">
<p style="padding-top: 8px;">Stuff</p>
</div>
</div>
</div>
DEMO: http://jsbin.com/faboze/1/
http://jsbin.com/faboze/1/edit?html,css,output
Look carefully at the html and the css so you can understand how to adjust the spacing and how a hanging indent is done with an un-ordered list. Also look at the grid classes used.
<div class="container">
<div class="row">
<div class="col-sm-offset-2 col-sm-4">
<h4 class="text-center">THEY LOVE</h4>
<ul class="list-unstyled love">
<li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li>
<li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li>
<li>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</li>
<li>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</li>
</ul>
</div>
<div class="col-sm-4">
<h4 class="text-center">THEY DON’T LOVE</h4>
<ul class="list-unstyled no-love">
<li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li>
<li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li>
<li>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</li>
<li>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</li>
</ul>
</div>
</div>
</div>
CSS
.list-unstyled.love li,
.list-unstyled.no-love li {
background: url('http://d26mw3lpqa99qj.cloudfront.net/prod-fool/sell/yes-15d4ba569f9f4beb7d8cfd8adc8ed886.png') no-repeat;
padding:0 0 5% 45px;
}
/* ======= change the no-love image ========== */
.list-unstyled.no-love li {
background: url('http://d26mw3lpqa99qj.cloudfront.net/prod-fool/sell/yes-15d4ba569f9f4beb7d8cfd8adc8ed886.png') no-repeat;
}
You didnt close your tags properly. Check below code.
You can use text-center class from bootstrap for centering the stuff.
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row text-center">
<div class="col-md-6 col-md-6-offset-2">
<h4>THEY LOVE</h4>
<div class="row ">
<div class="col-xs-1">
<img src="http://d26mw3lpqa99qj.cloudfront.net/prod-fool/sell/yes-15d4ba569f9f4beb7d8cfd8adc8ed886.png"/>
</div>
<div class="col-xs-11">
<p style="padding-top: 8px;">Stuff</p>
</div>
</div>
</div>
<div class="col-md-6"><h4>THEY DON'T LOVE</h4>
<div class="row ">
<div class="col-xs-1">
<img src="http://d26mw3lpqa99qj.cloudfront.net/prod-fool/sell/yes-15d4ba569f9f4beb7d8cfd8adc8ed886.png"/>
</div>
<div class="col-xs-11">
<p style="padding-top: 8px;">Stuff</p>
</div>
</div>
</div>
http://jsfiddle.net/dq5T5/
The fiddle above shows the problem.
Since the row has a white background, there ends up being empty space under the image when the browser window is resized.
I just want the image to fill the entire height of the left column, but I also need it to stack vertically as it currently does (responsive).
<body>
<div class="widereport">
<div class="col-md-4 no-gutters">
<figure class="animated-overlay overlay-alt">
<img class="img-responsive" width="640" height="400" alt="img alt" src="http://placehold.it/600x450" itemprop="image">
<a title="image" href="/"></a>
<figcaption>
<div class="thumb-info thumb-info-alt">
<i class="ss-navigateright"></i>
</div>
</figcaption>
</figure>
</div>
<div class="col-md-8">
<h5 class="portfolio-subtitle" itemprop="alternativeHeadline">mini menta | March 2014</h5>
<h3 class="portfolio-item-title mt0" itemprop="name headline">
Title here
</h3>
<p class="itemdeets">85 Pages</p>
<div class="portfolio-item-excerpt" itemprop="description">
<p class="mb9">Sed non orci sed ante dignissim aliquam. Fusce in sapien leo. Praesent justo nibh, dapibus eu fermentum sit amet, rutrum sit amet nunc. Aliquam augue. Vestibulum ante ipsum primis in fauc ibus orci luctus et ultrices posuere cubilia Curae; Integer in enim dui. Suspendisse potenti. Sed placerat pellentesque nibh ut varius. Morbi aliquet nulla at sem consequat eleifend. Sed non orci sed ante dignissim aliquam. Fusce in sapien leo. Praesent justo nibh, dapibus eu fermentum sit amet, rutrum sit amet nunc. Aliquam augue. Sed placerat pellentesque nibh ut varius. Morbi aliquet nulla at sem consequat eleifend. Sed placerat pellentesque nibh ut varius. Morbi aliquet nulla at sem consequat eleifend. Sed placerat pellentesque nibh ut varius. Morbi aliquet nulla at sem consequat eleifend.</p>
</div>
<p>
<span class="text pull-right mb9">More Information</span>
</p>
</div>
</div>
</body>
Try adding the below in the class for img-responsive in the CSS:
.img-responsive {
height: 100%;
width: 100%;
}
Fiddle
What am I doing wrong again? The Placeholder column should align with the container div but it isn't. Here's the code
<div class="container">
<!--Content Area-->
<div id="content" class="row-fluid">
<!--Main Content Area-->
<div class="span6" id="main">
<h2>PLACEHOLDER</h2>
<div class="hero-unit">
<h1>Marketing stuff!</h1>
<br />
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. <br />Fusce dapibus, tellus ac cursus commodo, tortor mauris<br /> condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<br />
<br />
Get Started
</div>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
</div>
<!--Right Sidebar-->
<div class="span3" id="right-sidebar">
</div>
</div>
I am looking to do something with my layout where my sidebar overflows a background change.
You can see in the jsfiddle here what I have currently. I am sure I just have things written in my following html out of order. I want the darker gray to show directly below the recent posts pictures but allow the sidebar to expand down into it. I can not just use a background image to do this because the length of the lighter content will change on other wordpress template pages.
Here is the code I currently have
<div id="main-content-container">
<div class="container">
<div class="row">
<div id="main-content" class="span9">
<div class="row">
<div id="featured-article" class="span9"><img src="http://placehold.it/715x340" /></div>
</div>
<div id="recent-posts" class="row">
<div class="span9">
<div class="row">
<div class="span9">
<h1>Recent Posts</h1>
</div>
</div>
<div class="row">
<div class="span3"><img src="http://placehold.it/220" /></div>
<div class="span3"><img src="http://placehold.it/220" /></div>
<div class="span3"><img src="http://placehold.it/220" /></div>
</div>
</div>
</div>
</div>
<div id="sidebar" class="span3">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed justo vitae quam accumsan semper. Vivamus varius orci posuere turpis congue semper vulputate eros congue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas eleifend magna in nulla semper vestibulum. Nulla a auctor odio. Vestibulum condimentum placerat tortor ut tempus. Morbi aliquet pellentesque sapien eu pharetra. Vivamus luctus, urna id pretium congue, dui nisi vestibulum nunc, non tincidunt justo dolor eget lacus. Aliquam condimentum, urna at blandit tristique, nulla felis porta erat, congue consectetur tortor mi vitae neque.
Nullam pellentesque, velit in convallis sagittis, enim enim viverra elit, ac tincidunt tellus elit eget dui. Donec sit amet odio eros. Nullam vitae pretium augue. Maecenas sit amet nisi ante, quis laoreet augue. Aliquam commodo suscipit bibendum. Duis imperdiet ornare magna, non porttitor lacus faucibus eget. Aenean viverra purus quis turpis fringilla hendrerit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc suscipit molestie nunc. Donec convallis mollis dui nec accumsan. Donec posuere ipsum ut nisl ornare eget sodales metus feugiat. Aliquam viverra, nunc nec malesuada hendrerit, velit nisl placerat augue, sed feugiat nisl turpis id risus. Nunc lobortis massa vitae justo fringilla vel condimentum lectus fermentum.
</p>
</div>
</div>
</div>
</div>
<div id="extra-body-container">
This part should fall right under the recent posts pictures and allow the sidebar to overflow on top of it.
</div>
I have tried to set a float on the sidebar but that did not work. I am not sure if the way I have my html will allow me to do this or not with only modifying my css.
the row above the extra-body-container try setting it to margin-left: -100% along w/ the body-bg.png then on the extra-body-contain put the margin-left to 50% and the width to 100%
Check it out here: http://jsfiddle.net/3sBkk/9/show/
<div id="main-content-container">
<div class="container">
<div class="row">
<div id="main-content" class="span9">
<div class="row">
<div id="featured-article" class="span9">
<img src="http://placehold.it/715x340" />
</div>
</div>
<div id="recent-posts" class="row">
<div class="span9">
<div class="row">
<div class="span9">
<h1>Recent Posts</h1>
</div>
</div>
<div class="row">
<div class="span3">
<img src="http://placehold.it/220" />
</div>
<div class="span3">
<img src="http://placehold.it/220" />
</div>
<div class="span3">
<img src="http://placehold.it/220" />
</div>
</div>
<div class="row" style="margin-left: -100%; background: url('../img/extra-body-bg.png') #AAAAAA repeat-x top center;">
<div id="extra-body-container" class="span12">This part should fall right under the recent posts pictures and allow the sidebar to overflow on top of it.</div>
</div>
</div>
</div>
</div>
<div id="sidebar" class="span3" style="z-index: 999;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed justo vitae quam accumsan semper. Vivamus varius orci posuere turpis congue semper vulputate eros congue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas eleifend magna in nulla semper vestibulum. Nulla a auctor odio. Vestibulum condimentum placerat tortor ut tempus. Morbi aliquet pellentesque sapien eu pharetra. Vivamus luctus, urna id pretium congue, dui nisi vestibulum nunc, non tincidunt justo dolor eget lacus. Aliquam condimentum, urna at blandit tristique, nulla felis porta erat, congue consectetur tortor mi vitae neque. Nullam pellentesque, velit in convallis sagittis, enim enim viverra elit, ac tincidunt tellus elit eget dui. Donec sit amet odio eros. Nullam vitae pretium augue. Maecenas sit amet nisi ante, quis laoreet augue. Aliquam commodo suscipit bibendum. Duis imperdiet ornare magna, non porttitor lacus faucibus eget. Aenean viverra purus quis turpis fringilla hendrerit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc suscipit molestie nunc. Donec convallis mollis dui nec accumsan. Donec posuere ipsum ut nisl ornare eget sodales metus feugiat. Aliquam viverra, nunc nec malesuada hendrerit, velit nisl placerat augue, sed feugiat nisl turpis id risus. Nunc lobortis massa vitae justo fringilla vel condimentum lectus fermentum.</p>
</div>
</div>
</div>
Hope this helps or at least gets you in the right direction.
looks like (as you said) you just had a couple things out of order
Here is a revised fiddle.
http://jsfiddle.net/3sBkk/1/
and really it was just a matter of moving your content into the main wrapping element, and creating a row out of it, adjusting the span to 12, and setting the z-order of sidebar to ensure it overlaps.
I'm not exactly sure how to include the code here but here is the culprit.
<div id="recent-posts" class="row">
<div class="span9">
<div class="row">
<div class="span9">
<h1>Recent Posts</h1>
</div>
</div>
<div class="row">
<div class="span3">
<img src="http://placehold.it/220" />
</div>
<div class="span3">
<img src="http://placehold.it/220" />
</div>
<div class="span3">
<img src="http://placehold.it/220" />
</div>
</div>
<div class="row">
<div id="extra-body-container" class="span12">This part should fall right under the recent posts pictures and allow the sidebar to overflow on top of it.</div>
</div>
</div>
</div>
EDIT: To achieve both the overlapping sidebar and the 100% width you're going to have to get kind of hacky with your css, and I don't necessarily endorse it, but is it possible, sure, anything is possible.
http://jsfiddle.net/2Yet7/ (sorry its so ugly).