- Trending Categories
- Data Structure
- Networking
- RDBMS
- Operating System
- Java
- MS Excel
- iOS
- HTML
- CSS
- Android
- Python
- C Programming
- C++
- C#
- MongoDB
- MySQL
- Javascript
- PHP
- Physics
- Chemistry
- Biology
- Mathematics
- English
- Economics
- Psychology
- Social Studies
- Fashion Studies
- Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Found 626 Articles for CSS Framework
2K+ Views
Use the .modal(“toggle”) method in Bootstrap to toggle the modal.As shown below, the modal generates on the click of a button −$(document).ready(function(){ $("#button1").click(function(){ $("#newModal").modal("toggle"); }); });Here is the button used above − Modal One You can try to run the following code to implement the modal(“toggle”) method −ExampleLive Demo Bootstrap Example Sample Modal One × Sample Modal Click outside to close it. Close $(document).ready(function(){ $("#button1").click(function(){ $("#newModal").modal("toggle"); }); });
232 Views
Use the .btn-outline-dark class in Bootstrap to set dark outline on a button.The following is an example of a button with dark outline −Set the above outline to the button, using the btn-outline-dark class as shown below − Submit You can try to run the following code to implement the btn-outline-dark class −ExampleLive Demo Bootstrap Example Bootstrap 4 Learning btn-outline-dark class usage: Submit
217 Views
Use the border-0 class in Bootstrap to eliminate all borders from an element as shown below − No border We have also set CSS style above −.mystyle { width: 120px; height: 100px; margin: 10px; background: gray; }You can try to run the following code to implement the border-0 class −ExmapleLive Demo Bootstrap Example .mystyle { width: 120px; height: 100px; margin: 10px; background: gray; } Two Rectangles orange border No border
78 Views
Use the border-white class in Bootstrap 4 to set white border to an element. This has white border The test class above styles the element as shown below − .test { width: 120px; height: 100px; margin: 10px; background: blue; } Let us see an example to implement the border-white class in Bootstrap −ExampleLive Demo Bootstrap Example .test { width: 120px; height: 100px; margin: 10px; background: blue; } Two Rectangles This has white border This has orange border
134 Views
To set orange border to an element, use the border-warning class − Danger (Orange border) Set the style for the element − .mystyle { width: 200px; height: 100px; margin: 10px; } Let us see an example to implement the border-warning class in Bootstrap −ExampleLive Demo Bootstrap Example .mystyle { width: 200px; height: 100px; margin: 10px; } The following are two Rectangles: Danger (Orange border)
214 Views
Use the border-top-0 class in Bootstrap 4 to remove the top border.Set the border-top-0 class − Rectangle is missing the TOP border. Let us see an example to implement the border-top-0 class −ExampleLive Demo Bootstrap Example .mystyle { width: 350px; height: 170px; margin: 10px; } Heading Two Rectangle is missing the TOP border.
312 Views
Use the .flex-*- column class in Bootstrap to show flex items vertically on different screen sizes:Set it vertically on small, medium, large, etc screen size. Let us see it on small and medium screen size:Small Screen SizeFlex on different screen size (Small) One Two Three Medium Screen SizeFlex on different screen size (Medium) One Two Three The following is an example implementing what I have shown above the usage of flex-*-column −ExampleLive Demo Bootstrap Example ... Read More
171 Views
To display flex items vertically, use the flex-column class in Bootstrap 4 −Now set the flex-items in it − One Two Three Four Five Let us see an example to learn how to learn how to display flex-column class − ExampleLive Demo Bootstrap Example Example of Flex Column Stating the usage of flex column class: One Two Three Four Five