Bulma responsive classes not applying

2022-01-19 16:40 mattavero imported from Stackoverflow

Any responsive classes I use like m-0-tablet are applying before their non-responsive counter parts in Bulma.

I'm also using gulp purge CSS if that helps.

1 answer

answered 2022-01-19 18:23 user517339
All you have to do is add cdn css bulma to make it work

See also questions close to this topic

Creating Sticky Navbar with Drop Down Menu HTML

I am creating a HTML web page which contains a sticky navbar with drop down menu. However, when I created one, the dropdown menu does not works in the sticky navbar and so goes vise versa. below is the screenshot of both the result of the two codes.

*image with dropdown menu but without sticky navbar

*image with sticky navbar but without dropdown menu

below is the code for "image with dropdown menu but without sticky navbar"

    <!DOCTYPE html>
    <html>
    <head>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-    awesome/4.7.0/css/font-awesome.min.css">
    <style>
    body {margin:0;font-family:Arial}

   .topnav {
    overflow: hidden;
    background-color: #333;
  }

  .topnav a {
    list-style-type: none;
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    position: sticky;
  }



  .active {
    background-color: #04AA6D;
    color: white;
  }

  .topnav .icon {
    display: none;
  }

  .dropdown {
    float: left;
    overflow: hidden;
  }

  .dropdown .dropbtn {
    font-size: 17px;    
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
  }

  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }

  .dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
  }

  .topnav a:hover, .dropdown:hover .dropbtn {
    background-color: #555;
    color: white;
  }

  .dropdown-content a:hover {
    background-color: #ddd;
    color: black;
  }

  .dropdown:hover .dropdown-content {
    display: block;
  }

  @media screen and (max-width: 600px) {
    .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
    .topnav a.icon {
      float: right;
      display: block;
    }
  }

  @media screen and (max-width: 600px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive .icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
    .topnav.responsive .dropdown {float: none;}
    .topnav.responsive .dropdown-content {position: relative;}
    .topnav.responsive .dropdown .dropbtn {
      display: block;
      width: 100%;
      text-align: left;
    }
  }
  </style>
  </head>
  <body>
        <div class="header">
        <h2>Scroll Down</h2>
    <p>Scroll down to see the sticky effect.</p>
  </div>

  <div class="topnav" id="myTopnav">
    <a href="#home" class="active">Home</a>
    <a href="#news">News</a>
    <a href="#contact">Contact</a>
    <div class="dropdown">
      <button class="dropbtn">Dropdown 
        <i class="fa fa-caret-down"></i>
      </button>
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div> 
    <a href="#about">About</a>
    <a href="javascript:void(0);" style="font-size:15px;" class="icon"     onclick="myFunction()">&#9776;</a>
  </div>

  <div style="padding-left:16px">
    <h2>Responsive Topnav with Dropdown</h2>
    <p>Resize the browser window to see how it works.</p>
    <p>Hover over the dropdown button to open the dropdown menu.</p>
  </div>

  <h3>Sticky Navigation Bar Example</h3>
  <p>The navbar will <strong>stick</strong> to the top when you reach its scroll position.</p>
  <p><strong>Note:</strong> Internet Explorer do not support sticky positioning and Safari         requires a -webkit- prefix.</p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>


  <script>
  function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
      x.className += " responsive";
    } else {
      x.className = "topnav";
    }
  }
  </script>

  </body>
  </html>

below is the code for "image with sticky navbar but without dropdown menu"

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-    awesome/4.7.0/css/font-awesome.min.css">
<style>


body {
  font-size: 20px;
}
body {margin:0;}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px 20px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}
    
/*======================================================================*/

body {
  background-color:white;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #38444d;
}

li {
  float: left;
}

li a, .dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
    
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1;}

.dropdown:hover .dropdown-content {
  display: block;
}


footer {
  text-align: center;
  padding: 3px;
  background-color: DarkSalmon;
  color: white;
}

</style>
</head>
<body>

<div class="header">
  <h2>Scroll Down</h2>
  <p>Scroll down to see the sticky effect.</p>
</div>

<ul>
  <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li class="dropdown">
      <a href="javascript:void(1)" class="dropbtn">Dropdown</a>
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </li>
</ul>

<h3>Sticky Navigation Bar Example</h3>
<p>The navbar will <strong>stick</strong> to the top when you reach its scroll position.</p>
<p><strong>Note:</strong> Internet Explorer do not support sticky positioning and Safari requires a -webkit- prefix.</p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>


<footer>
  <p>Author: Hege Refsnes<br>
  <a href="mailto:hege@example.com">hege@example.com</a></p>
</footer>


</body>
</html>

Please i need some help with this as i am new to html and css.

