These are chat archives for twbs/bootstrap

27th
Apr 2018
Dhaval Vira
@dhavalveera
Apr 27 00:49
Hello
bifunctor
@bifunctor
Apr 27 06:14
Hi all
Is there a class for view height in bootstrap?
matrixbot
@matrixbot
Apr 27 06:17
simbon I guess there's no such class. And I think JavaScript is more comfortable to implement the function
simbon But I'm not a expert. I just guess...
bifunctor
@bifunctor
Apr 27 09:08
What is aria-*good for in bootstrap?
For example:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
what is the meaning of aria-*? Do I need it?
matrixbot
@matrixbot
Apr 27 09:19
simbon It's new features in HTML5. If you delete them, you can't show your element by clicking the button.
simbon You can try to delete it and see the result
bifunctor
@bifunctor
Apr 27 09:30
what is simbon?
@matrixbot it is not only for people with disabilities?
matrixbot
@matrixbot
Apr 27 09:32
simbon What do you mean... I can't understand your words...
bifunctor
@bifunctor
Apr 27 09:32
the word before you write something
simbon
Can you see it?
matrixbot
@matrixbot
Apr 27 09:33
simbon I join this chatroom from Riot
bifunctor
@bifunctor
Apr 27 09:33
Screenshot from 2018-04-27 11-33-18.png
what is Riot?
matrixbot
@matrixbot
Apr 27 09:34
simbon It's a matrix client
bifunctor
@bifunctor
Apr 27 09:34
aha ok
matrixbot
@matrixbot
Apr 27 09:34
simbon Can join the chatroom on Gitter
simbon MatrixRobot is used to resend my message from M]atrix to Gitter
bifunctor
@bifunctor
Apr 27 09:35
so when I delete aria-* I can't use anymore button right?
But it is not only for people with disabilities?
matrixbot
@matrixbot
Apr 27 09:36
simbon No, you can use button also, but you can't use it to collapse your element of which id is navbarSupportedContent
simbon Your code is aimed to collapse an element by clicking the button, right?
bifunctor
@bifunctor
Apr 27 09:39
just want to figure out, if aria-* is important
I have to try it
thanks a lot
matrixbot
@matrixbot
Apr 27 09:42
simbon Yeah, I've seen the content. navbar-toggler is used to expand navigator when the width of window is too little. Such as on mobile phone, it will automatically collapse the navigator
simbon I'll show you a snapshot
simbon posted an image: image.png
simbon Is there a button showed three lines? If you click it, the navigator will show
bifunctor
@bifunctor
Apr 27 09:46
I create an example:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <title>Bootstrap</title>
</head>
<body>

<nav class="navbar navbar-dark bg-dark navbar-expand-sm">
  <div class="container">

    <a href="#" class="navbar-brand">Wisdom Pet Medicine</a>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent"">
      <a class="nav-item nav-link active" href="#">Home</a>
      <a class="nav-item nav-link" href="#">Mission</a>
      <a class="nav-item nav-link" href="#">Services</a>
      <a class="nav-item nav-link" href="#">Staff</a>
      <a class="nav-item nav-link" href="#">Testimonials</a>
    </div><!-- navbar -->

  </div><!-- container -->
</nav><!-- nav -->

<div class="container">
  <div class="row">
    <section class="col-12">

<h2>Our Mission</h2>

<p>Wisdom Pet Medicine strives to blend the best in traditional and alternative medicine in the diagnosis and treatment of companion animals including dogs, cats, birds, reptiles, rodents, and fish. We apply the wisdom garnered in the centuries old tradition of veterinary medicine, to find the safest treatments and cures.</p>

<p>We strive to be your pet's medical experts from youth through the senior years. We build preventative health care plans for each and every one of our patients, based on breed, age, and sex, so that your pet receives the most appropriate care at crucial milestones. We want to give your pet a long and healthy life.</p>

<h2>Exotic Pets</h2>
<p>We offer specialized care for reptiles, rodents, birds, and other exotic pets.</p>

<h2>Services</h2>

<h3>Grooming</h3>
<p>Our therapeutic grooming treatments help battle fleas, allergic dermatitis, and other challenging skin conditions.</p>

<h3>General Health</h3>
<p>Wellness and senior exams, ultrasound, x-ray, and dental cleanings are just a few of our general health services.</p>

<h3>Nutrition</h3>
<p>Let our nutrition experts review your pet's diet and prescribe a custom nutrition plan for optimum health and disease prevention.</p>

