FreeCodeCamp/HelpFrontEnd

Get help on our Front End Development projects.

Gulsvi

@gulsvi

The Collapse JavaScript plugin is part of bootstrap.js

h1tag

@h1tag

@JordyDew you can also use some padding in the CSS rule you just created

Isan Bothra

@isanbothra

http://codepen.io/craigvantonder/pen/MJwLWb

what about this?? it is working fine... @fortMaximus

@SkyCoder01

h1tag

@h1tag

yes

Gulsvi

@gulsvi

@isanbothra Yeah, it works fine because it's using the bootstrap.js file.

Just add it, your toggle button will work! :)

Moustapha

@moustaflo

I am having the following error: No 'Access-Control-Allow-Origin' header is present on the requested resource.

var wikiApi =  "https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=Albert%20Einstein&format=json&utf8=";
$.getJSON(wikiApi, function (data){
     document.getElementById("title").innerHTML = data.search;
  });

Moisés Man

@moigithub

@isanbothra bootstrap internally will use that library.. but u still need to link em on ur code
even if u dont use directly

h1tag

@h1tag

@isanbothra add jquery then this Bootstrap js file: https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js in your JS editor

Gulsvi

@gulsvi

@moustaflo Add &origin=* to your URL. http://stackoverflow.com/a/38921370

Isan Bothra

@isanbothra

still not working... @fortMaximus @SkyCoder01

Gulsvi

@gulsvi

@isanbothra Use the codepen settings to add external resources. Do not include <head> or <body> tags in your HTML in codepen.

Gulsvi

@gulsvi

@isanbothra It will work fine ^^

Brian

@BrianCodes33

trying to install bower via command line not working. any help appreciated

Isan Bothra

@isanbothra

i dont think so... tried bt nt working @SkyCoder01

Gulsvi

@gulsvi

@isanbothra Did you click "Run"? It seems to be working now

Isan Bothra

@isanbothra

yeah ..it got working now ? .. the problem was due to scrollspy class i was using in the body ... by the way thanxx for the solution... @SkyCoder01

CamperBot

@camperbot

isanbothra sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:

:cookie: 876 | @skycoder01 |http://www.freecodecamp.com/skycoder01

Gulsvi

@gulsvi

Glad you got it working!

Isan Bothra

@isanbothra

but why i hav to include jscript file .. can you explain..??

maxblanch

@maxblanch

Campers, when using CodePen to make projects, are you implementing bootstrap and jQuery within the settings of codePen or you link them in the html file with CDN ?

Is there a better way than the other ?

Isan Bothra

@isanbothra

it is because of bootstrap classes are using jquery?? or anything else??

Gulsvi

@gulsvi

@isanbothra It's a requirement from Bootstrap. They require that .js file for many of their components: https://v4-alpha.getbootstrap.com/getting-started/javascript/

https://v4-alpha.getbootstrap.com/components

Yes, their bootstrap JS file uses jQuery - so jQuery is also required

Isan Bothra

@isanbothra

thanxx for the explanation...

how to align contents of navbar to the right??

Moustapha

@moustaflo

@SkyCoder01 thanks!

CamperBot

@camperbot

:cookie: 877 | @skycoder01 |http://www.freecodecamp.com/skycoder01

moustaflo sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:

Isan Bothra

@isanbothra

how to align contents of navbar to the right??

Gulsvi

@gulsvi

@isanbothra Remove the mr-auto class from your <ul> element in your navbar.

gulptech

@gulptech

change your mr-auto to ml-auto

Gulsvi

@gulsvi

I don't think you need to specify an auto margin to make it align right

unless, you mean to use ml-auto on individual links for the mobile menu as well

  <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
   <ul class="navbar-nav">
     <li class="nav-item ml-auto">
       <a class="nav-link" href="#CONTACT">Contact</a>
     </li>
     <li class="nav-item ml-auto">
       <a class="nav-link" href="#PORTFOLIO">Portfolio</a>
     </li>
     <li class="nav-item ml-auto">
       <a class="nav-link" href="#ABOUT">About</a>
     </li>
   </ul>
  </div>

Isan Bothra

@isanbothra

yeah its working fine..

why to use ml-auto??

Gulsvi

@gulsvi

That's my question too :)

gulptech

@gulptech

margin-left auto

Gulsvi

@gulsvi

No need for it, in my opinion

gulptech

@gulptech

but it does not work without it

Gulsvi

@gulsvi

unless it's for menu items in the mobile menu

  <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
   <ul class="navbar-nav">
     <li class="nav-item">
         <a class="nav-link" href="#ABOUT">About</a>
     </li>
     <li class="nav-item">
       <a class="nav-link" href="#PORTFOLIO">Portfolio</a>
     </li>
     <li class="nav-item">
       <a class="nav-link" href="#CONTACT">Contact</a>
     </li>
   </ul>
  </div>

^^ This works fine for aligning navbar items to the right

Jorge

@flawedLogic506

Some text

Where communities thrive

People

Repo info

Activity