34
Replies
EXTRA DISCLAIMER: Osgood prefers motor vehicles that he fabricates himself.
By @BenPleysier
F1 v Morris Minor.
DISCLAIMER: Osgood is a Bootstrap hater. He condems everyone here who uses it.
By @Nancy OShea
I condem Bootstrap, with good reason, not the people that use it, its nothing personal against them.
Don't hesitate to come back when you have specific questions about Dreamweaver as this is a Dreamweaver product forum.
You've been given excellent advice so far from everyone. However, you cannot keep relying on unpaid forum volunteers to do your coding work for you. That's not what this forum is for. I urge you to spend some time learning code and more specifically how to use Bootstrap properly if that's your chosen framework. Bootstrap is very well documented and Google is your friend. 😉
Otherwise, hire an experienced web developer to help you. Goodbye & good luck with your project!
By @Nancy OShea
Well some of us have given good advice, other not so much, or half-assed advise, which doesn't work properly. How to attract users to the forum wouldn't be your best asset, based on the tone of your reply.
I have no issue with helping as coding is way too easily for me, Bootstrap or no Bootstrap solutions so it takes me minutes to produce, rather than hours, like some who have less experience or use frameworks.
How to attract users to the forum wouldn't be your best asset, based on the tone of your reply.
========
Look if someone needs a helping hand to get back on track, fine. I'm more than happy to assist them. And I'm all too happy to answer product questions. But I don't do people's "homework" for them and neither should any of us. That's not what product and technical forums are for. When we go down that slippery slope, nobody benefits, least of all the student/beginner.
Give a hungry man a fish, feed him for an hour. Teach a hungry man how to fish and feed him for a lifetime. 🙂
========
Give a hungry man a fish, feed him for an hour. Teach a hungry man how to fish and feed him for a lifetime. 🙂
By @Nancy OShea
Says someone who swears by using frameworks, thats so funny, if you think hard enough about it.
The way I see it is you can send an OP to search Google or Codepen, provide a url link as you and others do frequently in the forum - you're doing much the same thing, providing resources to someone elses coding solutions, only not really providing any real input yourself.
Tell you what why dont I set up a codepen, provide the solution on that platform and then I can priovide a pen link to you and you can pass that onto the OP?
The only issue I am still having is with the header content. My icon and text are not centered vertically like I believe it should be. They are where I want them to be, but they need to shift down so that they are more centered on the black header background. Any thoughts? I am eternally grateful for all of your help with this!!!!!
By @defaultvbg7e1p6wn4g
To me it looks like you have been changing the default Bootstrap file? I say this because the background-color of your h1 tag is black and that's not what it is in the default Bootstrap css file and I dont see any other css file linked to your page, where you could have changed it. Also it appears you have changed the default font style in the Bootstrap css default css file.
I would link a fresh copy of the Bootstrap css default file to your page. Never make changes to the default Bootstrap css file. Always make changes in a seperate css stylesheet, which should be linked to the page below the default Bootstrap css file.
So your code for your text GREEN ROOF/logo should look like:
<div class="col">
<h1 class="d-flex justify-content-between align-items-center text-light bg-dark py-3 px-4 font-weight-light"><img src="http://gatewaygreenbuilding.com/images/Green_Roof_Icon.jpg" class="img-fluid" alt="Green Roof Icon" width="70px" height="70px"><span>GREEN ROOF</span></h1>
</div>
and because Bootstrap has no utlility class for a solid black you will have to change the 'bg-dark' default utility class to solid black or create a new class if you think bg-dark is going to be useful for the rest of your project.
The below needs to go in a seperate stylesheet linked to your page or you could include it at the top of your page between <style></style> tags:
.bg-dark {
background-color: #000!important;
}
Thanks @osgood_ everything is fixed now and I will leave you all alone! You are amazing and I am so thankful for everything you have helped me with. 🙂
By @defaultvbg7e1p6wn4g
No problem. If you have any other issues then post in the forum and I'll try and help if I can.
1. your button links would look better if they were lined up instead of being all over the place, up and down like on a 'bad hair day'. To do this you would need to make the card-body a flex item.
2. you need some margin applied below the cards if you intend to have multiple lines of cards.
3. you need to apply the correct 3 items per row layout required to the 'col' wrapping the card items, not applied to the 'row'
4. you should keep all the images at the same depth, the layout looks a little ugly and crazy if you have one which is twice as tall as the rest
5. To line up your h1 text 'Green Roof' and logo correctly you need to apply display: flex; , align-items: center; and justify-content: space-between; to your h1 tag. To do that you need to wrap your h1 text 'Green Roof' in a span, so you have 2 items, the text and the image.
6. I mentioned in a previous post, your images are too large and will download slowly, especially on mobile devices, plus mobile users wont thank you for sucking their band width out if they are on a pay as you go service. Whilst you dont have to be too picky about it you should at least give it some consideration, which will benefit everyone, the user, as they get the content delivered faster and the client because they want users to stay on the website and a slow loading website will have users heading for the door, quickly.
By @osgood_
1. The `card` is already a flex container. All you need to do is add a `card-footer` to get the aligned result.
<div class="card h-100">
<img src="http://gatewaygreenbuilding.com/images/Green%20Roof%20North.jpg" class="card-img-top" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<div class="card-footer bg-transparent border-0">
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
3. WRONG-WRONG - please see my previous reply showing
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3">
5. 'row` is already a flex container, therefore `col` is a flex item. The correct structure should be
<div class="row align-items-center justify-content-between py-4">
<div class="col">
<img src="http://gatewaygreenbuilding.com/images/Green_Roof_Icon.jpg" class="img-fluid" alt="Green Roof Icon" width="70px" height="70px">
</div>
<div class="col">
<h1 class="text-end">GREEN ROOF</h1>
</div>
</div>
AdChoices
