The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> How to align buttons that lose position when changing size of window
22bears
post Apr 27 2022, 12:33 PM
Post #1





Group: Members
Posts: 4
Joined: 27-April 22
Member No.: 28,333



As the title says, i'm building a website that is a product add / product list, etc...
thing is, when the screen is fully open, buttons are well placed and well positioned. but when i change the size of the window, they get all over the place, they change their size, they lose proportion, and everything.
I leave a photo below of how it is:

IPB Image

Any ideas how to fix it?

I also leave a bit of the code. Im using bootstrap 5 for styling

CODE
<div class="container">
        <div class="row mt-5">
            <div class="col-8">
                <h1>Product List</h1>
            </div>
            <div class="col-1 mt-2">
                <button onclick="window.location.href='add.php'" class="btn btn-primary">ADD</button>
            </div>
            <div class="col-3 mt-2">
                <button name="delete" class="btn btn-danger" id="delete-product-btn" form="form">MASS DELETE</button>
            </div>
        </div>


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 27 2022, 01:18 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Can you link to the page? We need to see all of it.

QUOTE
Im using bootstrap 5 for styling


Why?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
22bears
post Apr 27 2022, 02:33 PM
Post #3





Group: Members
Posts: 4
Joined: 27-April 22
Member No.: 28,333



QUOTE(pandy @ Apr 27 2022, 03:18 PM) *

Can you link to the page? We need to see all of it.

QUOTE
Im using bootstrap 5 for styling


Why?


Cannot link you, it's not hosted yet..

About bootstrap, why not ? ... in my case, it's for a task, I was asked to use bootstrap. I don't get why some people is very reticent about bootstrap. Im kinda new into web development and I see lots of comments, some against bootstrap, some people that loves it... Anyways, i'm drifting away from my original question. Should I post the entire code? I've got lots of coding.. that's why I just shared that little chunk



This post has been edited by 22bears: Apr 27 2022, 02:33 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 27 2022, 03:09 PM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



QUOTE(22bears @ Apr 27 2022, 09:33 PM) *

About bootstrap, why not ? ... in my case, it's for a task, I was asked to use bootstrap. I don't get why some people is very reticent about bootstrap. Im kinda new into web development and I see lots of comments, some against bootstrap, some people that loves it... Anyways, i'm drifting away from my original question.

That you are new is one reason. Bootstrap makes things unnecessary complicated. Have you opened a bootstrap file and tried to read it? Do you understand what you see? If you don't, how can you fix things when they go wrong? Another reason is that it's huge and you probably only use a tiny fraction of it. I suspect what you try to do isn't very complicated. You would be better served by learning how to do it yourself and have a smaller and faster site for it.

QUOTE

Should I post the entire code? I've got lots of coding.. that's why I just shared that little chunk


Yes please. At least a whole HTML document and any linked CSS you may have. Not sure we can help you anyway (because of Bootstrap), but we can try. wink.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
22bears
post Apr 27 2022, 03:49 PM
Post #5





Group: Members
Posts: 4
Joined: 27-April 22
Member No.: 28,333



QUOTE(pandy @ Apr 27 2022, 05:09 PM) *

QUOTE(22bears @ Apr 27 2022, 09:33 PM) *

About bootstrap, why not ? ... in my case, it's for a task, I was asked to use bootstrap. I don't get why some people is very reticent about bootstrap. Im kinda new into web development and I see lots of comments, some against bootstrap, some people that loves it... Anyways, i'm drifting away from my original question.

That you are new is one reason. Bootstrap makes things unnecessary complicated. Have you opened a bootstrap file and tried to read it? Do you understand what you see? If you don't, how can you fix things when they go wrong? Another reason is that it's huge and you probably only use a tiny fraction of it. I suspect what you try to do isn't very complicated. You would be better served by learning how to do it yourself and have a smaller and faster site for it.

QUOTE

Should I post the entire code? I've got lots of coding.. that's why I just shared that little chunk


Yes please. At least a whole HTML document and any linked CSS you may have. Not sure we can help you anyway (because of Bootstrap), but we can try. wink.gif


I'm gonna edit the original post and add the HTML and the CSS @pandy !

I used to know about bootstrap as a name, only. I never went further into googling about it, because I started with HTML5 and CSS. But as I kept following tutorials of youtube about making forms, logins, cruds (there's a lot of those, they guide you step by step) I noticed that everyone kept using bootstrap.
So I sat and listened, followed their steps, liked the results of their tutorials.. They talk about bootstrap as a fast way to give style, make it modern, mobile friendly and blabla... but I liked the outcome from it.
And then I find out it's from Twitter, they're the creators.

And then I got into a job interview, about PHP, MySQL, HTML5 and CSS.. and one of the requirements was bootstrap. That made me take this road of using it. I see job applications and they write about bootstrap as a plus "if you can use this, it's amazing"

We all been new to something, always.. and this is technology, we're always gonna be students of daily new things. But if we start something and we picture it as a really high mountain and we write down all the cons it has... no one would climb it, no one would do anything because it's new and huge and no one understands what things are for...
Then someone who wants to get into programming would get frustrated real quick and drop it, like lots of people I know that ended up dropping their tech degree because they were overwhelmed at all the info there is to only get a simple hello word written..


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
22bears
post Apr 27 2022, 04:03 PM
Post #6





Group: Members
Posts: 4
Joined: 27-April 22
Member No.: 28,333



I just solved my problem!

It was a really small issue related to the container.Thanks to Pandy for trying to help, I'm gonna keep this forum in mind but I'll also remind myself here it's only HTML and CSS related.
I'm kinda new into frontend and I really love it, even though I keep learning. Thanks!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 27 2022, 05:16 PM
Post #7


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Oh, good. Well, Bootstrap is CSS. And, I think, JS and some HTML too. Problem is it's huge and no one here uses it. When debugging a layout that uses Bootstrap usually all we can do it try to override Bootstrap. It would be a huge commitment to learn bootstrap just to fix a single layout bug, so it isn't likely someone would do that.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 03:55 AM