April 27, 2022 . 3 MIN READ
Twitter Bootstrap Tutorial Part 2:
This is the second tutorial about bootstrap. At first tutorial we discuss about the starting process of designing webpage with Twitter bootstrap.
Today we discuss about very important things such as how we customize Twitter bootstrap CSS.
After download the file from Twitter bootstrap we got bootstrap.css. Now the question is if we need to add our own CSS on bootstrap.css how can we add?
Just focus on the following simple example.
Suppose we want to use <a> tag.
Code:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
<link rel=”stylesheet” type=”text/css” href=”bootstrap.css” />
</head>
<body>
<div>
<a href=”http://Twitter.github.io/bootstrap/”>Bootstrap</a>
</div>
</body>
</html>
Output:
Just look at the output. The color of the link is blue by default. But if we want to change the color of that link then how we can change it.
There are two steps to change the color. Suppose we need red color.
First Step:
First step is to change the CSS from bootstrap.css. In bootstrap.css you can find css that is written for <a> tag.
At bootstrap.css line no 214-217 is the CSS for <a> tag such as
a {
color: #0088cc;
text-decoration: none;
}
That’s why the link color is blue by default. Now we want to change the color and want to make it red. To make it red just change the color. Such as:
a {
color: #FF0000;
text-decoration: none;
}
After change the bootstrap.css
Code :
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
<link rel=”stylesheet” type=”text/css” href=”bootstrap.css” />
</head>
<body>
<div>
<a href=”http://Twitter.github.io/bootstrap/”>Bootstrap</a>
</div>
</body>
</html>
Output:
Second Step:
There is another way to change the css. You can create a new css file like style.css and then import bootstrap.css on style.css.
Example:-
@import url(“bootstrap.css”);
Then you can write css on style.css as you want.
As example now you can write your own css for <a> tag.
Code:
a{
background:#000000;
text-decoration:none;
}
Output:
Output for the above code
Now look at the following complete example.
Step 1:
Example.html
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Example</title>
<link rel=”stylesheet” type=”text/css” href=”bootstrap.css” />
</head>
<body>
<div>
<em>Good Morning</em>
</div>
</body>
</html>
bootstrap.css ( line number 563-565)
em {
font-style: italic;
}
Output
Step 2:
Example.html
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Example</title>
<link rel=”stylesheet” type=”text/css” href=”style.css” />
</head>
<body>
<div>
<em>Good Morning</em>
</div>
</body>
</html>
style.css
@charset “utf-8”;
/* CSS Document */
@import url(“bootstrap.css”);
em {
font-style: italic;
font-weight:bold;
color:red;
font-size:14px;
}
Output
Now you can try yourself to change the css as you want. We will discuss more about Twitter bootstrap in our next tutorial.
Thank You.
