Dropdown Arrow Class
In order to create a down arrow like this: , what class should we apply to the element?
Answer: caret
Opening Dropdowns
The Bootstrap Dropdown plugin will toggle a specific class on our element in order to make the dropdown visible. Will the following dropdown menu be visible when the page loads?
-
Yes, it will be visible when the page loads.
-
No, it will not be visible when the page loads.
Take a Tour Today!
We can use the Dropdown Plugin for more than just navigation components. One other place we could use it is on our "Take the Tour" button. Follow the tasks below to convert this button into a Dropdown.
Within our "Take the Tour" button, we'll want to show a little down arrow so our travelers are encouraged to click on it. Add this icon after the text.
Blasting Off With Bootstrap The Fastest Way to Space
Make your way to space in the comfort of your own rocket, elevator or transporter.
Book Today!
Even if you're traveling tomorrow, you can still get tickets today. We have a number of conveniently located ports around the globe to service everyone.
Go Anywhere
If you need to get to space today, why not try out a transporter? Despite the claims, there are have been no deaths in the last 6 weeks!
RocketBus®
For cheapest fares, catch the next RocketBus® to the stars. Cheaper on your wallet, and easiest way to make friends.
Any sufficiently advanced technology is indistinguishable from magic.
Our Transport Systems
Learn more about our transport systems to find out which one is right for you. Pick out the mode of transport that works for your budget and risk level.
Transporter
- 8 second travel time
- Chance of death only 1 in 7,593
- Low price of only $15.99!
Space Elevator
- 8 hour scenic ride
- Only 1 horrific death per 12,456
- Only $45.99 if you book today!
RocketBus
- 8 minute scenic ride
- Plunging death rate of under 1/100k
- $74.99 lets you blast off today!
A dream that became a reality and spread throughout the stars.
Plan Your Trip Today!
Todays Time here
Deals here
Forecast
All systems are operational
- Transporters
- Space Elevator
- RocketBus
The National Weather Service has issued a solar flare watch for the following time periods. Please plan accordingly:
- February 9th, 21:43
- May 18, 19:82
- July 4, 08:42
Technically, transporting means making a clone of yourself and killing off the other one. If you believe in a soul, you should be aware of this fact before attempting travel using a transporter.
Within our "Take the Tour" button, we'll want to show a little down arrow so our travelers are encouraged to click on it. Add this icon after the text.
Our list of links for this Dropdown is currently unstyled. Give it a Bootstrap class to indicate it is a Dropdown Menu.
In order to tie in the structure and behavior, we'll need to add a specific attribute to our button to let Bootstrap know this is a Dropdown. Add that attribute and value.
Our Dropdown is working! But it seems a little weird we have our 3 transportation methods, and an unrelated link to "Learn More" in there. Go ahead and add a divider before the "Learn More" link.
Lastly, we want to indicate that the "Take the Tour" button will popup a dropdown rather than taking us to a new page. We could do this by adding a Glyphicon, but in this case there's an easier way with a class provided by Bootstrap.
Checkout the Bootstrap documentation on and add the dropdown-toggle class to the appropriate place.