Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Articles by Alex Onsman
Page 8 of 15
How to scroll to element in horizontal div using jQuery?
To scroll to element in horizontal div, use the scrollleft.ExampleYou can try to run the following code to learn how to scroll to element in jQuery: jQuery Scroll $(document).ready(function(){ document.addEventListener('DOMContentLoaded', function () { var frames = document.getElementById('frames'); frames.addEventListener('click', function (e) { if (e.target.classList.contains('item')) { e.target.parentNode.scrollLeft = e.target.offsetLeft; } }); }); }); .myclass { width: 300px; display: flex; position: relative; overflow-x: scroll; } .item { width: 400px; background: #FFB563; margin-right: 40px; } demo1 demo2 demo3 demo4 demo5 demo6 demo7 demo8
Read MoreHow to position horizontal scroll bar at center of DIV?
To position horizontal scroll bar at center of div, use the scrollleft. You can try to run the following code to position horizontal scroll bar in div.ExampleThe scroll bar is positioned at center of div: jQuery Scroll $(document).ready(function(){ $(document).ready(function(){ var outerContent = $('.demo'); var innerContent = $('.demo > div'); outerContent.scrollLeft( (innerContent.width() - outerContent.width()) / 2); }); }); html, body, div { margin:0; padding:0; } .demo { width:400px; overflow-x:scroll; } #viewContainer { height:120px; width:1000px; display:table; } .myclass { width:250px; height:100%; display:table-cell; border:2px solid blue; } Far left left center right Far right
Read MoreBootstrap 4 .flex-wrap class
Use the flex-wrap class in Bootstrap 4 to wrap flex items. The following is the code snippet to wrap the flex items − . .
Read MoreAlign an element with the baseline of the parent in Bootstrap 4
Use the align-baseline class in Bootstrap 4 to align an element with the baseline of the parent elment.Set the align-baselinec class like the following code snippet −Now add the content inside it − Demo Baseline You can try to run the following code to align an element with the parent’s baseline −Example Bootstrap Example Example This is demo text Demo Baseline
Read MoreAlign single rows of items from the start in Bootstrap 4
Use the .align-items-start in Bootstrap 4 to align single rows of items from the start.Set the align-items-start class −Add the flex items − Product 1 Product 2 Product 3 Implementing align-items-start class to align single rows of items −Example Bootstrap Example Align Flex Items on a single row Product 1 Product 2 Product 3 Product 4
Read MoreTurn an image into a Bootstrap 4 card background
Use the card-img-overlay class to turn an image into a card background.You need to first set the element and then use the card-img-overlay class as in the following code snippet − Avro Tutorial for Apache Avro Learn Let us see an example to learn how to turn an image into a Bootstrap card background −Example Bootstrap Example Apach - Tool for Hadoop Avro Tutorial for Apache Avro Learn
Read MoreBootstrap 4 .card-img-top class
Use the card-img-top class in Bootstrap to set the image at the top inside a card −After that add the card and card body − Swift 4 Learn Swift 4 Begin You can try to run the following code to implement the card-img-top class in Bootstrap 4 −Example Bootstrap Example SWIFT 4 Tutorial Video Tutorial on Switft 4 Swift 4 Learn Swift 4 Begin
Read MoreBootstrap 4 .border-white class
To set white border to an element, use the border-white class.Add white border − This has white border Above, I have also added a style to set the div element −.mystyle { width: 200px; height: 100px; margin: 10px; background: blue; }Let us see an eample to implement the border-white class in Bootstrap −Example Bootstrap Example .mystyle { width: 200px; height: 100px; margin: 10px; background: blue; } The following are two Rectangles: This has white border This has orange border
Read MoreAdd information with Bootstrap 4 card
To add information to a card in Bootstrap 4, use the bg-info class.Use the card class with the bg-info class:Add the card body after that using the card-body class − Demo Text You can try to run the following code to add information −Example Bootstrap Example Festival Celebration Reach till 5PM
Read MoreSet warning action with orange outlined Bootstrap 4 Button
Set orange outline for a Bootstrap 4 button, using the btn-outline-warning class and indicate warning action.The following includes the orange outline on a button − Rejected The class is added just as any other class added to any element in Bootstrap. For a Bootstrap button, I used the element.You can try to run the following code to implement the btn-outline-warning class −Example Bootstrap Example College Placements Selected Students Rejected Students Result Awaited List of selected and rejected students: Selected Rejected
Read More