I need to know when designing a website do I have to design for the smallest device which will auto size to the bigger devices or can I design for a desktop PC and will it auto adjust for whatever device it’s viewed in. I ask because I did the latter and it’s not displaying properly on my mobile.
In terms of your design approach, Bootstrap is what’s known as a “mobile-first” framework, so technically you should design your website at the smallest size (XS) and work your way up. At each larger size, you will generally need to adjust some layout options and content to take advantage of the larger screen real-estate and make your site “look nice.” For example, two columns that are stacked on a phone will probably look better side-by-side on desktop. It’s common practice to add more content and options as you go up, but it’s not mandatory.
Technically, you could design a website at mobile size and by carefully selecting large enough images (or using svgs, or srcset with different size images), and choosing appropriate layout options, not need to add any additional content for the desktop.
Starting from the desktop size and going down can work, but it’s more challenging because you often find yourself having to eliminate content so that the site doesn’t become a scrolling nightmare that takes forever to get through. Doom-scrolling is fine for Facebook and YouTube. Not so much on a purpose-built website.
If you’re like me and you’ve been building websites since the old days of non-responsive layouts, you might have an ingrained “desktop” mentality. This can take a bit of effort to break free from, but it’s best in the long run. Depending on the industry, 60%-70% of people now view the web on their phones, so it really makes sense to think “mobile-first” when you build your site, and keep your content leaner on small screen sizes. You can expand/expound when you have the real estate available at the desktop sizes.
Bootstrap is a responsive framework, so it does the “heavy lifting” in terms of making your site “respond” to the different screen sizes (what you call “auto-adjust.”) As long as you follow the rules in building your layout (container > row > column, etc.) your site will degrade or upgrade correctly across the breakpoints.
But that doesn’t mean it will automatically look the way YOU want it to at each breakpoint. That’s why there are so many breakpoint-specific options in the options panel, and breakpoint-specific utility classes. You almost always have to change some options.
Have you looked at some of the template sites to see how they adjust between sizes? Have you read all the program docs, watched the videos, and familiarized yourself with responsive design?