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
Lia-Sue-Kim
@Lia-Sue-Kim
with flexbox
  1. horizontally = justify-content: center;
  2. vertically = align-items: center;
Stevegolden12
@Stevegolden12
@bradley1492 @Lia-Sue-Kim In bootstrap 4 the classes would be: justify-content-center and align-items-center.
Hope that helps.
Mandeep Sharma
@mandeephub
hello

@Stevegolden12 https://codepen.io/mandeep4243/pen/pQYRzw

i m willing to bring that add note button in line with input box can u pls see to that
Thanks in advance

Claudio Restifo
@Marmiz

@mandeephub if you head over navbar docs you see that they reccomend working with spacing and flex utilities to create a layout. That's because navbar has a more "strict" markup due to its intended "limited" usage.

In the example you see they use a form-inline element as a direct child of nav (not a container-fluid).

My suggestion is, if you want to keep the container-fluid / row system inside the navbar is to use auto layout columns

Mandeep Sharma
@mandeephub
@Marmiz thanks for that i have updated that now y its going down on xs
Claudio Restifo
@Marmiz
@mandeephub I suggest you keeping a documentation page open, and read it often., there's no xs breakpoint in BS 4
grid options
Mandeep Sharma
@mandeephub
ok ill see to it thanks for help
Claudio Restifo
@Marmiz
the same can be applied to col-sm-11 col-md-11 The md is redundant. :)
:+1:
Christopher
@bradley1492
@Stevegolden12 @Lia-Sue-Kim @matrixersp Thanks a lot guys for your help.
This is what I was looking for, now it works :) :
https://codepen.io/bradley1492/pen/VVRdvQ?editors=1100
Christopher
@bradley1492

Altough I have now another sort of implied question.
In this pen, is the reason for my logo not centering horizontally in responsive view, altough I have declared the flex, justify-content and align items properties in the css specificity?

https://codepen.io/bradley1492/pen/NEJzbQ?editors=1100

BrianWilliams28
@BrianWilliams28
can someone tell me why NaN is evaluating as true in this function? it's supposed to return false
function isTrue (value){
 switch (value) {
   case "":
   case null:
   case NaN:
   case 0:
   case undefined:
   case false:
     return false;


   default:
     return true;
 } 
 }
isTrue([false, null, 0, NaN, undefined, ""]);
Christopher McCormack
@cmccormack
I don't believe you can actually test NaN against itself
> NaN === NaN
false
> NaN == NaN
false

better to use something like

> isNaN(NaN)
true

or

> Boolean(NaN)
false
BrianWilliams28
@BrianWilliams28
@cmccormack thanks, i came across isNaN() shortly after i posted this, still having trouble solving this problem but i'm closer now at least
@cmccormack Boolean(NaN) worked for this problem actually, thanks :)
Christopher McCormack
@cmccormack
@BrianWilliams28 :thumbsup: np
BrianWilliams28
@BrianWilliams28
can anyone recommend a good place to learn about javascript animations?
vanilla JS, not jquery
Brad
@bradtaniguchi
@BrianWilliams28 Maybe look at MDN? Good place to start at least.
muhidav
@muhidav
hello
i would love to know how we can use the reduce the size of an html element with using px only . and not using css
Jim Montgomery
@jimmielemontgomery
What's the expected behavior when making multiple fetch requests for the same resource? Does fetch return a representation of the same request or make multiple independent requests, returning a promise for each? eg Promise.all[fetch('/'),fetch('/'),fetch('/')]).then(console.log) appears to make multiple requests when I use the devtools and have disable-caching OFF, which has me a little confused. What is the appropriate way to address this--ie when the non-POST responses are expected to look the same (and the request is the same)?
Brad
@bradtaniguchi
@jimmielemontgomery AFAIK fetch will make the same request over and over, however many times its called. The browser potentially caching the request is a totally different store/level of abstraction. Now I ask what do you want to happen exactly?
Norvin Burrus
@ndburrus
@BrianWilliams28 this may be helpful :sparkles:
Stevegolden12
@Stevegolden12
@muhidav you can use width: 100px to reduce the size. The issue is since px is a static value it is not very responsive. Which means you would need a lot of media queries to have it look good at every size monitor. Most people will use a relative unit like % or vw/vh.
@bradley1492 Glad you got it working!
Stevegolden12
@Stevegolden12
@bradley1492 So Christopher, I would add a wrapper span around the image. on medium breakpoint (776px) make the span a block/width: 100% if needed to push the right nav to the next line. Align-text: center on the image should center itself. Hope that helps.
BrianWilliams28
@BrianWilliams28
@ndburrus thank you
Norvin Burrus
@ndburrus
@BrianWilliams28 you're welcome! enjoy, happy coding :sparkles:
Christopher
@bradley1492
@Stevegolden12 Thanks for your tips once more. This brought me on the right direction. :)
Does anyone know why my fontawesome barsicon gets a funny look with a fourth weird line at the bottom as soon as I activate display:flex;?
https://codepen.io/bradley1492/pen/JeqJam?editors=1100
Lucci Paula
@luccipaula
@bradley1492 Add text-decoration: none; to burger-nav :)
It's the default underline on a link
Christopher
@bradley1492
@luccipaula manyyy thanks, I had absolutely no idea what was going on hahaha
Lucci Paula
@luccipaula
@bradley1492 No problem!
angelacabri
@angelacabri
someone review my code thanks u
Stevegolden12
@Stevegolden12
@angelacabri Hello Angel. If you post a link there might be people here that can help you with it.
Christopher
@bradley1492

Good evening, I have another bootstrap question.

In responsive view mode I would like to center my logo.
Now it is on the right side because I used the align-items-endclass on the navbar class.

So my question is, and I think this has been sort of answered by @Stevegolden12 but why can't I declare d-flex justify-content-end on the navbar-brandclass?

https://codepen.io/bradley1492/pen/pQMVBa?editors=1100

Thanks for the help.

Corey Lewis
@cursiv3
you could just use flex without bootstrap with
.parent {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}
Victor Popescu
@VicPopescu
@cursiv3 bootstrap already has those classes
Vairus
@Vairus
Hello everyone!
Christopher
@bradley1492

Hello @cursiv3 thanks for your reply.
But wouldn't this equal this example I built, I am giving the navbar-brand, wich is a parent of the imgelement the display: flex;property.

But still my logo doesn't center in responsive mode.

I hope it's clear, that I want my navbar to be right aligned in responsive as in fullscreen mode.

Here's the example:
https://codepen.io/bradley1492/pen/pQMVBa?editors=1100

Christopher
@bradley1492

I may try and formulate the same question on a more theoretic approach.

If a flex container arranges five flex-items, how would I arrange flex-item number three differently, if I want all the others to be arranged by the parent flex-container?

I hope the question is somewhat clear :)

ehutchllew
@ehutchllew
@bradley1492 align-self
Christopher
@bradley1492
@ehutchllew many thanks, this second I stumbled upon it. I just need to read css-tricks more carefully. :)
Stevegolden12
@Stevegolden12
@bradley1492 Hello Christopher. When you mean responsive mode you mean mobile/small size screens? If you looking to center the image. Go to the navbar class (div below container-fluid class)and change the align-items-end to align-items-center. Hope this helps.
@cursiv3 Yes Corey you can use CSS with or without bootstrap. From what I see most sites seem to add additional CSS to bootstrap to customize the layout.