Javascript: Change element class if button has a certain value
```
        <div class="main-div main-div2"> 
          <button id="update-btn" class="btn update-btn"> 
              Up to date
          </button>
        </div>
```
I want to make it so if update-btn has a value of "Up to date", change the div class from "main-div main-div2" to "main-div main-div3". Otherwise, if it's any other value, change it to "main-div main-div2"

What kind of loop would be good for this Javascript function too if I want it to be checking constantly?

Thank you.

Boostrap vertical sizing with different style width and height

I am trying to set verticaly icon on profile photo card inside div to be in the middle in white box(div), but dont know why it doesnt works. When I use style="width: 300px; height: 300px; for div square I can center it on horizontaly, but not verticaly :/ Can someone explain me what I am doing wrong?

Anyway is there any way how to resize bootstrap icons except display-1???

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    
  <div class="container-sm offset-md">
        <h1 class="p-4 m-4">Nastavení profilu</h1>
        <div class="row">
            <div class="col">
                <div class="card p-4 m-4">
                    Osobní údaje
                    <input type="text" name="name" class="form-control" placeholder="Jméno">
                    <input type="text" name="surname" class="form-control" placeholder="Příjmení">
                    <input type="email" name="email" class="form-control" placeholder="E-Mail">
                    <input type="date" name="name" class="form-control">
                </div>
                
            </div>

            <div class="col-4">
                <div class="card p-4 m-4 bg-light">
                    Profilová fotografie
                    <div class=" square text-center border display-1 m-3 bg-white mx-auto">
                        <i class="bi bi-person-fill align-middle justify-content-center text-secondary"></i>
                    </div>

                    <input type="file" id="customFile" name="file" hidden="">
                        <div class="text-center">
                            <button class="btn btn-success" for="customFile">Nahrát</button>
                            <button type="button" class="btn btn-danger">Smazat</button>
                            
                            <p class="text-muted mt-3 mb-0">Poznámka: Minimální velikost 300px x 300px</p>
                        </div>
                </div>
                
            </div>
        </div>

        <div class="row">
            <div class="col">
                <div class="card p-4 m-4">
                    Změna hesla
                </div>
                
            </div>

            <div class="col">
                <div class="card p-4 m-4">
                    Zobrazit/skrýt podrobnosti
                </div>
            </div>
        </div>
    </div>

I would like the header logo and main visual to be aligned vertically

Prerequisites

The header logo and main visual are side by side.

Expected value

I want the header logo and main visual to be aligned vertically.I would like to do something like this URL.

Reproduction procedure

Run the code below.

body {
    height: 1295.83px;;
    width: 1263px;
    display: flex;
    justify-content: center;
}

.header__container {
    height: 17.83px;
    width: 1000px;
    font-size: 14px;
    font-family: Meiryo;
    margin: 60px 0px 0px;
    .header__logo {
        height: 17.83px;
        width: 160px;
    }
}

.container__main {
    height: 1295.83px;
    width: 1263px;
    main {
        height: 1118px;
        width: 1000px;
        .main__mainvisual {
            height: 400px;
            width: 1000px;
        }
    }
}

<!DOCTYPE html>
<html lang="ja">
<body>
    <header class="header__container">
        <img class="header__logo" src="image/logo.svg" alt="PHOTO BOOK">
    </header>
    <div class="container__main">
        <main>
            <img class="main__mainvisual" src="image/mainvisual.jpg" alt="メインビジュアル">
        </main>
    </div>
</body>
</html>

MUI/Icon makes everything dissapear

When I try to import and use a mui icon in react, it makes the whole div dissapear, and just the background image remain, i have installed: emotion/react, emotion/styled, mui/icons-material, mui/material, styled-components, mui/styled-engine-sc

        <div className="login">
        <h1>Login</h1>
        <div className="form">
            <EmailIcon className='icon'/>
            <input type="text" placeholder="Email"></input>
            <input type="password" placeholder='Password'></input>
        </div>
        <div className="buttons">
            <button id='login'>Login</button>
            <button id='register'>Register</button>
        </div>
    </div>
)

Media-queries not working on Sass project

I am working on a Sass project and everything worked properly, but media queries are not working. I tried adding them at the bottom of the document, adding in the chain of labels, having more specificity than the normal chain and nothing is working. Do you know what the problem could it be?

Here is what I did:

Breakpoints:

$mobile-breakpoint: 600px;
$laptop-breakpoint: 922px;

In this case is applying the media query even when the width is less than 922px:

img{
    height: 5vw;
    margin: 3vh 4vh 4.6vh 3vh;
    @media(min-width: $laptop-breakpoint){
        height: 4vw;
    }
}

The code after being coverted to CSS:

.main-header .header-logo-search a img {
  height: 5vw;
  margin: 3vh 4vh 4.6vh 3vh;
}
@media (min-width: 922px) {
  .main-header .header-logo-search a img {
    height: 4vw;
  }
}

