Bootstrap Tutorial, Boostrap questions and answers

Bootstrap 4 Accordion

November 11, 2018 No Comments

Below codes are used to implementing Accordion tab using Bootstrap 4.1 version.


<html>
<head>
	<!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<!-- Bootstrap CSS -->
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="accordion" id="accordion">
  <div class="card">
    <div class="card-header" id="headingOne">
	<a class="collapsed card-link" data-toggle="collapse" href="#collapseOne">
		Tab #1
	</a>
    </div>

    <div id="collapseOne" class="collapse show" data-parent="#accordion">
      <div class="card-body">
		Tab 1 Content
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
	<a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo">
		Tab #2 
	</a>
    </div>
    <div id="collapseTwo" class="collapse" data-parent="#accordion">
      <div class="card-body">
		Tab 2 Content
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
	<a class="collapsed card-link" data-toggle="collapse" href="#collapseThree">
		Tab #3
	</a>
    </div>
    <div id="collapseThree" class="collapse" data-parent="#accordion">
      <div class="card-body">
			Tab 3 Content
      </div>
    </div>
  </div>
</div>
</div>
	<!-- Script section -->
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>

Bootstrap, CSS / CSS3

How to Prevent bootstrap modal closing when clicking outside?

September 4, 2017 No Comments

Prevent Bootstrap Modal from Closing when Clicking Outside by using CSS

By expanding the .modal-dialog class dimensions to full window, we can avoid the outside click closing issue.

CSS


.modal {
    background-color: rgba(0,0,0,0.5);
}
.modal-dialog{
    width: 100%;
    height: 100vh;
    margin: 0 !important;
}
.modal-content {
    box-shadow: none !important;
    border-radius: 0 !important;
    margin: auto;
    top: 15%;
}
@media (min-width: 600px){
.modal-content {
    width: 700px;
}
}

Demo

See the Pen Prevent the Bootstrap Modal Closing when Clicking Outside the modal by Vinothkumar Rajendran (@fedtutorial) on CodePen.0

Bootstrap, Jquery

Full screen bootstrap carousel slider using Jquery

June 1, 2017 No Comments

Create a full page bootstrap carousel

We can develop a full screen bootstrap carousel or slider by using below scripts.

Demo

See the Pen Full screen bootstrap carousel slider by Vinothkumar Rajendran (@fedtutorial) on CodePen.0

Include bootstrap library files and jquery library. After that use the below script to achieve full page carousel.


/* full page carousel */
$(document).ready(function () {
$('.carousel').carousel({
	pause: "false"
});
$('.carousel').css({ 'margin': 0, 'width': $(window).outerWidth(), 'height': $(window).outerHeight() });
//$('.carousel-inner').css({'z-index': 0});
$('.carousel .item').css({ 'position': 'fixed', 'width': '100%', 'height': '100%' });
$('.carousel-inner div.itemimg').each(function () {
	varimgSrc = $(this).attr('src');
	$(this).parent().css({ 'background': 'url(' + imgSrc + ') center center no-repeat', '-webkit-background-size': '100% ', '-moz-background-size': '100%', '-o-background-size': '100%', 'background-size': '100%', '-webkit-background-size': 'cover', '-moz-background-size': 'cover', '-o-background-size': 'cover', 'background-size': 'cover' });
	$(this).remove();
});
$(window).on('resize', function () {
	$('.carousel').css({ 'width': $(window).outerWidth(), 'height': $(window).outerHeight() });
});
});

Bootstrap, CSS / CSS3, Jquery

How to change the background color of odd and even rows?

May 18, 2017 No Comments

Change the background color for odd and event rows using Jquery

‘Odd’ and ‘even’ pseudo classes are used to selecting the odd and even number of row.

Script:


  $(function(){
   $('table tr:even').addClass('even');
    $('table tr:odd').addClass('odd');
});

Explanation:

By using odd and even classes we can set the required background color using CSS.

Demo

See the Pen Change the background color of add and event table rows by Vinothkumar Rajendran (@fedtutorial) on CodePen.0