FreeCodeCamp/HelpFrontEnd

Get help on our Front End Development projects.

JoEezy

@JoEeeezy_twitter

i know it can be done with css with margins but i'm trying to learn the bootstrap way for responsive content

Greg Engler

@gmengler

hmmm I think I've dealt with something like that before, lemme check

does codepen automatically "run" your code when you make an edit or do you have to click something?

JoEezy

@JoEeeezy_twitter

it usually autoruns but i believe theres an option in settings to turn that off (in case you're using apis and dont' want it calling everytime you edit)

Abraham Anak Agung

@AbrahamAnakAgung

you could turn it off in setting -> behavior -> auto updating preview

Greg Engler

@gmengler

@JoEeeezy_twitter definitely struggling to get that centered

laowong

@shanxilaowang

英文好难啊

JoEezy

@JoEeeezy_twitter

@gmengler even though it seems so straightforward in the docs.. the bootstrap grid confuses me when i start using it

@gmengler i just ended up using css :eyes: :

Greg Engler

@gmengler

did it work?

JoEezy

@JoEeeezy_twitter

yeah i used this:

.center-block {
    margin-left: auto;
    margin-right: auto;
    display: block;
}

Greg Engler

@gmengler

nice - you might be able to get it working with bootstrap by making the columns smaller, but not sure

it's been a while since I was really using bootstrap

JoEezy

@JoEeeezy_twitter

same here ... i kind of rushed through the bootstrap tutorials to get to javascript :smile:

Ken Haduch

@khaduch

@JoEeeezy_twitter - looks like you are using bootstrap 4 - it uses flexbox, and there is a class that does the center alignment - justify-content-center

Ghost

@ghost~5a7ec891d73408ce4f8c87b2

@khaduch I've used display: block; margin-left: auto; margin-right: auto;

it works proper on my page

Ken Haduch

@khaduch

@dhavalveera - yes, I think that @JoEeeezy_twitter was trying to use bootstrap, if you look at his comments from a while ago. So i just looked up the information and listed it. (For Bootstrap V4.)

Ghost

@ghost~5a7ec891d73408ce4f8c87b2

then put just-content: center in tag

in HTML

then maybe it works

Ken Haduch

@khaduch

@dhavalveera - yes, but bootstrap has a class that sets that property. If you're intent on using Bootstrap, at least in v4, that's what they provide. You can always add custom CSS if you want to. If not, then you can use the classes that they defined. Both should work.

Ghost

@ghost~5a7ec891d73408ce4f8c87b2

but if we use Bootstrap 4 then we can't the style of that tag

either custom css or in Bootstrap

it is not changing quickly

coderNewby

@coderNewby

thanks @DarrenfJ for all your help

CamperBot

@camperbot

codernewby sends brownie points to @darrenfj :sparkles: :thumbsup: :sparkles:

:star2: 2448 | @darrenfj |http://www.freecodecamp.org/darrenfj

habibaatify

@habibatify_twitter

i think in that challenge the result will be same why the result is different ?

Ehidin

@eabg

hey all

I need a little help

Sweet Coding :)

@SweetCodingInc

@eabg ask away

Ehidin

@eabg

not understanding what is the missing link in this code:

Screen Shot 2018-04-03 at 12.11.01 AM.png

Screen Shot 2018-04-03 at 12.11.18 AM.png

Sweet Coding :)

@SweetCodingInc

@eabg it should be $('.btn').on('click'....

you're missing . before btn

Ehidin

@eabg

oh man really? let me check it out

Sweet Coding :)

@SweetCodingInc

and also, in your html, there is no element that has class="btn"

so it's not going to work either way

Do you want to attach event handlers to all your buttons?

From the html you've shared, you need to do

$('button').on('click'....

Ehidin

@eabg

I orginally had button with no luck

so I tried that out and nothing

Sweet Coding :)

@SweetCodingInc

what do you want to happen when you click the button?

The event handler doesn't look right to me

Ehidin

@eabg

so im just trying to add some css changes to boxes..later do animate

Sweet Coding :)

@SweetCodingInc

With your code, let's say you click on the button 1. Then the clickButtonId will be btn1

and your selector will be#box1btn1

Where communities thrive

People

Repo info

Activity