FreeCodeCamp/HelpFrontEnd

Get help on our Front End Development projects.

CamperBot

@camperbot

dueldrawer8 sends brownie points to @collinbird :sparkles: :thumbsup: :sparkles:

:cookie: 40 | @collinbird |http://www.freecodecamp.com/collinbird

Coy Sanders

@coymeetsworld

@Dueldrawer8 you have to remember the columns should add up to 12 per row with bootstrap

Randy Goldsmith

@Dueldrawer8

@coymeetsworld ah yes i changed that thanks

CamperBot

@camperbot

dueldrawer8 sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:

:star2: 1267 | @coymeetsworld |http://www.freecodecamp.com/coymeetsworld

Collin Beder

@CollinBird

yes so you can use also col-size-sm=3 for each column

Randy Goldsmith

@Dueldrawer8

@CollinBird i did..still didnt center it

http://codepen.io/duel_drawer8/pen/rLygWG

i thought the container element in bootstrap centered the content? maybe it just contains it all in one container. Do I need to apply an explicit width to container?

Coy Sanders

@coymeetsworld

you still have the column problem :)

thats not how it works, columns need to add up to 12, per row

Randy Goldsmith

@Dueldrawer8

@coymeetsworld yes i did 4 rows..each with col-sm-3

Coy Sanders

@coymeetsworld

basically you're saying just use the first fourth of the row's width to put content

columns need to add to 12, per row

Randy Goldsmith

@Dueldrawer8

ohh

Bhushan933

@Bhushan933

@trip16661 No I have worked a lot with responsive sites, but for my organizations ... now I want to create my personal portfolio :)

Randy Goldsmith

@Dueldrawer8

lol

Coy Sanders

@coymeetsworld

anyways you probably shouldn't do it that way anyways

try using a table instead

Randy Goldsmith

@Dueldrawer8

i was just trying to use bootstrap in this project

Coy Sanders

@coymeetsworld

you can still use it, but for laying out the calculator i would use a table

youre going to have to hack around bootstrap to get it working correctly the way you want it

Randy Goldsmith

@Dueldrawer8

so i would set my .calc div to display: table?

Coy Sanders

@coymeetsworld

no i mean actually use table tags, idk just a though

you can try with bootstrap to lay it out but I had problems doing it that way, just went to table

Randy Goldsmith

@Dueldrawer8

@coymeetsworld okay thanks

CamperBot

@camperbot

dueldrawer8 sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:

:warning: dueldrawer8 already gave coymeetsworld points

Coy Sanders

@coymeetsworld

np good luck

Randy Goldsmith

@Dueldrawer8

@coymeetsworld what about assigning spans to each number instead of buttons?

Coy Sanders

@coymeetsworld

i think buttons are ok

you can style buttons too

Jan Reimer

@najre

hey guys i am bilding my own portfolio at the moment and i wanted to know how i do this think at the top that like in this page https://codepen.io/FreeCodeCamp/full/YqLyXB/

i this case it is the pink think at the top

Coy Sanders

@coymeetsworld

@najre you can do it through css

setting up a fixed position on an element

Collin Beder

@CollinBird

yeah create an:
```.hr.star-bright {
}
and try to get it aligned correctly within your header

.hr.star-bright {
}

nvm that does’t work I’m not sure how to do it.

Phil

@mremotoo

@Dueldrawer8 to center a block in bootstrap, set it to center-block. I think it needs to be in a row class div

@Dueldrawer8 also try setting margin: 0 auto; in CSS

@Dueldrawer8 if you're using columns, try adding an offset class to it. Check booststrap documentation for offsetting

Brooks Van Buren

@brooksvb

Hey all, how can I make all these buttons centered within the navbar?

I tried containing the buttons within one div, within the bar, and giving the div margin: 0 auto; but that did not work

Elbert Cortez

@trip16661

const setShowcaseImg = function() {
        const thisProject = project[$(this).data("project")];
        //gets the name of the project to later use it to fetch properties from that project
        $showcaseImg.find("img").attr("src", thisProject.img);
        //gets the url of the imagen and set it
        $showcaseImg.find("p").text(thisProject.description);
        //gets the description 
        $showcaseImg.find("a").attr("href", thisProject.url);
        //gets the url 
        $showcaseImg.addClass("showcase-open");
        // then it opens a div containing this info 
    }

I have something like this to showcase some images with text and a link but when i close the showcase div and activates it again with a different images it just takes like 30ms to actually change the image it work, but i can still see the previous image for like 20ms and that's not good :worried:
any idea of why, or how to work around it? I guess i can just simplely add a conditional or a setTime function to delay it but if you ask me it sound cheap :worried:

Brooks Van Buren

@brooksvb

Nevermind! I found out all I have to do is add text-align: center; to the navbar, and it centers the button elements.

MeonAigeanta

@MeonAigeanta

I am trying to align my button and my temperature on the same line.
Ideally, I would like the button to be align to where the degree symbol should be, but I will settle for just getting them on the same line for now.

html

var code = "formatted";
<div class="row-fluid" id="pushDown">
    <div class="col-xs-12">
        <h1 id="temp"><h1>
                <button class = "btn btn-circle" id = "button" onclick = "switchScale()">C</button>
  </div>
</div>

css

var code = "formatted"
#button{
  width: 3vw;
  height: 3vw;
  text-align: center;
  padding: 1vw 0 ;
  font-size: 1vw;
  line-height: 1.42;
  border-radius: 2vw;
}
#pushDown {
  display: inline-block;
  margin-top: 10%;
}

Where communities thrive

People

Repo info

Activity