Assistance with Bootstrap Standard Grid Layout for unique columns...

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:

This is what the page currently looks like.
And this is the code that generates this middle section of this image.

    <div class="col-lg-12 box_main text-center">
            <div class="box2">
                <h3 class="section-heading">Day 4. Peace Over Worry</h3>
                <div class="border_box1"></div>
                <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>
                </blockquote>
            </div>
        </div>

Open in new window


What I am looking for is how the html should be laid out so that it looks more like this:

How I want the text to be laid out.
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
Paul KonstanskiProject SpecialistAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

David S.Commented:
Why use Bootstrap for something that simple? Why not just give the parent of the image and caption another class and float it left? You can give the adjacent element a left margin (of at least the image's width) or "overflow:hidden" to keep the text from wrapping under the image.

P.S. Did you intentionally omit the end tag for those paragraphs?

P.P.S. Do you really need every weight of Open Sans and all of them in italic? Are you really using 600, 700, and 800 in the same design?
0
Julian HansenCommented:
Bootstrap is a good choice here because you want your panels to collapse on smaller screens
I would do like this
    <div class="box">
      <h3 class="section-heading">Day 4. Peace Over Worry</h3>
      <div class="row box-padding">
        <div class="col-sm-4 col-xs-12 justify text-faded-light">
          <img src="images/foreground1.png" />
          Steve Douglass
        </div>
        <div class="col-sm-8 col-xs-12">
          <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>
        </div>
      </div>
    </div>
    <div class="box">
      <h3 class="section-heading">Day 4. Peace Over Worry</h3>
      <div class="row box-padding">
        <div class="col-sm-4 col-xs-12 justify text-faded-light">
          <img src="images/foreground1.png" />
          Steve Douglass
        </div>
        <div class="col-sm-8 col-xs-12">
          <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>
        </div>
      </div>
    </div>

Open in new window

My CSS for this - I don't have access to yours
<style type="text/css">
.box img {
	display: block;
	max-width: 100px;
}
.box {
	border-radius: 10px;
	background: #EEA70A;
	text-align: center;
	color: #FEFBD2;
}
.box .caption {
	color: #F9AC28;
}
.text-faded-light {
	color: #5F2900;
	text-align: left;
}
.section-heading {
	border-bottom: 1px solid #D59B1C;
	padding: 15px;
}
.box-padding {
	padding: 15px;
}
.box-container {
	max-width: 788px;
	padding: 15px 95px;
	background: #F9B625;
}
</style>

Open in new window


Working sample here
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
David S.Commented:
Sure, you can use Bootstrap but it's entirely unnecessary for this. It uses media queries, just like can be used with what I suggested to only float the image on screens that are judged to be wide enough.

It comes down to whether you prefer using just what Bootstrap provides or writing styles with more flexibility to do the same thing. For example, what if you want the parent of the image to be a fixed width instead of a fluid width?

Using the existing structure and classes, you can do it like this:
@media all and (min-width:540px) {
	.box_main blockquote p:first-child {
		float: left;
		margin: 0 1em 1em 0;
	}
	.box_main blockquote p~p {
		overflow: hidden;
		width: auto;
	}
}

Open in new window

0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Paul KonstanskiProject SpecialistAuthor Commented:
First a couple of answers to some comments/questions.

  • I use bootstrap because this is just a small section of a much bigger site. Bootstrap serves the whole site quite well.
  • The dropped paragraph tag was an accident. That occurred during copy/paste. Thanks for catching it.
  • I'm not 100% sure where you last question about Open Sans is coming from. Are those just built in weights of Bootstrap and thus related to your first comment. Or is that an observation based on something you see?

This is just a small page on a much larger project so that's why I'm using Bootstrap. There are many other places in this application that I use some of the built in features that come with Bootstrap.

I appreciate David's approach to attempt to minimize excess overhead. Those are some helpful techniques that I'll keep in mind.

Julian, your information gave me what I needed. You can see the final product here:

https://makingyourlifecount.org/player.php?plan=2

Thanks for the help. I will close and award points tomorrow.
0
Paul KonstanskiProject SpecialistAuthor Commented:
Thanks for the contributions. It has really helped me get my site ready for the expansion of our project.
0
Julian HansenCommented:
You are welcome Paul
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.