What are Bootstrap components?

What Are Bootstrap Components? Buttons and Carousels in Dreamweaver

Key Takeaways

• See how Bootstrap saves time compared with styling plain HTML yourself.

• Use ready-made button classes to change colour, size and width.

• Avoid a common Dreamweaver mistake: applying a class to the wrong element.

• Insert a responsive carousel, test it in a browser and make it your own.

• Use Bootstrap’s documentation as a reference rather than memorising every option.

Bootstrap Gives You a Starting Point, Not Just a Grid

Bootstrap’s components are worth exploring before getting into its grid system. These are the useful little pieces of a website that someone has already put together for you. Some are simple, like buttons. Others, like an image carousel, have quite a few moving parts.

The easiest way to understand their value is to make the same thing twice: once with Bootstrap and once with plain HTML and your own CSS.

You can build either version yourself. The difference is how much time you spend getting it into shape, and how much of the initial work Bootstrap handles for you.

Start with a Simple Button

Create a Bootstrap test document

In Dreamweaver, create a new document using the Bootstrap option:

1. Choose File > New.

2. Select the Bootstrap setup and create the new supporting files.

3. Click Create.

4. In the Insert panel, choose Form > Button.

5. Save the document with a name such as Bootstrap Test.

At first, there is not much to get excited about. You have a blank page with a button on it. But that button already has styling supplied by Bootstrap, rather than relying entirely on the browser’s default appearance.

Create a plain HTML comparison

Next, create a separate HTML document without Bootstrap, save it as something like Plain Old HTML, and insert another button.

The plain HTML button looks like the standard button you would expect straight out of the browser. The Bootstrap version has a different font and a more styled background. In this setup, there is also a slight gradient.

That initial difference is fairly small. A slightly nicer button is useful, but it is hardly magical. The real benefit appears when you start changing it.

Find the Options in Bootstrap’s Documentation

Keep the Bootstrap website handy. You are not going to remember every component or every class name, and you do not need to.

The component library includes things such as:

• Button groups and dropdowns

• Input groups

• Navigation

• Breadcrumbs

• Jumbotrons

• Thumbnails

In the documentation used for this example, the basic button styling lives in the CSS section under Buttons. Related features, such as button groups and dropdowns, appear in the components section.

The button reference shows colour options, different sizes and block-level buttons. Instead of creating each variation yourself, you apply the appropriate ready-made class.

Turn the Button Red with a Class

Select the button in your Bootstrap document and use Dreamweaver’s Add Class control. Entering a dot followed by btn brings up suggestions for Bootstrap’s button classes.

Add btn-danger, keeping the button’s base btn class. The button becomes red with white text. That is the whole point: Bootstrap already contains the styling, so you only need to select it.

A small naming detail matters here: a dot identifies a class selector in CSS and in this Dreamweaver workflow. The class name itself is btn-danger, without the dot.

No new stylesheet, no colour picker and no manual spacing adjustments. Just a class applied to the right element.

Build the Same Button Manually

Now return to the plain HTML document and try to produce a similar result. This is where the time comparison becomes a little more convincing.

1. Open CSS Designer.

2. Create and link a new stylesheet, with a name such as plain-old.css.

3. Create a custom class selector, such as .btn-dan.

4. Apply that class to the button.

5. Set the background colour to red.

6. Set the text colour to white.

7. Add padding to give the label some breathing room.

8. Adjust the text alignment so the label is centred.

For this quick comparison, you can experiment with around five pixels of padding at the top and bottom, and ten to fifteen pixels on the sides. You are adjusting the space inside the button, between its text and its edges.

You will get something resembling the Bootstrap version, but matching it still takes more fiddling. And this is only one tiny button.

If the whole page turns red, check your selection

Here is a very easy mistake to make in Dreamweaver: you think you have selected the button, but you have actually selected the body element underneath it.

Apply your red-background class to the body and the page turns red instead of the button. Oops. The CSS is doing its job, just on the wrong element.

