Let’s say we have 3 buttons and we want to show them on the same line: #outer { width:100%; text-align: center; } .inner { display: inline-block; } <div id=”outer”> <div class=”inner”><button type=”submit” class=”msgBtn” onClick=”return false;” >Save</button></div> <div class=”inner”><button type=”submit” class=”msgBtn2″ onClick=”return false;”>Publish</button></div> <div class=”inner”><button class=”msgBtnBack”>Back</button></div> </div>
<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>
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> […]
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; }
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 {}
::-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.
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; }
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 The CSS padding properties are used to generate space around an element’s content, inside of any defined borders.
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 […]
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 […]