<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>
Category: CSS
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; }
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 […]
CSS Padding and Margin 4 Values and What happens if some of them are omitted
CSS Padding The CSS padding properties are used to generate space around an element’s content, inside of any defined borders.
How to override a CSS Property
The !important property in CSS is used to provide more weight (importance) than normal property. In CSS, the !important means that “this is important”, ignore all the subsequent rules, and apply !important rule and the !important keyword must be placed at the end of the line, immediately before the semicolon. In other words, it adds importance to […]
Imitating a blink tag with CSS3 animations
Chrome and Safari don’t support or even CSS’s text-decoration: blink;, but here is the solution for BLINK: <style type=”text/css”> .blink { animation: blink 1s steps(5, start) infinite; -webkit-animation: blink 1s steps(5, start) infinite; } @keyframes blink { to { visibility: hidden; } } @-webkit-keyframes blink { to { visibility: hidden; } } </style> This is […]