Placeholder Color Change in Bootstrap

2018-07-12 06:54 Faizan Butt imported from Stackoverflow

How can I change the Placeholder Color in Bootstrap?

The following code, which I tried, doesn't work.

input::-webkit-input-placeholder {
        color: red;
}

input:-moz-placeholder {
        color: red;
}

See also questions close to this topic

Change Bootstrap button group properties

I have a button group from Bootstrap :

<div class="btn-group btn-group-toggle" data-toggle="buttons">
            <label class="btn btn-secondary active">
              <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
            </label>
            <label class="btn btn-secondary">
              <input type="radio" name="options" id="option2" autocomplete="off"> Radio
            </label>
            <label class="btn btn-secondary">
              <input type="radio" name="options" id="option3" autocomplete="off"> Radio
            </label>
      </div>

Maybe its basic but, I am trying to change :

background color of selected/unselected
text - font/color

and nothing works. Like this one : Bootstrap 4: Buttongroup - change active color

JQUERY $(document).click vs $(document).ready

$(document).ready(function(e) {
  if ($('#sidebar').hasClass('active')) {
    $('#dismiss, .overlay').on('click', function() {
      $('#sidebar').removeClass('active');
      $('.overlay').removeClass('active');
    });
  } else {
    $('#sidebarCollapse').on('click', function() {
      $('#sidebar').addClass('active');
      $('.overlay').addClass('active');
      $('.collapse.in').toggleClass('in');
      $('a[aria-expanded=true]').attr('aria-expanded', 'false');
    });
  }
});

.fixed-top {
  z-index: 1 !important;
}

#sidebar {
  width: 250px;
  position: fixed;
  top: 0;
  left: -250px;
  height: 100vh;
  z-index: 999;
  background: #7386D5;
  color: #fff;
  transition: all 0.3s;
  overflow-y: hidden;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
}

#sidebar.active {
  left: 0;
}

#dismiss {
  width: 35px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  background: #7386D5;
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

#dismiss:hover {
  background: #fff;
  color: #7386D5;
}

.overlay {
  display: none;
  position: fixed;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  z-index: 998;
  opacity: 0;
  transition: all 0.5s ease-in-out;
}

.overlay.active {
  display: block;
  opacity: 1;
}

#sidebar .sidebar-header {
  padding: 0px;
  background: #6d7fcc;
  text-align: center;
}

#sidebar ul.components {
  padding: 20px 0;
  border-bottom: 1px solid #47748b;
}

#sidebar ul p {
  color: #fff;
  padding: 10px;
}

#sidebar ul li a {
  padding: 10px;
  font-size: 1.1em;
  display: block;
}

#sidebar ul li a:hover {
  color: #7386D5;
  background: #fff;
}

#sidebar ul li.active>a,
a[aria-expanded="true"] {
  color: #fff;
  background: #6d7fcc;
}

a[data-toggle="collapse"] {
  position: relative;
}

.dropdown-toggle::after {
  display: block;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}

ul ul a {
  font-size: 0.9em !important;
  padding-left: 30px !important;
  background: #6d7fcc;
}

ul ul ul a {
  font-size: 0.7em !important;
  padding-left: 40px !important;
  background: #6d7fcc;
}

ul.CTAs {
  padding: 20px;
}

ul.CTAs a {
  text-align: center;
  font-size: 0.9em !important;
  display: block;
  border-radius: 5px;
  margin-bottom: 5px;
}

a.download {
  background: #fff;
  color: #7386D5;
}

a.article,
a.article:hover {
  background: #6d7fcc !important;
  color: #fff !important;
}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />

<nav id="sidebar">
  <div class="sidebar-header">
    <div id="dismiss">
      <i class="fas fa-arrow-left"></i>
    </div>
  </div>
</nav>

<nav class="navbar navbar-expand-lg navbar-light fixed-top" style="background-color:#6d7fcc;">
  <div class="container-fluid">
    <button type="button" id="sidebarCollapse" class="btn btn-info">
      <i class="fas fa-align-left"></i>
      <span>Table Of Contents</span>
    </button>
  </div>
</nav>

<div class="overlay"></div>

with this $(document).ready(function (e){...});code, my button for opening the sidebar is working, but the dismiss button isn't?

but if changed it to $(document).click(function (e) {...});it works but i have to press the toggle button twice for the first time to open the sidebar. Why is that so?

and in addition, may ask for help to close the sidebar when clicking outside of it? I have this

$(document).click(function(e) {
    if ($('#sidebar').('active') && !$(e.target).is('#sidebar')) {
        $('#sidebar').removeClass('active');
        $('.overlay').removeClass('active');
    }
});

code but this doesn't do the trick.

Already edited the code. I've organized the imports of bootstrap files.

How to collapsed only first bootstrap panel?

I want to active only first bootstrap panel but when it loaded collapse/active all panel. Here is my code:

<?php                                                            
     $the_query = new WP_Query( array(
     'posts_per_page'=>-1,
     'post_type' => 'news-and-events',
     'order'   => 'ASC',
     'category_name'     => 'news-events',
     'paged' => get_query_var('paged') ? get_query_var('paged') : 1) ); 
?>  

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

<?php 
     $i = 1;
     while ($the_query -> have_posts()) : $the_query -> the_post(); 
 ?>

<div class="panel panel-default">
  <div class="panel-heading silva-news-panel" role="tab" id="headingOne">
    <h4 class="panel-title">
      <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-<?php echo $i;?>" aria-expanded="true" aria-controls="collapseOne">
        <?php the_title(); ?>
      </a>
    </h4>
  </div>
<div id="collapse-<?php echo $i;?>" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body nws-body">
    <h3><i class="fa fa-newspaper-o" aria-hidden="true"></i> <?php echo get_the_date(); ?></h3>
    <div class="nws-body-img">
      <?php the_post_thumbnail();?>
    </div>
    <?php the_field('news_description'); ?>
</div>
</div>
    </div>
  <?php
         $i++;
         endwhile;
  ?>

Here Class panel-collapse collapse in in is collapsed.When I loaded the page in active all panel. I want to collapsed only first panel. Other will be inactive.

Related questions

Placeholder Color Change in Bootstrap

See also questions close to this topic