I am using standard bootstrap CSS Grid Layout. I have a section template I am trying to figure out.
Here is what a section looks like:
And this is the code that generates this middle section of this image.
<div class="col-lg-12 box_main text-center">
<h3 class="section-heading">Day 4. Peace Over Worry</h3>
<blockquote class="mb10 ">
<p class="justify text-faded-light">
<img src="../img/talent/steve-douglass.jpg" /><br />
Steve Douglass<br />
<p>Do you worry? You’re not alone — nearly everybody does. It’s natural to be concerned about what is happening
around us and in our own personal lives. But if we’re not careful, we can step over the line from concern into worry. Someone once
said, “Worrying doesn’t take away tomorrow’s troubles, it takes away today’s peace.” Isn’t that the truth! </p>
What I am looking for is how the html should be laid out so that it looks more like this:
So how would the "divs" need to be laid out so that this looks good on all screens. Here are a couple of things I want to be true.
- I want it to look good on both narrow and wide screens.
- I want this section box to always be centered in the page.
- I would like the pictures to be all set to a similar size if possible. (
- (without having to physically resize them all)
- The name caption under the picture should be centered.
- How do I create indenting without using blocktext.
I don't spend a lot of time in complex layout (I'm more the conceptualizer and data manager). So I am hoping that somebody that lives in the html layout and design world can figure this out much more quickly. Thanks.
If you want to view the whole Web page in the test environment, you can do so here: makingyourlifecount.net/player.php?plan=1