Skip to main content
ShannonGTTHWG
ShannonGTTHWG
Participant
April 1, 2019
Answered

Bootstrap Buttons

  • April 1, 2019
  • 3 replies
  • 758 views

I am still learning boostrap and am having trouble making some customized navigation bars. I am stuck on a few points.

I have a second navigation bar (in addition to the main navigation bar at the top of the page). I want to make 1) three sets of buttons (rows) with  2) a main button for each row (with subbuttons) and the titles are of various lengths. I want to be able to 3) make all the buttonst the same size. How can I do this?

Also, 4) The text on my main nav bar buttons are all white but for some reason the text on this second group of buttons comes out black. I can't seem to figure out how to make this text white also.

This topic has been closed for replies.
Correct answer Nancy OShea

Bootstrap is all about the CSS classes you add to elements.  And I highly recommend spending a weekend learning what the various Bootstrap classes do.   Otherwise, you'll be lost.

Navbar default = dark text on light background

Navbar inverse = light text on dark background.

Bootstrap 4 navbars also support contextual color classes (basic, default, primary, success, info, warning, danger, link)

A Navbar that collapses into a hamburger icon on mobile devices is for primary navigation only.  A 2nd navbar is usually unnecessary and could pose a problem on mobile devices.  

If you really need a 2nd set of links, use Bootstrap Buttons, Tabs or Pills instead of navbars.

3 replies

BenPleysier
Community Expert
BenPleysierCommunity Expert
Community Expert
April 2, 2019

As osgood_​ has stated, the question is too broad which has prompted a broad response from Nancy OShea​. I would like to add to that by giving you a link to W3Schools, specifically the part that mentions navigtion bars: Bootstrap 4 Navigation Bar

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
Nancy OShea
Community Expert
Nancy OSheaCommunity ExpertCorrect answer
Community Expert
April 1, 2019

Bootstrap is all about the CSS classes you add to elements.  And I highly recommend spending a weekend learning what the various Bootstrap classes do.   Otherwise, you'll be lost.

Navbar default = dark text on light background

Navbar inverse = light text on dark background.

Bootstrap 4 navbars also support contextual color classes (basic, default, primary, success, info, warning, danger, link)

A Navbar that collapses into a hamburger icon on mobile devices is for primary navigation only.  A 2nd navbar is usually unnecessary and could pose a problem on mobile devices.  

If you really need a 2nd set of links, use Bootstrap Buttons, Tabs or Pills instead of navbars.

Nancy O'Shea— Product User & Community Expert
O
osgood_
Legend
April 1, 2019

I think this is too vague to provide an answer. You mght have to post some code as to what you have so far explaining what you want where and what colors.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices