Typography in Bootstrap

Image Replacement in Bootstrap using text-hide Class

Last Updated : 12 Feb, 2019

Bootstrap allows us to replace the text with background image for any text element like paragraph element, heading element etc. With the use of .text-hide class, we can replace an element’s content with a background image. Syntax:

<element class = "text-hide" 
         style = "background-image: url('Specify URL of image here');">
</element>

In the above syntax, the text-hide class is used to first hide the text of the element and a background image is added to the element using the CSS background-image property. Example:

html

<html>
<head>
    <!-- Link Bootstrap CSS and JS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
</head>
<body>
    <h1 class="text-hide" 
        style="background-image: url('https://media.geeksforgeeks.org/wp-content/cdn-uploads/GeeksforGeeksLogoHeader.png'); 
               background-repeat: no-repeat; 
               width: 500px; height: 500px; ">
        GeeksforGeeks
    </h1>
</body>
</html>

Output:

Note: This class also helps in improving the SEO of a website, as using this class we can add images to the website using heading tags, and use of heading tags is found to be good for a Webpage's SEO.

Typography in Bootstrap

C

chaitanyashah707

Improve

Article Tags :

Similar Reads

Bootstrap Grid System

Introduction and Installation Buttons, Glyphicons, Tables Vertical Forms, Horizontal Forms, Inline Forms DropDowns and Responsive Tabs Progress Bar and Jumbotron Prerequisites: Web Development Basics and Â BootStrap (Part-1) Grid System: In the previous article we had learnt about Bootstrap and its I

Bootstrap Buttons, Glyphicons, Tables

After the previous article, one should be familiar with the Grid System of Bootstrap. Now, we'll learn about making Buttons, the all-new Glyphicons and Tables. Let's get started.Bootstrap ButtonsBootstrap buttons provide a quick way to create consistent and responsive buttons using predefined classe

Bootstrap Forms Alignment Types

Bootstrap Forms are pre-styled HTML forms provided by the Bootstrap framework. They streamline the process of creating aesthetically pleasing and responsive forms by offering a range of ready-to-use components, layouts, and styles, ensuring consistency and efficiency in web development. Bootstrap Fo

Bootstrap DropDowns and Responsive Tabs

Introduction and InstallationGrid SystemButtons, Glyphicons, TablesVertical Forms, Horizontal Forms, Inline FormsProgress Bar and Jumbotron Dropdown Menu Using Bootstrap: In bootstrap, dropdowns are created using the class="dropdown". What we will do is create a button and then convert the button in

Bootstrap Progress Bar and Jumbotron

BootStrap articles : Introduction and Installation Grid System Buttons, Glyphicons, Tables Vertical Forms, Horizontal Forms, Inline Forms DropDowns and Responsive Tabs Progress Bar We all have seen a progress bar while executing some process in our computer. A progress bar shows how much of the proc

Bootstrap Alerts , Wells, Pagination and Pager

Introduction and InstallationGrid SystemButtons, Glyphicons, TablesVertical Forms, Horizontal Forms, Inline FormsDropDowns and Responsive TabsProgress Bar and Jumbotron Alerts: We often see certain alerts on some websites before or after completing an action. These alert messages are highlighted tex

Bootstrap Badges, Labels, Page Headers

Introduction and InstallationButtons, Glyphicons, TablesVertical Forms, Horizontal Forms, Inline FormsDropDowns and Responsive TabsProgress Bar and Jumbotron Badges: We all have seen some numerical indicators beside some links on various websites. These are called badges. These badges tell how many

Bootstrap Tooltips

In this article, we would be discussing the tooltip plugin provided by bootstrap. Tooltip is quite useful for showing the description of different elements in the webpage. Tooltip can be invoked on any element in a webpage. Tooltips on bootstrap depends on the 3rd party library Tether for positionin

Bootstrap Navigation Bar

Bootstrap Navigation Bar provides a responsive, customizable, and pre-styled navigation component for web applications. It incorporates features like branding, navigation links, dropdowns, and responsiveness, enabling developers to create effective and visually appealing navigation menus effortlessl

Bootstrap Carousel

Bootstrap Carousel enables slideshow functionality for images or content. Easily customizable with CSS and JavaScript. Supports responsive design and touch gestures, enhancing user experience in web development projects. It can be included in your webpage using "bootstrap.js" or "bootstrap.min.js".