<div class=”card-header container-fluid”> <div class=”col-md-10″><h3>Your Header Title</h3></div> <div class=”col-md-2 float-right”>The content you want to add to the right side.</div> </div>
Tag: div
How to align inconsistently sized logos with CSS
These 3 lines will save you (fit, line up, remove background): aspect-ratio: 3/2; object-fit: contain; mix-blend-mode:color-burn; Let’s see how you can use that: In the body section, we have a div with the “photoDiv” class. <div class=”photoDiv”> <img src=”1.png”> <img src=”2.png”> <img src=”3.png”> <img src=”4.png”> <img src=”5.png”> </div> And here is the magical CSS: <style> […]
How to disable mouse actions for a specific div with CSS
Let’s say you have a div with id “myDiv” <div id=”myDiv”> <input type=”text” value=”value” /> <br /> <textarea>value</textarea> </div> If you want to disable all the mouse actions in that div only then you can use this in your CSS file: #myDiv { pointer-events: none; }
How to apply two classes to a single element in CSS
Let’s say you want to use 2 or more classes for a div. Then you should use these classes inside the class attribute, separated by whitespace: <div class=”myFirstClass mySecondClass”></div> To target elements that contain all of the specified classes, use this CSS selector (no space) in your CSS file: .myFirstClass.mySecondClass {}
How to change the style of scrollbar with CSS
::-webkit-scrollbar { width: 12px; } ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; } ::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); } You can get more detail from here.
How to add scroll bar to div in Asp.Net
Let’s say we have div in view <div id=”myDiv” class=”div-with-scrollbar”> </div> With this CSS file, you can add a scrollbar .div-with-scrollbar { overflow-y: scroll; width: 100%; height: 500px; }
Search text through Divs in Javascript
<table align=”center” width=”20%”> <tr> <td style=”padding-right: 10px”> <input type=”text” id=”Search” onkeyup=”myFunction()” placeholder=”Please enter a search term..” title=”Type in a name”> </td> </tr> </table> <br> <div class=”target”> This is my DIV element. </div> <div class=”target”> This is another Div element. </div> <div class=”target”> Can you find me? </div> <script> function myFunction() { var input = document.getElementById(“Search”); […]
Hide element in CSS with Display and Visibility
visibility: hidden (Hide but keep the space) <div stlye=”visibility: hidden;”>The Components We want to Hide</div> By default, the value of the visibility property is visible. However, if you want to make an image invisible, you can set the value of visibility to hidden. display: none (Hide and remove the space) <div stlye=”display: none;”>The Components We want to Hide</div> The display […]
How to auto-scroll or manually to end of div when data is added
Auto-Scroll (every 5 seconds) window.setInterval(function() { var element = document.getElementById(“myDiv”); element.scrollTop = element.scrollHeight; }, 5000);
How to refresh a DIV content with Javascript
To reload a section of the page, you could use jquerys load with the current url and specify the fragment you need, which would be the same element that load is called on, in our below case #myDivId function updateDivContent() { $(“#myDivId”).load(window.location.href + ” #myDivId” ); }
Navigate to a Div using a button in HTML
The Div: <div id=”DivToNavigate”> The content goes here… </div>