5-Advanced-Bootstrap-Techniques

Technique # 1

Set the Nav Bar to Open By Hovering

Only two things will need to be changed in order to achieve this goal.

First, add the following CSS rule to your stylesheet after loading Bootstrap’s CSS.

@media only screen and (min-width: 768px) {
  .dropdown:hover .dropdown-menu {
    display: block;
  }
}

Next, we need to add a quick line of JS code to change the dropdown links “On Click” behavior.

$('.dropdown-toggle').click(function(e) {
  if ($(document).width() > 768) {
    e.preventDefault();

    var url = $(this).attr('href');

    if (url !== '#') {
      window.location.href = url;
    }

  }
});

Technique # 2

Set responsive video embeds to maintain aspect ratio

Simply add the following code to your markup.

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="//www.youtube.com/embed/QOoxfVSXaoQ"> </iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
    <iframe class="embed-responsive-item" src="//www.youtube.com/embed/j1M5RPunrHQ"> </iframe>
</div>

Technique # 3

Hide Elements On Mobile

If you need to quickly hide an element only on an xs device, you can use the ```.hidden-xs class.```

In a similar fashion, you can use the.hidden-(breakpoint) classfor the rest of the breakpoints and use .hidden-lg,.hidden-md, and .hidden-sm.

Technique # 4

Extend Existing classes...don't override

Here’s the code that you would use to create a flat yellow button.

.btn-yellow {
  background: rgb(250, 255, 140);
  color: #574500;
  border: none;
  -moz-box-shadow: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
 /* !important tags aren't necessarily always bad */
}
.btn-yellow:hover, .btn-yellow:focus {
  background: rgb(252, 255, 179);
}
.btn-yellow:active {
  background: rgb(247, 255, 71);
}

Technique # 5

How to set colums to the same height

Here’s an example of the code you would use.

/* display this row with flex and use wrap (= respect columns' widths) */

.row-flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}

/* vertical spacing between columns */

[class*="col-"] {
  margin-bottom: 30px;
}

.content {
  height: 100%;
  padding: 20px 20px 10px;
  color: #fff;
}

For more useful articles or blogs visit our website:

https://www.mobitsolutions.com/blog

About Us:

web design agency uk | wordpress development london | wordpress development company in uk

https://www.mobitsolutions.com/website-design-development/

Video Tutorial:

https://www.youtube.com/watch?v=iJX0qP6ilTM