Placeholder Color Change in Bootstrap

See also questions close to this topic

• Javascript : Destroy tippy.js instance

  I have the following code which shows a tooltip containing dynamic data. Its working fine, But it shows same tooltip for all.

  const template = document.querySelector('#template')
  const initialText = template.textContent
  const tip = tippy('.otherPostTags', {
      animation: 'shift-toward',
      arrow: true,
      html: '#template',
      onShow() {
          const content = this.querySelector('.tippy-content')
          if (tip.loading || content.innerHTML !== initialText) return
          tip.loading = true
          node = document.querySelectorAll('[data-tippy]');
          let id = node[0].dataset.postid;
          $.ajax({
              url: '/get/post/'+id+'/tags',
              type: 'GET',
              success: function(res){
                  let preparedMarkup = '';
                  res.tags.map(function(item) {
                      preparedMarkup +=
                          '<span class="orange-tag" style="background-color: '+item.color+'">'+
                              item.name +
                          '</span>';
                  });
                  content.innerHTML = preparedMarkup;
                  tip.loading = false
              },
              error: function(error) {
                  console.log(error);
                  content.innerHTML = 'Loading failed';
                  tip.loading = false
              },
          });
      },
      onHidden() {
          const content = this.querySelector('.tippy-content');
          content.innerHTML = initialText;
      },
      popperOptions: {
          modifiers: {
              preventOverflow: {
                  enabled: false
              },
              hide: {
                  enabled: false
              }
          }
      }
  });
  

  I have used tip._tippy.destroy(); bit didn't worked. What am i missing here ?
• Responsiveness in Navigation bar

  So I've got this navbar that looks something like this.

  <nav class="navbar navbar-expand-lg border-bottom bg-white">
  
    <div class="collapse navbar-collapse d-flex justify-content-between" id="myNav">
      <div class="navbar-header navbar-left">
        <a href="https://placeholder.com"><img src="https://via.placeholder.com/200x100"></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#cdm_nav" aria-controls="myNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
        </button>
      </div>
  
      <ul class="navbar-nav">
        <li class="nav-item">
          <a href="#" class="nav-link">Link</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">Link</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">Link</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">Link</a>
        </li>
      </ul>
  
      <form class="form-inline"> 
        <div class="input-group">
          <div class="input-group-prepend dropdown">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
              <span>All</span>
            </button>
            <ul class="dropdown-menu" role="menu">
              <li class="dropdown-item">Category 1</li>
              <li class="dropdown-item">Category 1</li>
              <li class="dropdown-item">Category 1</li>
            </ul>
          </div>
  
          <div class="dropdown">
            <input type="text" class="form-control" data-toggle="dropdown">
            <ul id="suggestions" class="dropdown-menu" role="menu">
              <li class="dropdown-item">Keyword...</li>
            </ul>
          </div>
  
          <div class="input-group-append">
            <button class="btn btn-primary" type="submit"><i class="fa fa-search"></i>
  
            </button>
          </div>
        </div>
      </form>
      <ul class="nav nav-pills nav-fill nav-right">
        <li>Link</li>
        <li>Link</li>
      </ul>
    </div>
  </nav>
  

  https://codepen.io/arc-ranges/pen/RYqQrG

  Now, this is currently how it's supposed to be for large screens. However, on smaller screens, like 1280 px, it should have:

  • the nav-brand on the left side (float)
  • four links and search bar on a new row (bottom)
  • two links on the right side (float)

  Question: What is the best way to achieve this?

  I am thinking of using bootstrap grid system or hiding the entire nav and showing a different navbar using media queries.

  Image attached for 1280px screen.

  Any help would be greatly appreciated. Have a nice day!
• bootstrap container full width when small

  I have a bootstrap container that looks great on medium & larger. When small I want the container to be full width. I put mx-2 mx-md-auto clases on it, which causes it to left align nicely on small screens, but not go full width, because the container is normally a fixed width (510px). I don't want to modify the bootstrap container breakpoints, as I'd rather utilize responsive classes for this specific use of container. Anything I can do here?