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?
 
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
 
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
 
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
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.