Hi folks.
First time on this forum. I have a design Issue especially with this Carousel.
There does not appear to be an option on this forum for attaching screenshots or videos so I’m using YouTube.
Hard to explain the issue but if someone could take a look at the video I’ve uploaded to my YouTube Channel and maybe explain to me what I’m doing wrong, assuming of course that I am…
Thanks in Advance
Or search for Simple 3 column carousel where you’ll find one I knocked up for you.
You can also change some things in the options panel
NOTE The carousel I done is inside a container. You can’t put a container directly inside another container. Just highlight the carousel and drag it into your own container if you need too.
Hi Floyd
Many thanks for the response but I still can’t get this to work.
I’ve tried a different approach using columns.
See the latest video result…I’ve spent the last 7 hours working on this. Searching youtube videos and other tutorials I’ve purchased of Udemy, and Lynda.com.
Keep your navbar but delete all them columns. Add a section below the navbar then add a container to the section. Drag a basic carousel from Studio components into the container. You can also just drag a carousel straight onto the page depending on what you require. Putting it in a container allows you to make the container full screen width (Fluid) or responsive to the size of the containers breakpoints. You can set things for various components in the options panel top right. The appearance panel next to it is one way you can create and edit classes just so you know. Don’t use that for now.
For the gallery drag the gallery componet and put it below the carousel section. It’s already in a section so you wont need to add one this time. You should end up with this structure.
I break the page into sections and add containers to the sections as needed. When using columns it’s generally like this. Add a section, add a container, add a row and then add columns to the row.
The software takes a bit of learning but it’s great. Try reading the docs and going through the videos if you want to learn. It takes a bit of time but it’s worth it. Oh aye. Knowing a bit CSS is a must.
I must have missed something. Bootstrap have a hosting space.? Free I assume…
Add a section first then add your carousel within that. It’s always good practise to use sections/rows/cols.
Alternatively use divs and place attributes within.
You can always use a basic theme and adapt the color scheme and css to your own needs, if anything it well help you better understand structure within the html.
Hope that helps,
Kirby
P.S Just a thought when you add a section it automatically is set with padding which you can remove with something like this:
.no-pad {
padding: 0px;
}
Probably best to add the css after you’ve added your carousel, otherwise you’d need to drag and drop the carousel in the section within the overview window/tab bottom left, as opposed to the main view window.
@Jerbear On the simple 3 col container in the attributes panel (bottom center of the program) delete the min-vh-100. This is minimum vertical height which means it will take up the full height of the viewport or more depending on what’s in the container. Remove this class and the carousel will be the height of the largest element in the container.
The Section Component does not have any padding (you may be thinking of the Container Component.)
Also, there’s no need to create a new CSS class if you want to remove padding from a Component that has padding. Bootstrap has a utility class for this: p-0
You just type it in the Class Names field in the Attributes panel and it will add the following CSS to the selected Component…
.p-0 {
padding: 0!important;
}
I just like to set an independant class when it comes to some of the in-built classes as there have been times I didn’t want to globally change them, just certain attributes.
Thank you for the response. I’ve been working with FloydManFloyd via e-mail and he’s helping me get to grips with this.
I understood, rightly or wrongly, that BS was designed in such away that the user could create a website without the need to understand html or css. I have some experience of html but little with css…
One of the things that annoy me about BS is the positioning of elements when dropped on the canvas. They seemed to left aligned and trying to figure out how to centre them is certainly not an easy task. Made even more difficult when you drop elements within elements.
What’s lacking in all of the video tutorials I’ve seen so far, and I’ve seen a lot, is instruction on how to align elements and also how to ensure that all elements display properly on all devices.
I’s love to see a one page website created from scratch with many elements on it and each one described in detail as to their placement, colour, sizing, borders etc and showing clearly on which panel in BS these changes are made…
In the meantime I will continue to work with FloydManFloyd and also continue with a new video course I purchased on CSS.
Thanks again for your reply.
Jerry.
Add a css name to the attribute that you’ve dropped and set the margin-left and margin-right to auto, which will position the element to the center.
BSS is a learning curve without a doubt but it’s not steep one, even with limited knowledge it’s relatively easy to grasp and by practising with the included templates you’ll pick it up quicker.
Time and patience.
Add a css name to the attribute that you’ve dropped and set the margin-left and margin-right to auto, which will position the element to the center.
It’s not necessary to write custom CSS for stuff like this. You are using outdated positioning methods from the era when websites were non-responsive, and designed with absolute positioning and floats. While these methods technically will still work, they’re obsolete. Flexbox makes it incredibly easy to position things horizontally or vertically.
When you encounter such positioning challenges, just post the examples here in the forum, and someone will usually explain what you need to do.
You can absolutely create a Bootstrap website with BSS (Bootstrap Studio) without writing any CSS or HTML, but it helps quite a bit to learn CSS so you understand what is actually taking place when you style different elements through the visual user interface (Appearance and Options panels.)
One thing that can help you better understand the program (which is not clearly explained in the Docs) is that there are two basic ways to style components.
The first is by using the Appearance panel settings. These setting create inline CSS rules that are applied to the selected component(s). You can see these rules added as inline CSS in the Attributes panel. They show up under the field Class Names. They will have the word “style” in the Key field, followed by the actual CSS rule(s) in the Value field.
Styling your components via the Appearance panel basically does what would ordinarily be considered the “heavy lifting” of manually coding a website. They create the CSS rules you would otherwise have to type out by hand in an editor. But, because they apply the rules as “inline CSS” (meaning they are directly inside the page HTML), you want to “extract” them to external stylesheets. This ensures you don’t end up with HTML pages that have hundreds of inline styles (this is very undesirable from a development POV.)
The second way you can style components is via the Options panel. What you need to know about the Options panel is that all the setting here use Bootstrap utility classes to change the function or appearance of a component. Bootstrap Utility classes are simply pre-made CSS classes that are built into the Bootstrap framework via the main Bootstrap CSS stylesheet (bootstrap.min.css).
These Utility classes save a developer time by making it easy to add styling to the components without having to type common CSS rules over and over. For example, if I want to align the text in a paragraph to the center, rather than having to write a custom rule like
.text-center {
text-align: center;
}
I can simply click on the paragraph, go into the Options panel, go to the Text Options > Alignment and click the center icon. This will add the Bootstrap Utility class text-center to the component, and the text will be centered. Many Utility classes have breakpoints built into them. For example, the Utility class text-md-center would align the text to the center but only from the medium breakpoint up. The beauty of the Options panel is that it allows us to easily apply different Utility classes at different breakpoints (screen sizes) visually. By expanding the arrow next to the Alignment options, you can change the alignment at different sizes - for instance, centered on XS and left-justified (Start) on LG.
Being able to change different options at different breakpoints is crucial to being able to create a responsive website that looks correct on different screen sizes. Suppose I want to have three pictures next to each other on a desktop screen, but stacked vertically on a phone screen. This is easily accomplished by using Column width options at different screen sizes.
Also, you should know that the settings in the Options panel will change depending on the selected component because different components are designed to accept different utility classes. For example, selecting a P (paragraph) component will present you with different options than selecting a Column component, or a Button component, or a Carousel component.
When you select a component and change its settings in the Options panel, you will see the Utility class(es) added in the Attributes panel in the Class Names field. Classes added in this manner will have a dark gray background, and there will be a little lock icon at the start indicating they cannot be changed.
You can also add utility classes (or your own custom CSS classes) yourself manually by typing the Utility class (or your custom class) name directly into the Class Names field. So if I wanted to create a blue box with a paragraph in it with white text, and some padding around the text, I could select the paragraph and type bg-primary p-3 text-white into the Class Names field and I’d get this…
And I never had to write any CSS!
So it’s kind of imperative to learn what all the different Bootstrap Utility classes do if you really want to have a grasp of building a website using the Bootstrap framework. If you don’t learn the Utility classes, it doesn’t really make sense to use Bootstrap. There are “cheat sheets” available online to help with this (for example… Bootstrap Utility classes.)
Regarding your frustrations with alignment - yes, many components are set to “start” (left) by default. Bootstrap used to use “left” and “right” to denote alignment on most components (which is what CSS uses) but now it uses “start” and “end” because they wanted to have the framework follow Flexbox conventions (Flexbox also uses “start” and “end” to denote alignment.) Personally I feel this was a mistake, but it is what it is.
To get a grasp of how to align things in Bootstrap, you definitely want to take the time to learn how CSS Flexbox works. Many things in Bootstrap (and Bootstrap Studio) can be aligned using the little alignment icons. For example, if I want every single text component that I put into a column to align to the center, I can select the column, go to the Option panel, Go to Text Options > Alignment and click the center icon. Because CSS “cascades” all the child objects placed in the column will now inherit the center alignment applied to the column. This could even be done to a Row, a Container, a Section, or the entire Body of the page. But alignment only works for certain things (like paragraphs, headings, buttons, images.)
In many cases, you need to use Flexbox settings to align components, and Flexbox actually gives you quite a bit more power over positioning than the older methods of floats and margins. Floats and margins are still available in the Options panel, but Flexbox is just a better solution. I would highly recommend you visit this website and do the exercises. It can take a little while to grasp how Flexbox works, but once you understand it, you’ll use it constantly.
To conclude, I would recommend you…
) by many helpful people in our community. We are a pretty tight community and help each other out. If in doubt and totally stuck, search the forum or post a question.Hope this helps you out (and others.)
You’re right but I was just looking at this from someone being new to BSS. For newcomers to CSS, understanding the concept of auto margins for centering can be easier initially than diving into Flexbox or Grid. It’s a simple method that has been taught for a long time and is prevalent in many online resources and tutorials.
