Skip to main content
designm19985728
Participating Frequently
January 21, 2019
Question

Bootstrap beginner question

  • January 21, 2019
  • 4 replies
  • 467 views

Trying some things out while using a starting bootstrap template.

Deleted sidebar, made main copy go across page, articles in footer found a way to get three across instead of two, but now i have placed an image into that article, and that image won't resize along with the rest of the text / article box.

Tried calling it something, giving rules - max width 100% or max width same as the article - but nothing, it just stays the same size.

What am i missing?

<article>

<h3>Footer1</h3>

<img src="file:///Macintosh HD/Users/Design1/Desktop/imagecustom01.jpg" alt=""/>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

</article>

footer article {

/* Footer articles */

width: 29.3%;

float: left;

padding-left: 2%;

padding-right: 2%;

text-align: justify;

font-family: source-sans-pro, sans-serif;

font-style: normal;

font-weight: 200;

color: rgba(146,146,146,1.00);

}

This topic has been closed for replies.

4 replies

BenPleysier
Community Expert
Community Expert
January 21, 2019

To add to what has been said, Bootstrap 4 Tutorial is an excellent way to learn Bootstrap. Hopefully after one week you will be able to show the person that osgood_​ quoted, on how to condense the rather long line of classes .

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
Nancy OShea
Community Expert
Community Expert
January 21, 2019

Did you define your local site folder?

Did you save and name your newly created Bootstrap starter page?

Your files panel should look something like this where C:\myTestSite is the local site folder.

Which version of Bootstrap are you using?  It's important to clarify this up front because Bootstrap 4 contains new utility classes that don't exist in Bootstrap 3.  And you must not combine 3 with 4.  Go to Site > Manage Sites > Advanced Settings > Bootstrap.  See screenshot.

Nancy O'Shea— Product User & Community Expert
Legend
January 21, 2019

Path to image is incorrect:

<img src="file:///Macintosh HD/Users/Design1/Desktop/imagecustom01.jpg" alt=""/>

plus when you get that correct you need to add a Bootstrap utility class to make the image responsive:

<img class="img-fluid" src="file:///Macintosh HD/Users/Design1/Desktop/imagecustom01.jpg" alt=""/>

If you are going to use Bootstrap its best to take a week out and learn the most important utility classes otherwise you'll be like a fish, swimming around in a vast ocean, without any fins

It won't be long before you are writing excellent code like below:

<div class="row ml-xl-0 mr-xl-0 pl-xl-0 pr-xl-0 ml-lg-0 mr-lg-0 pl-lg-0 pr-lg-0 ml-md-0 mr-md-0 pl-md-0 pr-md-0 ml-sm-0 mr-sm-0 pl-sm-0 pr-sm-0 ml-0 mr-0 pl-0 pr-0">

Seriously, I've just see this in someones website, this is how terrible it can get in the hands of the unexperienced

ALsp
Legend
January 21, 2019

I am not a Bootstrap fan, so I won't comment on Bootstrap. But the path to the image in the code you posted indicates a problem with your local site definition in Dreamweaver. I am assuming you are using Dreamweaver or you would be posting on a Bootstrap forum of some sort.

In any event, a style declaration of max-width 100% is all you need to make an image respond to viewport width. There might be a class you need to assign to your image to make that happen, though. You can try this in your own CSS file:

img {max-width: 100%;}

As for Bootstrap, there are a couple of regular posters here that swear by it and I'm sure they'll jump in.