In this case, it does not apply the media query:

input{
      @include search();
      width: 30vw;
      box-sizing: border-box;
      padding: 0 1.5vw;
      font-size: 1.2rem;
      background-color: $snow;
      border-radius: 5px 0 0 5px;
      @media(max-width: 600px){
      display: none;
}

The code after being coverted to CSS:

.main-header .header-logo-search form input {
  height: 3.5rem;
  line-height: 3.5rem;
  border: none;
  margin: auto 0;
  width: 30vw;
  box-sizing: border-box;
  padding: 0 1.5vw;
  font-size: 1.2rem;
  background-color: #FFF9FB;
  border-radius: 5px 0 0 5px;
}
@media (max-width: 600px) {
  .main-header .header-logo-search form input {
    display: none;
  }
}

Thanks in advance

How can I style a disabled file input button with Bulma?
Bulma has support for styling a file upload button. The following example has been taken from the official documentation for version 0.9.3:
```
<div class="file">
  <label class="file-label">
    <input class="file-input" type="file" name="resume">
    <span class="file-cta">
      <span class="file-icon">
        <i class="fas fa-upload"></i>
      </span>
      <span class="file-label">
        Choose a file…
      </span>
    </span>
  </label>
</div>
```
How can I style a disabled upload button? I tried putting a disabled attribute on the input element which avoids the file open dialog from being shown. The upload button still is styled like an active control, though.

No response from buttons in Angular app utilizing Bulma framework

I am making my first website using visual studio code with angular cli and the bulma framework. I am having trouble using buttons on the localhost in two areas of the website and I think they must be related. I have also uploaded the project onto my raspberry pi server and get the same issues as my localhost. Observation:

I can add "/contact" to end of localhost and it will direct me to the contact page.
when viewing the navbar on my phone after uploading project to raspberry pi server Home and Contact navbar items are shaded gray instead of white.

Issues:

noting happens when clicking submit button on contact page. (clicking should make an alert pop up).
nothing happens when clicking home or contact navbar button on header. (clicking should route user to home/contact page)

I have made a contact page (contact.component.ts) with a submit button. Also, I have made a navbar with "home" and "contact" located in header.component.ts. I have app-routing.modules.ts set up for this and have the routing injection set up in app.component.ts. I have routerlink set up in the header.component.ts as well. This is my first time using everything so I am not sure if my routing configuration is wrong or maybe settings on my browser? I am using chrome and have pop-ups allowed. I have gone through relevant sections on angular website and cannot find my error. Thank you for any guidance.

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { HomeComponent } from './home/home.component';
import { ContactComponent } from './contact/contact.component';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent,
    HomeComponent,
    ContactComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.components.ts:


@Component({
  selector: 'app-root',
  template: `
  <!-- header -->
  <app-header></app-header>
  
  <!-- routes get injected here -->
  <router-outlet></router-outlet>

  <!-- footer -->
  <app-footer></app-footer>
  `,
  styles: []
})
export class AppComponent {
  Title = 'Forrest';
}

app-routing.module.ts:

import { RouterModule, Routes } from '@angular/router';
import { ContactComponent } from './contact/contact.component';
import { HomeComponent } from './home/home.component';

const routes: Routes = [
  {
    path: '',
    component: HomeComponent
  },
  {
    path: 'contact',
    component: ContactComponent
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

header.component.ts:


@Component({
  selector: 'app-header',
  template: `
  <div class="navbar is-dark">
    <!-- logo -->
      <div class="navbar-brand">
        <a class="navbar-item">
          <img src="assets/img/website_logo.jpg">
        </a>
      </div>

    <!-- Menu -->
    <div clas="navbar-menu">
    <div class="navbar-end">
      <a class="navbar-item" routerlink="/">Home</a>
      <a class="navbar-item" routerlink="/contact">Contact</a>
    </div>
    </div>
  </div>
  `,
  styles: [
  ]
})
export class HeaderComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

contact.component.ts:


@Component({
  selector: 'app-contact',
  template: `
    <section class="hero is-primary is-bold">
      <div class="hero-body">
        <div class="container">
          <h1 class="title">Contact Me</h1>
        </div>
      </div>
    </section>

    <section class="section">
    <div class="container">

      <!-- Contact Form -->
      <form ng-submit="submitForm()" #contactForm="ngForm">

        <!-- Name -->
        <div class="field">
          <label class="label">Name</label>
          <input 
            type="text" 
            name="name" 
            class="input" 
            [(ngModel)]="name" 
            #nameInput="ngModel" 
            required>
          <div class="help is-error" *ngIf="nameInput.invalid && nameInput.touched">
            Your name is required.
          </div>
        </div>

        <!-- Email -->
        <div class="field">
          <label class="label">Email</label>
          <input 
            type="text" 
            name="email" 
            class="input" 
            [(ngModel)]="email" 
            #emailInput="ngModel" 
            required
            email>
          <div class="help is-error" *ngIf="emailInput.invalid && emailInput.touched">
            A valid email is required.
          </div>
        </div>

        <!-- Message -->
        <div class="field">
          <label class="label">Message</label>
          <textarea name="message" class="textarea" [(ngModel)]="message"></textarea>
        </div>

        <!-- Submit Button -->
        <button 
          type="submit" 
          class="button is-large is-warning"
          [disabled]="contactForm.invalid">
            Send
        </button>

      </form>

    </div>
    </section>
  `,
  styles: []
})
export class ContactComponent implements OnInit {
  name: string;
  email: string;
  message: string;

  constructor() {}

  ngOnInit(): void {}

  submitForm() {
    const message = `My name is ${this.name}. My email is ${this.email}. My message is ${this.message}`;
    alert(message);
  }
}

home.component.ts:


@Component({
  selector: 'app-home',
  template: `
<section class="hero is-primary is-bold is-fullheight">
  <div class="hero-body">
    <div class="container has-text-centered">

      <h1 class="title">Welcome!</h1>
    
    </div>
  </div>
</section>
  `,
  styles: [`
    .hero {
      background-image: url('/assets/img/Home_Background.jpg') !important;
      background-size: cover;
      background-position: center center;
    }
  `]
})
export class HomeComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

footer.component.ts:


@Component({
  selector: 'app-footer',
  template: `
  <!-- footer -->
  <footer class="foot">
  <div class="container content has-text-centered">
    <p>Made by Forrest, 2022</p>
  </div>
  </footer>
  `,
  styles: [
  ]
})
export class FooterComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

Bulma-toast: Identify node name in Javascript

I am using the css framework Bulma for my web project. Now I wanted to add the possiblity to show toasts on the page. For doing so, I am trying to add Bulma-Toast extension.

As you can see in the example below, the toast is displayed on the bottom right position as desired in the bulma-toast javascript code:

  <script>

bulmaToast.toast({
  message: 'Hello There' ,
  type: 'is-primary',
  duration: 100000,
  pauseOnHover: true,
  position: 'bottom-right',
  dismissible: true,
  appendTo: document.body
 })

</script>

(please use fullpage to see the overlapping of the toast and the footer)

However, this toast is overlapping the footer section of the page, which I want to prevent. I want to position the toast on the bottom-right corner of the main webpage, which is the <section class="section">...</section> area.

In the documentation of the bulma-toast extension it says, that there is a appendTo-command, which can be used to append the notification to another node:

appendTo: By default, the notification will be appended to document.body. Pass a different Node to have it appended else where in the DOM.

However, I do not know, how I have to adress the section-area here. I have guessed it might be something like document.body.section or document.section, but these are not working.

Can you give me some information on how I can identify the correct node name?

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
  <script src="https://unpkg.com/bulma-toast"></script>
 
</head>
<body>

<nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <a class="navbar-item" href="https://bulma.io">
      <img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
    </a>

    <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
    </a>
  </div>

  <div id="navbarBasicExample" class="navbar-menu">
    <div class="navbar-start">
      <a class="navbar-item">
        Home
      </a>

      <a class="navbar-item">
        Documentation
      </a>

      <div class="navbar-item has-dropdown is-hoverable">
        <a class="navbar-link">
          More
        </a>

        <div class="navbar-dropdown">
          <a class="navbar-item">
            About
          </a>
          <a class="navbar-item">
            Jobs
          </a>
          <a class="navbar-item">
            Contact
          </a>
          <hr class="navbar-divider">
          <a class="navbar-item">
            Report an issue
          </a>
        </div>
      </div>
    </div>

    <div class="navbar-end">
      <div class="navbar-item">
        <div class="buttons">
          <a class="button is-primary">
            <strong>Sign up</strong>
          </a>
          <a class="button is-light">
            Log in
          </a>
        </div>
      </div>
    </div>
  </div>
</nav>


<section class="section">
  <h1 class="title">Lorem ipsum</h1>
  <h2 class="subtitle">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.   

  </h2>

  <script>

bulmaToast.toast({
  message: 'Hello There' ,
  type: 'is-primary',
  duration: 100000,
  pauseOnHover: true,
  position: 'bottom-right',
  dismissible: true,
  appendTo: document.body.section
 })

</script>

</section>


<footer class="footer has-background-black">
  <div class="content has-text-centered">
    <p>
      <strong>Bulma</strong> by <a href="https://jgthms.com">Jeremy Thomas</a>. The source code is licensed
      <a href="http://opensource.org/licenses/mit-license.php">MIT</a>. The website content
      is licensed <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY NC SA 4.0</a>.
    </p>
  </div>
</footer>



 </body>
</html>