Problems with Bootstrap, Wikipedia Challenge

1

hi!
A few problems, with the Bootstrap framework, working on the Wikipedia challenge. Pen: http://codepen.io/bencarp/pen/WpbEoj

  1. I’m trying to either justify either center the control buttons, using this bootstrap classes:
    “btn-group-justified”, “center-block”, “btn-group-centered”. unfotunately it does not succeed.
  2. Also, I’m trying to center the main element, using this code:
<main class="center-block">

main {  max-width: 1100px;}

3.In Bootstrap using this buttons, the background color is white, and the pressed button is gray (see image), when copying the code to my pen neither the background color neither the functionality are the same.

image.png910×330 19 KB

Any suggestions?
THANKS!

2

You’re currently using bootstrap 4. Try changing to bootstrap 3.

Use this in your CSS settings:
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css

1 Like
3

Thanks! This solved the problem.

I am facing a new bootsrap problem though, I hope you can help me with.
Take a look at the image:

image.png926×480 21.5 KB

I’m trying to add this group of buttons constructed from anchor elements. I am following the instructions completely, but am not getting the same result. Here is the Pen: http://codepen.io/bencarp/pen/WpbEoj
Any suggestions?

4

Generally, when you use the btn class, you also use another class such as btn-primary or btn-default (this one is what I think you want). Then you can remove the background color you set for the .btn elements in your CSS.

1 Like
5

Thanks! This solved the problem.
Going one step forward I face a new Bootstrap challenge.
I’m trying to control the active background color of the buttons. I managed to control the hover background color using the :hover pseudo class, but I fail to change the active background color using the :active (or .active) pseudo class.
Looking at the Bootstrap documentation there is a section for customizing Bootsrap, and in there for customizing buttons, but I’m not sure how to do that (see image). I’m not sure how do this. Perhaps using @btn-default-color? If so how do I use it and where?).

image.png900×381 17.7 KB

You may also advice about how to advance my skills with Bootstrap.
Also, when the viewer is less than the page width (which I defined as 1100px using max-width property on the body element), there is no side margins, even though I defined a 1 em margin to the body element. Can you explain?
Thanks in advance,
Ben

6

I haven’t used getbootstrap.com/customize, but I think it allows you to create your own bootstrap theme (say you want btn-primary to be colored red instead of blue). But I don’t think you can readily use your custom version with codepen.

At the very top of the “Less variables” section is a subsection for setting colors for primary, default, warning, etc. which you can then reference anywhere (like in the field for @btn-primary-bg)

Have you seen this playlist?

I’m not really sure (I’m guessing that if the page width is less that the max width you defined, it just takes up whatever space there is regardless of margins). However I noticed that you didn’t use container / container-fluid and row classes. Why don’t you give them a try? Give this a read:

1 Like
7

Thanks! I saw no reason to use the grid for the title or buttons, just for displaying the info about the channels which is yet to come. However, adding the class “container” to the body element solved the margin problem :slight_smile:
I just now understand that the customization option means to make changes before u download. Lol.
I found a solution for the buttons background. I needed to use the focus pseudo class.
THANKS!