Remove the class from the body, select the actual button and apply the same class again. Before changing your CSS, check which element has the class. It can save you a lot of unnecessary troubleshooting.

The manual approach is perfectly possible. You control each styling decision yourself. Bootstrap’s advantage is that it gets you to a useful result much more quickly.

Change Button Size and Width Just as Quickly

Colour is only one option. The same class-based approach lets you change the button’s size and how much space it occupies.

• btn-lg: makes the button larger.

• btn-block: makes the button stretch across the width of its container.

In the Bootstrap setup used here, these classes can be added alongside btn and btn-danger. The colour, size and width choices work together.

A block-level button does not necessarily fill the entire screen. It fills its containing element. On an otherwise empty page, that can look like a giant button running from one side to the other.

Use the documentation that matches your project’s Bootstrap setup to check the available class names. You do not need them all memorised. Knowing where to find them is enough.

Add a Responsive Carousel in Dreamweaver

Buttons are a handy introduction, but a carousel makes the time saving much more obvious.

Building an image carousel yourself means dealing with several pieces, not just colours and padding. Even adopting somebody else’s carousel can take time to integrate. Then there is the question of how well it behaves across browsers, screen sizes and devices.

Bootstrap gives you a ready-made starting point for that work. Dreamweaver incorporates many Bootstrap components into its Insert panel, so you can add them without copying and pasting their markup from the documentation.

Insert and test the carousel

1. Return to the Bootstrap document and delete the test button.

2. Switch the Insert panel to Bootstrap Components.

3. Choose Carousel.

4. Save the document.

5. Use Preview in a Browser.

6. Resize the browser window to check how the carousel adjusts.

7. Use the arrow controls to move between slides.

One selection inserts a complete starter carousel. In the browser, it responds to changes in width, and its controls move between the slides.

That is a much more substantial head start than a styled button. Rather than spending your time assembling the basic interaction, you can get on with adapting it to your site.

Make the Starter Component Your Own

The inserted carousel is a fairly plain Jane version, and that is fine. It is not supposed to arrive with your finished design already attached.

You may not want the default heading or the secondary text. You will almost certainly want to replace the placeholder images. The white space around the starter image may need adjusting too.

Your next job is to:

• Remove or change the text you do not need.

• Replace the placeholder images with your own.

• Adjust the appearance to fit your design.

• Preview the result again at different widths.

Bootstrap does not mean that every possible bug has disappeared, or that you can skip testing. It does mean that much of the common groundwork has already been handled.

That is why Bootstrap components are so useful: you start with something that works, then spend your effort making it look right. The more complicated the component, the more valuable that head start becomes.

Key Terms

Bootstrap component

A ready-made interface element supplied by Bootstrap. Examples include dropdowns, navigation and carousels.

CSS class

A name applied to an HTML element to connect it with styling rules. Bootstrap supplies existing classes, such as btn-danger, so you do not have to write those rules yourself.

Padding

The space inside an element, between its content and its edges. On a button, padding gives the text room rather than leaving it pressed against the border.

Block-level button

A button that stretches across the width of its container. In the Bootstrap setup demonstrated here, this is applied using btn-block.

Responsive carousel

A slideshow component that adjusts to different available widths. Its controls let you move between slides.

FAQs

Do I need to memorise Bootstrap’s classes?

No. Use the documentation to look up the colour, size or component options you need. Dreamweaver’s class suggestions can also help you find available classes.

Can I customise Bootstrap components?

Yes. The default component is a starting point. You can replace images, remove unnecessary text and adjust the styling to suit your website.

Why did my button class change the whole page?

The class may have been applied to the body element rather than the button. Remove it from the body, select the button itself and apply the class there.

Is Bootstrap faster than writing my own CSS?

For the examples here, yes. Ready-made classes save styling time on buttons, while a carousel provides an even bigger head start because its basic structure and interaction are already in place.