Bootstrap pre tag styling

George John
Published on 18-Jun-2018 12:07:39
If the code needs to be displayed as a standalone block element or if it has multiple lines, then you should use the <pre> tag.You can try to run the following code to implement the pre tag for code:ExampleLive Demo<!DOCTYPE html> <html>    <head>       <title>Bootstrap Example</title>   ... Read More

Make Unordered list with Bootstrap

Ankith Reddy
Published on 18-Jun-2018 11:48:08
For unordered list in Bootstrap, you can try to run the following code:ExampleLive Demo<!DOCTYPE html> <html>    <head>       <title>Bootstrap lists</title>       <meta name = "viewport" content = "width=device-width, initial-scale = 1">       <link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">       <script ... Read More

Bootstrap code tag styling

Arjun Thakur
Published on 18-Jun-2018 11:41:16
Using Bootstrap, you can easily display code with <code> and <pre> tag.The <code> tag displays code wrapped as an inline element.To display code with the <code> tag, you can try to run the following code:<p>    <code>&lt;header&gt;</code> is wrapped as an inline element. </p> Read More

list-inline class in Bootstrap

Chandu yadav
Published on 18-Jun-2018 11:34:09
You can try to run the following code to implement the list-inline class in BootstrapLive Demo<!DOCTYPE html> <html>    <head>       <title>Bootstrap lists</title>       <meta name = "viewport" content = "width = device-width, initial-scale = 1">       <link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"> ... Read More

list-unstyled class in Bootstrap

Arjun Thakur
Published on 14-Jun-2018 12:44:41
For unstyled list in Bootstrap, use the list-unstyled class.You can try to run the following code to implement the list-unstyled class:<!DOCTYPE html> <html>    <head>       <title>Bootstrap lists</title>       <meta name="viewport" content="width=device-width, initial-scale=1">       <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">       <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>     ... Read More

Make Definition list with Bootstrap

Ankith Reddy
Published on 14-Jun-2018 12:38:54
For definition list in Bootstrap, you can try to run the following code:<!DOCTYPE html> <html>    <head>       <title>Bootstrap lists</title>       <meta name="viewport" content="width=device-width, initial-scale=1">       <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">       <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>       <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>    </head>    <body>   ... Read More

Bootstrap Grids

Chandu yadav
Published on 14-Jun-2018 12:33:33
Grid structure content and helps in designing it perfectly. Grid systems are used for creating page layouts through a series of rows and columns that house your content.Here's how the Bootstrap grid system works:Rows must be placed within a .container class for proper alignment and padding.Use rows to create horizontal ... Read More

Make an Ordered list with Bootstrap

George John
Published on 14-Jun-2018 12:29:10
For ordered list in Bootstrap, you can try to run the following code:<!DOCTYPE html> <html>    <head>       <title>Bootstrap lists</title>       <meta name = "viewport" content = "width=device-width, initial-scale = 1">       <link rel = "stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">       <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> ... Read More

Create Inverted Navbar in Bootstrap

George John
Published on 14-Jun-2018 11:55:58
To create an inverted navbar with a black background and with white text, simply add the .navbar-inverse class to the .navbar class.<!DOCTYPE html> <html>    <head>       <title>Bootstrap Example</title>       <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">       <script src="/scripts/jquery.min.js"></script>       <script src="/bootstrap/js/bootstrap.min.js"></script>    </head>   ... Read More

Bootstrap pull-right class

Arjun Thakur
Published on 14-Jun-2018 11:44:23
Use the default <blockquote> around any HTML text. You can also add a <small> tag for identifying the source of the quote and right aligning the blockquote using class .pull-right:<!DOCTYPE html> <html>    <head>       <title>Bootstrap pull-right class</title>       <meta name="viewport" content="width=device-width, initial-scale=1">       ... Read More
Advertisements