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 on Trending Technologies
Technical articles with clear explanations and examples
Bootstrap .card class
To create a card in Bootstrap, use the .card class and add card body as well − Basic card You can also set the Bootstrap card title and card footer using the card-title and card-title class respectively.The following is the code to create a Bootstrap card −Example Bootstrap Example Demo Card This is the body of the card.
Read MoreAnimate a striped progress bar in Bootstrap
To animate a striped progress bar, use the .active class with the .progress-bar class in Bootstrap.You can try to run the following code to animate a striped progress barExample Bootstrap Example Level The level of water in meters: 20%
Read MoreFloat an element to the left on different screens with Bootstrap
On different devices like small, medium, large, etc, if you want to float an element to the left, then use the float-*-left class.The following are the classes you can use −Small Devices: float-sm-left Medium Devices: float-md-left Large Devices: float-lg-leftLet us see an example to float an element to the left on different screens −Example Bootstrap Example Demo This text is on the left (on small screen). This text is on the left (on medium screen). This text is on the left (on large screen). This text is on the left (on extra large screen).
Read MoreBootstrap 4 .float-none class
If you want to remove float from an element, then Bootstrap 4 has a class called float-none.This removes the float − This text is on the left (float removed). Default is left. On setting the float-none class, the text moves on the left, which is laso the default alignment settings.You can try to run the following code to implement the float-none class −Example Bootstrap Example Demo This text is on the left (on small screen). ...
Read MoreRemove shadow of an element in Bootstrap 4
Use the .shadow-none class in Bootstrap to remove shadow.You can try to run the following code to remove an element’s shadow −Example Bootstrap Example Learning Learn Tutorials for free Play Quiz and check your knowledge
Read MoreFloat an element to the right on different screens with Bootstrap
Use the float-*-right class in Bootstrap to float an element to the right. Different screen size includes setting the float for small, medium, large and extra large sizes.Let us see how to float and element to the right on small and medium size screen size −Small Screen Size This text is on the right (on small screen). Medium Screen Size This text is on the right (on medium screen). Let us see how to place an element on the right on different screens −Example Bootstrap Example ...
Read MoreSet less important content with Bootstrap 4 card
To set less important stuff in Bootstrap, use the card class with the bg-secondary contextual class as shown below −Set the card body as well using the card-body class − Fitness Trackers Let us see how to set a card with less important content −Example Bootstrap Example Fitness Products Fitness Trackers Heart Rate Monitors
Read MoreHow to get last 2 characters from string in C# using Regex?
Set the string −string str = "Cookie and Session";Use the following Regex to get the last 2 characters from string −Regex.Match(str,@"(.{2})\s*$")The following is the code −Exampleusing System; using System.Text.RegularExpressions; public class Demo { public static void Main() { string str = "Cookie and Session"; Console.WriteLine(Regex.Match(str,@"(.{2})\s*$")); } }Outputon
Read MoreSet the width of an element to 25% in Bootstrap
To set the width of an element to 25%, use the .w-25 class in Bootstrap.You can try to run the following code to set element’s widthExample Bootstrap Example Set element width Normal width Width is 50% Width is 25%
Read MoreBootstrap 4 Button .btn-outline-secondary class
Use the btn-outline-seondary class to set a grey outline in Bootstrap 4 to show less important information.The following is the code to set Bootstrap button to add grey outline − More Let us see how to implement the btn-outline-secondary class −Example Bootstrap Example Tools The following are the tools: Online Compiler Image Editor Image Optimizer Whiteboard For more tools, click below: More
Read More