Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
  • Aug 17 09:32
    User @bjorno43 unbanned @linkin-park
  • Jun 20 21:19
    @bjorno43 banned @shenerd140
  • Apr 25 17:13
    @mstellaluna banned @cmal
  • Jan 08 22:05
    @mstellaluna banned @dertiuss323
  • Nov 07 2018 04:42
    User @texas2010 unbanned @ows-ali
  • Nov 02 2018 16:25
    @texas2010 banned @ows-ali
  • Oct 12 2018 05:50
    @bjorno43 banned @NACH74
  • Oct 05 2018 23:02
    @mstellaluna banned @JomoPipi
  • Sep 16 2018 12:21
    @bjorno43 banned @yash-kedia
  • Sep 16 2018 12:16
    @bjorno43 banned @vnikifirov
  • Sep 05 2018 08:12
    User @bjorno43 unbanned @androuino
  • Sep 05 2018 07:38
    @bjorno43 banned @androuino
  • Aug 23 2018 16:57
    User @bjorno43 unbanned @rahuldkjain
  • Aug 23 2018 16:23
    @bjorno43 banned @rahuldkjain
  • Jul 29 2018 14:13
    User @bjorno43 unbanned @jkyereh
  • Jul 29 2018 01:00
    @bjorno43 banned @jkyereh
  • Jul 10 2018 22:09
    @bjorno43 banned @manafn
  • Jul 06 2018 15:20
    @texas2010 banned @imlegend19
  • Jul 03 2018 12:28
    @bjorno43 banned @vbvmatta
  • Jun 29 2018 13:54
    @bjorno43 banned @OGTechnoBoy
Christopher
@christopherwangemann
No I meant I thought the body tag had to be after the responsive tag
Gulsvi
@gulsvi
Do you mean container-fluid?
Christopher
@christopherwangemann
yup
Gulsvi
@gulsvi
That class makes your page take up the full width of the screen. If you use container instead, it will give some space on each side of the page on larger screens.
Christopher
@christopherwangemann
ok but that's a set width then right?
Gulsvi
@gulsvi
There is no single tag or class name that will make your page responsive
Yes, a set width
was just explaining the difference - lots of people seem to think that the container-fluid class makes their website responsive, but it just controls how wide it can get
h1tag
@h1tag
@SkyCoder01 so col-*-* classes is what makes the page responsive?
Gulsvi
@gulsvi
Yes, the column class make your page layout change depending on the screen size - that's a responsive website. The layout responds to the screen size @fortMaximus
h1tag
@h1tag
@SkyCoder01 ty. I thought that container-fluid is what makes the page responsive and col classes are just to define the size
CamperBot
@camperbot
fortmaximus sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 154 | @skycoder01 |http://www.freecodecamp.com/skycoder01
h1tag
@h1tag
but col-*-* don't work without container-fluid, right?
Gulsvi
@gulsvi
container-fluid just lets your page always be 100% wide - even on super wide monitors that are like 4000px wide :)
col-*-* works in container too. You just have to do container, then a row, with columns inside the row
And can't have containers inside of other containers
Jaime
@jmasked
Hello, so I finished my portfolio. Does anyone actually look it over at some point when you submit it?
Christopher
@christopherwangemann
@SkyCoder01 so a regular container just sets the max width and on anything smaller it would behave the same as the container-fluid?
Gulsvi
@gulsvi
@christopherwangemann yes
Christopher
@christopherwangemann
aaahh
h1tag
@h1tag
@SkyCoder so containter or container-fluid are requirements to make the page responsive using Bootstrap (because without them col-*-*and row won't work)?
Gulsvi
@gulsvi
@fortMaximus Yes, that's one way to think of it :)
Christopher
@christopherwangemann
@SkyCoder01 thx! I'm slowly starting to understand what's going on in bootstrap :p I find there's a steep learning curve after doing the little lessons on FCC and then building a portfolio page from scratch
CamperBot
@camperbot
christopherwangemann sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 155 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
The container CSS code is very simple actually, just centers everything inside and gives some padding. I learned a lot of this from talking to @sorinr the other day :)
.container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
That's all it does
container is the same, but uses a set width on different screen sizes
h1tag
@h1tag
good to know! Thanks again :smile:
Christopher
@christopherwangemann
@SkyCoder01 Ah thx!
CamperBot
@camperbot
christopherwangemann sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: christopherwangemann already gave skycoder01 points
Gulsvi
@gulsvi
No problem :) I wish the javascript algorithms were like this
h1tag
@h1tag
LOL
EZ
Christopher
@christopherwangemann
@SkyCoder01 when you use container, it automatically uses the 4 different sizes that are predefined in the bootstrap documentation depending on the screen size or do you have to define those separately?
Gulsvi
@gulsvi
@christopherwangemann It automatically uses them
Christopher
@christopherwangemann
@SkyCoder01 ah ok cool
Chris
@ChrisWHurd
Hi I am currently on the build tribute page task. I am struggling to find a way to get the approximately 1 inch white border around the entire page like he has in his example. any advice?
Christopher
@christopherwangemann
@SkyCoder01 Can I ask one more thing? I put the picture and paragraph together and made the image float. Should I put each in separate columns?
@ChrisWHurd i just put a margin on the body when I did it
@ChrisWHurd in percentage tho to not have too much space when you're on a small device
Gulsvi
@gulsvi

@christopherwangemann I think something like this would look good - I skipped the portfolio though

          <div id="about" class="row">
            <div class="col-xs-4">
              <img src="path to your picture" class="img-responsive center-block" />
            </div>
            <div class="col-xs-8">
              <p>about text</p>
            </div>
          </div>

That will make the picture take up about 25% of the width and the text the other 75%. You can adjust the 4 and the 8 for the columns as needed.

Chris
@ChrisWHurd
Ok Thanks
Gulsvi
@gulsvi
Think I'll do the portfolio after I finish all the other front-end projects so I can add them all in at once
Christopher
@christopherwangemann
@SkyCoder01 ah ok thx I'll try that
CamperBot
@camperbot
christopherwangemann sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: christopherwangemann already gave skycoder01 points