Questions about Bootstrap

[Mikari]

Ah ok, I was thinking templates or lots of mini legos, I mean mini templates. XD Templates have never been my thing, since I'm more into adding css classes with names I can recall as needed. I guess there are a lot of "shortcuts" out there these days. (and here I am going in the opposite direction and diving deeper into writing my own codes lol)

[Camy]

LEGOS -coughs- But yeah, WP templates are confusing as heck to me still despite using it for a while for one of my sites that I used for my personal one back in 2009.

But the best thing though is that all you need to search is "bootstrap wordpress themes" and download one of those. Boom done. Just find one you like and can mess with the CSS bits after xD

[Robin]

@Camy: you might have just solved the huge problem I've had with my Wordpress blog since...well, ever. Been struggling trying to make my own theme (and make it responsive)...maybe I can give somebody else's Bootstrap WordPress theme a whirl!

[Camy]

There you go XD Plus it'll help to understand too what does what if you want to experiment with it in another folder or site.

[Robin]

Been toying around with Bootstrap for about an hour, and so far I've figured out...uh, how to change the navbar color. xD Oh, and how to rewrite the text. It's something ^o^

One thing I keep running into: how do you get the "ul" and "li" part of the navigation to behave itself? I put my nav links in the right spot on the navbar (or so I thought), but it keeps putting the navigation right below the site title in a scrunched-up mess. Changing the usual list style rules stuff in bootstrap.css doesn't seem to have an effect on the list items' display.

(I don't often use ul and li tags for navigation--it kinda bugs me--so I think there's probably something simple I'm missing.)

[nyxmidnight]

Maybe you're missing a class? If you show me your HTML I can help you troubleshoot it.

[Robin]

This seems to be where the trouble is--not really sure if I'm using the correct class or what. By using the "navbar-nav" class on the UL instead of the actual links, I was able to get the links to display beside the site title, but I still can't change their color or make them sit vertically centered in the navbar.

Code: Select all

<a class="navbar-brand" href="index.php">Cleveland County Choral Society</a><ul class="navbar-nav"><li><a href="about.php">About Us</a></li><li><a href="concerts.php">Concerts</a></li><li><a href="media.php">Media</a></li></ul>

(Also, I'm using the Jumbotron template and am having trouble getting a picture to display in the jumbotron itself. CSS doesn't like absolute links, but that's the only way I can figure to link to the pic from within the /css/ folder of Bootstrap. I had this same problem with Wordpress -_-)

Many many many thanks in advance for any help! Frameworks are REALLY cool but my brain apparently has a hard time operating inside the box. xD

[nyxmidnight]

Your ul is missing the nav class. It should say

Code: Select all

<a class="navbar-brand" href="index.php">Cleveland County Choral Society</a><ul class="nav navbar-nav"><li><a href="about.php">About Us</a></li><li><a href="concerts.php">Concerts</a></li><li><a href="media.php">Media</a></li></ul>

I'm trying it on my work PC (shhh) and that got the link to display properly. If you want you can use the navbar example in Components and take out the code you don't need.

To make changes to the CSS, make a custom.css file in the css folder (you can name it anything you want really) and link it in the head of your page, below the Bootstrap stylesheet(s). That way your CSS will have precedence. After that it's the same CSS as ever.

I'm not quite sure what you mean by a picture in the jumbotron not working, though. Do you mean like a background picture for it instead of the grey, or something else?

[Robin]

Ah, ok, I'll try that change and see how it works. (Edit: it works! Now to make the font big enough so that the text isn't hanging out awkwardly at the very top of the screen, lol.)

I tried making the custom.css file but it didn't seem to affect the page...might not have been using the right selectors. (The Bootstrap CSS file...I have never seen such a giant CSS file with so many IDs and classes in all my life!! LOL)

In terms of the jumbotron, I was wanting a background picture for it--just can't get it to display because I actually don't know how to link to things that aren't in the same folder. ^_^; I usually use absolute links but CSS does not like them, LOL

Thank you so much, Nyx! I promise I'm not always this derpy about code, xD

[Robin]

Update: Still trying to puzzle through this code...I did figure out how to make the custom.css file work (not sure what I did, but it magically started working), and made some cosmetic changes, but I still have some weird code bugs I'm trying to squash. xD

One issue is that I still can't make the navigation "ul" behave itself, as seen below: I want the list items to be beside the site title rather than hanging out on a line below it, but I've been scratching my head and Googling for a week with no solution. (It looks even more awful when you shrink the window horizontally--the links just go everywhere in no certain order. >_<)

Second issue is the very very plain jumbotron, below: I have a suitable background image, but I can't figure out how to link to it because absolute links don't work in CSS. All the CSS files are in a "css" folder within the "bootstrap-dist" folder on my hard drive, while both the test HTML file and the desired background image is two folder levels above it.