Help with Flex HTML

Report · Nov 08, 2024

Need some help with Flex.

I'm sure the guy that owns this site uses Flex html. . . When he adds the Los Angeles Dodgers for 2024, the 2020 LA Dodgers will move down to the next line automatically. . . . Does anyone now how to set something like that up? It doesn't have to be exact boxes that he has. . I want something like this

Report · Nov 09, 2024

I'm sure the guy that owns this site uses Flex html. . .

By @jamedlock83

Nope, the guy uses floats.

The easiest way to do this is to use Bootstrap as show here

This is the HTML. Copy and paste this into a new document to see the result.

<!doctype html>
<html lang="en">

<head>
    <base href="/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="Untitled DocumentUntitled Document">
    <title>Untitled Document</title>
    <link rel="stylesheet" href="/bootstrap/5/css/bootstrap.min.css" />
</head>

<body>
    <div class="container mt-5">
        <div class="row row-cols-3 gy-4">
            <div class="col">
                <div class="card">
                    <div class="card-body">
                        <h2 class="card-title text-center mb-4">Card title</h2>
                        <img class="card-img-top mb-4" alt="Card image cap">
                        <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>
            </div>
            <div class="col">
                <div class="card">
                    <div class="card-body">
                        <h2 class="card-title text-center mb-4">Card title</h2>
                        <img class="card-img-top mb-4" alt="Card image cap">
                        <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>
            </div>
            <div class="col">
                <div class="card">
                    <div class="card-body">
                        <h2 class="card-title text-center mb-4">Card title</h2>
                        <img class="card-img-top mb-4" alt="Card image cap">
                        <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>
            </div>
            <div class="col">
                <div class="card">
                    <div class="card-body">
                        <h2 class="card-title text-center mb-4">Card title</h2>
                        <img class="card-img-top mb-4" alt="Card image cap">
                        <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>
            </div>
        </div>
    </div>
    <script src="/bootstrap/5/js/bootstrap.bundle.min.js"></script>
</body>

</html>

The Bootstrap Card is a flexbox container:

Wappler, the only real Dreamweaver alternative.

Report · Nov 16, 2024

I can't afford to use Wappler. . . This is what i'm seeing

Report · Nov 16, 2024

I can't afford to use Wappler. . . This is what i'm seeing

By @jamedlock83

You need to link the Bootstrap 5 css to your file, currently its only being linked to a local version, /bootstrap/5/css etc, which you don't have access to.

Search Google for a cdn hosted version of Bootstrap 5, copy the link and paste it into your file where the current link to the local version of Bootstrap 5 is or go to the official Bootstrap 5 website, l believe they also supply a hosted cdn link.

Once the Bootstrap 5 css file is linked you should see the correct presentation in your browser.

Report · Nov 16, 2024

I'm not familiar with Bootstrap. I don't know how to do any of that, to be honest.

Report · Nov 16, 2024

I'm not familiar with Bootstrap. I don't know how to do any of that, to be honest.

By @jamedlock83

What are you familiar with using?

If you have not yet acquired the skill level of copying and pasting a link then one would assume progress is going to be like pushing marbles up a steep hill with your nose.

Is this your first attempt at putting a website layout together or have you managed to produce something previously?

Report · Nov 16, 2024

Yes i know how to copy and paste, but I don't know what to download/install Bootstrap CDN stuff. . I'm not familiar with bootstrap. . I'm only familiar with HTML/CSS

Report · Nov 16, 2024

When I add an image source, this is what I see using the code above:

Or on an iPhone 14:

No need to use Wappler, any text editor, like Dreamweaver or VSCode will do.

Wappler, the only real Dreamweaver alternative.

Report · Nov 16, 2024

I do use Dreamweaver, but I can't get anything to work.

Report · Nov 16, 2024

My apologies, I gave you a bum steer showing you the images of the outcome. The code above gives you this:

All you need to do is to copy the above code and paste it into a new Dreamweaver document.

To learn more about Bootstrap go to

https://www.w3schools.com/bootstrap5/

Wappler, the only real Dreamweaver alternative.

Report · Nov 16, 2024

I copied and pasted the html code, but it doesn't work correctly. I don't see what you see. You also posted an image of the boostrap card. . If i need to copy and paste that into a new css document, well, i can't, cuz it's not text. . . . lol

Report · Nov 16, 2024

As far as l know Dreamweaver doesn't have access to Bootstrap 5 unless it's recently been introduced so just pasting the code supplied into a Dreamweaver document isn't going to work correctly.

Go to the official Bootstrap 5 website, do a Google search for it. There will be a link to the Bootstrap 5 css file that you can select and copy, then just paste it into the code shown by Ben replacing the current link to the Bootstrap css ie look for bootstrap/5/css etc in the code and replace it.

Report · Nov 16, 2024

ohhhhh ok. . That makes sense. . I'm screwed then, unless I use VSCode

Report · Nov 16, 2024

ohhhhh ok. . That makes sense. . I'm screwed then, unless I use VSCode

By @jamedlock83

No youre not screwed. You can still use Dreamweaver you just have to manually link the Bootstrap 5 css file that you can obtain a link for from the Bootstrap website. Look for the quick start link on the website it will take you to a bit of code that you just copy and paste into the code Ben supplied in place of bootstrap/5/css etc

That will at least give you a structure you require, you can then just use your normal html/css to build going forward.

Report · Nov 16, 2024

that's where I get confused. I don't know how to obtain a link from the bootstrap website. .

Report · Nov 16, 2024

I downloaded bootstrap-5.3.3-dist from getbootstrap.com , but I don't know what to do with those files or anything. . . lol

Report · Nov 16, 2024

I downloaded bootstrap-5.3.3-dist from getbootstrap.com , but I don't know what to do with those files or anything. . . lol

By @jamedlock83

You don't have to download the files, just copy the 'quick start' css link from the Bootstrap 5 website and for ease just paste that link directly before the closing </head> tag in the code that Ben supplied above.

Report · Nov 16, 2024

I don't see the quick start css link unless it's one of these

Report · Nov 16, 2024

Just copy the first link in the image you have shown and then paste it into the code Ben supplied directly before the closing </head> tag in the code.

Report · Nov 16, 2024

Ok, now we're gettin somewhere. What if i only want 4 or 5 PER row? Right now, there's 8. . that's too much.. lol

Report · Nov 17, 2024

You're probably better off using css grid for the main structure, rather than Bootstrap, which can be a bit obtuse with its myriad of classes scattered amongst the html...........its not something I would use personally. In my opinion it's a cheap and dirty solution for quick development for those who dont really have the skill necessary to roll their own solution.

See below for grid example code. Just copy and paste into a new Dreamweaver document. It starts off with 4 columns as default then reduces to 3 columns, 2 columns and finally 1 column when the browsers viewport gets narrower.

Just add more 'product sections' as desired. The whole thing is a lot simpler and cleaner when the html is not so bunged up with lots of css classes which the Bootstrap and other css frameworks use. You can then just use your own css/html to style the content of the boxes how you want.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Grid</title>
<style>
* {
box-sizing: border-box;
}
body {
font-family: helvetica, sans-serif;
font-size: 14px;
line-height: 20px;
}
.productWrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 20px;
width: 90%;
margin: 0 auto;
max-width: 1200px;
}
/* 3 columns when browser viewport reaches 960px wide */
@media screen and (max-width: 960px) {
.productWrapper {
grid-template-columns: repeat(3, 1fr);
}
}
/* 2 columns when browser viewport reaches 660px wide */
@media screen and (max-width: 660px) {
.productWrapper {
grid-template-columns: repeat(2, 1fr);
}
}
/* 1 column when browser viewport reaches 480px wide */
@media screen and (max-width: 480px) {
.productWrapper {
grid-template-columns: 1fr;
}
}
.product {
border: 1px solid #000;
border-radius: 6px;
padding: 25px;
}
.product h2 {
margin: 0;
padding: 0;
text-align: center;
}
.product img {
max-width: 100%;
height: auto;
margin: 20px 0;
border-radius: 6px;
}
.product p {
margin: 0;
padding: 0;
text-align: center;
}
</style>
</head>
<body>
<div class="productWrapper">

<section class="product">
<h2>Product Title</h2>
<img src="https://picsum.photos/250" alt="">
<p>Some text about the product</p>
</section>
<!-- end product section -->


<section class="product">
<h2>Product Title</h2>
<img src="https://picsum.photos/250" alt="">
<p>Some text about the product</p>
</section>
<!-- end product section -->

<section class="product">
<h2>Product Title</h2>
<img src="https://picsum.photos/250" alt="">
<p>Some text about the product</p>
</section>
<!-- end product section -->


<section class="product">
<h2>Product Title</h2>
<img src="https://picsum.photos/250" alt="">
<p>Some text about the product</p>
</section>
<!-- end product section -->


<section class="product">
<h2>Product Title</h2>
<img src="https://picsum.photos/250" alt="">
<p>Some text about the product</p>
</section>
<!-- end product section -->


<section class="product">
<h2>Product Title</h2>
<img src="https://picsum.photos/250" alt="">
<p>Some text about the product</p>
</section>
<!-- end product section -->

</div>
</body>
</html>

'

Report · Nov 17, 2024

oh HECK yeah! I love that! Thanks man!

Report · Nov 17, 2024

Here's what i'm doing. . How woud I move "1st, 2nd, 3rd, etc" up to the top left corner?

Report · Nov 17, 2024

Just revise the padding on the 'product' css to:

padding: 0 25px 25px 25px;

That removes the top padding set on the 'product' box. Then move the 1st, 2nd code etc to the start of the 'product' box. Depending upon what html tag you have used for 1st, 2nd etc you may need to zero its padding and margin so the text sits flush top and left with the 'product' box.

Report · Nov 17, 2024

Here's the html code I used for 1st, 2nd, etc

<h2>1<sup><span style="color: #FFFFFF; font-size: 14px; font-weight: bold ">st</span></sup></h2>