<h3>Pest Control</h3>
<p>We offer the latest advances in safe and effective prevention and treatment of fleas, ticks, worms, heart worm, and other parasites.</p>

<h3>Vaccinations</h3>
<p>Our veterinarians are experienced in modern vaccination protocols that prevent many of the deadliest diseases in pets.</p>

<h2>Our Staff</h2>
Our Staff

<h3>Dr. Winthrop</h3>
<p>Dr. Winthrop is the guardian of Missy, a three-year old Llaso mix, who he adopted at the shelter. Dr. Winthrop is passionate about spay and neuter and pet adoption, and works tireless hours outside the clinic, performing free spay and neuter surgeries for the shelter.</p>

<h3>Dr. Chase</h3>
<p>Dr. Chase spends much of her free time helping the local rescue organization find homes for animals, such as Kibbles - a Maine Coon Cat who is part of the large Chase household, including two dogs, three cats, and a turtle.</p>

<h3>Dr Sanders</h3>
<p>Leroy walked into Dr. Sanders front door when he was moving into a new house. After searching for weeks for Leroy's guardians, he decided to make Leroy a part of his pet family, and now has three cats.</p>

    </section>
  </div><!-- row -->
</div><!-- content container -->

<script src="js/jquery.slim.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
When I delete aria-controls="navbarSupportedContent"is still working
It seems to be, I do not need aria-*
Why?
matrixbot
@matrixbot
Apr 27 09:48
simbon If you don't delete them, minimize the width of your browser window, navigator will be collapsed and you'll see the three lines button
simbon If you delete them, minimize the width of your browser window, navigator won't be collapsed
bifunctor
@bifunctor
Apr 27 09:50
I delete it like:
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
      <span class="navbar-toggler-icon"></span>
    </button>
as you can see nowhere aria-*
Screenshot from 2018-04-27 11-51-12.png
and still working.
matrixbot
@matrixbot
Apr 27 09:52
simbon Click the button
bifunctor
@bifunctor
Apr 27 09:52
it works
Screenshot from 2018-04-27 11-53-09.png
matrixbot
@matrixbot
Apr 27 09:53
simbon Please let me save your code in my computer, I will try
bifunctor
@bifunctor
Apr 27 09:53
ok
matrixbot
@matrixbot
Apr 27 09:59
simbon Curiously, I replaced your css and js with cdn, it doesn't show the same theme.
bifunctor
@bifunctor
Apr 27 10:01
wait I have to try
matrixbot
@matrixbot
Apr 27 10:02
simbon Oh, sorry... I used Bootstrap3
bifunctor
@bifunctor
Apr 27 10:02
It is exactly the same them
aha ok
matrixbot
@matrixbot
Apr 27 10:06
simbon I'm sorry about. aria- is only for people with disabilities, data- support the function to collapse.
simbon I confused, very sorry
bifunctor
@bifunctor
Apr 27 10:07
no problem
I do not need it right?
matrixbot
@matrixbot
Apr 27 10:08
simbon Yeah, if it's not a very formal website
bifunctor
@bifunctor
Apr 27 10:09
ok
matrixbot
@matrixbot
Apr 27 10:09
simbon Otherwise, supporting functions for people with disabilities is also a good behavior
bifunctor
@bifunctor
Apr 27 10:09
thanks a lot
yes
I will do it.
matrixbot
@matrixbot
Apr 27 10:10
simbon No, I haven't help you, I'm very sorry about my confusion
bifunctor
@bifunctor
Apr 27 10:10
Just wondering, if it is influence the code
But you tried
It means help for me :-)
matrixbot
@matrixbot
Apr 27 10:11
simbon And thanks alot, too. You let me noticed my fault
KattWolf
@KattWolf
Apr 27 20:13
Hi, does anyone know how to make this nav bar in bootstrap?
Untitled-1.jpg
testmmpp123
@testmmpp123
Apr 27 20:29
Hi, I have a question about overwrite font-size, padding etc when I use Bootstrap 4.
It use rem as default, so when I eg want to change <h1> to 72px, should I write just h1 {72px} or I must eg combinated with rem like h1 {4.5rem} (if assume that 1rem=16px), or something different? And what about padding, margin etc?
Classycal
@Classycal
Apr 27 22:05
can someone help me, i just made a jumbotron, but when i try write a paragraph underneath, nothing shows up on the actual page itself, does anyone know why, is it bootstrap overwriting something?