Alert messages are useful for the websites every now and then. They might indicate some failed validation or notify a successful registration for the user. Either way, their appearance is an important aspect to work on. Bootstrap has many features for Alert Messages as well. It provides the developers some easy ways in which they … Read more
The Scrollspy can be used when you need to navigate to different sections of the same page. Thus, as you scroll, the links in the navigation bar are automatically updated. Bootstrap Basics Scrollspy The following code will help you understand the creation of Scrollspy.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!-- Scrollable area --> <body data-spy="scroll" data-target=".navbar" data-offset="50"> <!-- The navbar - The <a> elements are used to jump to a section in the scrollable area --> <nav class="navbar navbar-inverse navbar-fixed-top"> ... <ul class="nav navbar-nav"> <li><a href="#section1">Section 1</a></li> ... </ul> </nav> <!-- Section 1 --> <div id="section1"> <h1>Section 1</h1> <p>Observe that as you scroll this page the navigation bar will show some changes!</p> </div> ... </body> |
Let’s try to understand the above code: First thing we … Read more
Here we will discuss various ways in which Bootstrap can help the developers to make the tables look perfect on the web pages. Bootstrap table styles All Table styles are inherited in bootstrap4. using CSS classes we can create a simple, striped, bordered table. Can add the hover effect. easily include colors in rows and … Read more
Bootstrap float utility is very helpful in positioning the components properly on the web-page. But there are is an issue in this approach that needs to be addressed. Check out the code below to know about the same:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <html> <head> <style> div { border: 3px solid #4CAF50; padding: 5px; } .img1 { float: right; } </style> </head> <body> <p>Check this code in you browser and you will find a problem with the floats.</p> <div> <img class="img1" src="image.jpg" alt="example" width="170" height="170"> Sample text in the div. This is the second line. The line 3 comes next. And then comes the final line h </div> </body> </html> |
If you load this code on a browser, you can observer following points: A <div> is … Read more
Here we will study about how what Bootstrap 4 has in store for the image elements of your web pages. Bootstrap 4 images Shapes Using Bootstrap, the images can be rendered in the following three shapes: Rounded Corners: Circle Thumbnail Out of these three, the first two are not supported by IE8 or earlier versions … Read more
Bootstrap 5 Templet Example Bootstrap5 Container Example Bootstrap5 Fixed Container Example Bootstrap5 Fluid Container Example Bootstrap 5 Responsive Containers Bootstrap5 Grid Examples Bootstrap5 Basic Structure of Grid Example Bootstrap5 Responsive Columns Example Bootstrap5 Two Unequal Responsive Columns Bootstrap5 Typography, Display, Text, and Color Bootstrap5 Typography Example Bootstrap5 .h1 to .h6 classes Bootstrap5 Display Headings Examples … Read more
Bootstrap Badges Bootstrap Badges are useful in almost all kinds of different websites now. They are, basically, numerical indicators that help us show the number of items associated a specific link. For examples, a typical use of badges is to notify the number of unread messages in your inbox. A basic can be added by … Read more
The media objects (like images or videos) on the web page need to be aligned properly to stand out but not completely out of context. HTML and CSS have their own features to provide the required positioning to the media objects on the webpage. Bootstrap makes it much easier for the developers to align these … Read more
Here, we will check out the Containers, one of the most basic web page layouts employed by Bootstrap to design the web pages. But before we move into that, let us first understand what a layout is and how a typical layout is made to come to real-world page. Bootstrap Responsive Webpage Layout A webpage layout … Read more
The grid system in Bootstrap 4 is built using flexbox. It allows a maximum of 12 columns across the web page. In case you do not need to use all the 12 columns available, you can group individual columns to get wider columns for your usage. Due to the responsiveness of the grid system, the … Read more
