Trouble with Hero Unit Styles not being implemented

Looking to convert a PSD design to HTML using Bootstrap, but the hero unit is not displaying its default style as expected.

 <html lang="en">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
    
        
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/cerulean/bootstrap.css" >
    
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        
        </head>
        
        
        <body>
        
        
            <div class="hero-unit">
      <h1>Creating Sleek Websites</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <p>
        <a class="btn btn-primary btn-large">
          Get Started
        </a>
          
          <a class="btn btn-primary btn-large">
        Learn More
        </a>
      </p>
    </div>
            
         
        
        </body>
    </html>

The image uploaded shows that the styles for images are working fine, but the hero unit is not styled properly. Any suggestions on why this might be happening?

https://i.sstatic.net/NVigf.png

csstwitter-bootstrap

Answer №2

Maybe you're referring to the CSS code found at this link.

If you're looking to utilize the hero-unit class from Bootstrap v2, make sure to include this stylesheet.

For Bootstrap 3 users, consider using the jumbotron class as suggested by scaisEdge.

If this information doesn't address your query, feel free to create a custom CSS file to achieve your desired styling.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to update a CSS class in React JS?

Suppose I have a CSS class called 'track-your-order' in my stylesheet. Whenever a specific event occurs, I need to modify the properties of this class and apply the updated values to the same div without toggling it. The goal is to replace the ex ...

javascriptcssreactjsstylesheetclassname

Adjust the dimensions of the text area to modify its height and width

Can someone help me adjust the width and height of the <textarea> tag in HTML so that it only has two lines (rows)? Right now, it's only displaying one line. Any suggestions on how to solve this issue? Even when I try changing the width to 1000 ...

htmlcssasp.nettwitter-bootstraptextarea

Achieve consistent heights for divs within table cells without the use of JavaScript

Is it possible to make two divs contained in table cells in a shared row both have the height of the taller div without using JavaScript? Take a look at this simplified example here: http://jsfiddle.net/Lem53dn7/1/ Check out the code snippet from the fidd ...

htmlcssdynamichtml-table

Steps to shorten HTML content while maintaining consistent column width

Is there a way to ensure that the fixed column width is maintained even with long strings? I am trying to display a report in a jsp by having headers in one table and content in another table, both with columns set to the same width. However, some of the ...

htmlcss

Tips for incorporating transition animations into route changes in next.js

On the homepage, there are 2 links that I want to have distinct transition animations for. For example, if I click the link on the left, the animation should start from the left and move towards the right when changing routes. ...

cssreactjsanimationnext.js

Overlapping Divs - HTML Elements Crossing Paths

My challenge is to position the Social Icons at the bottom of the screen and align the Image Gallery in the middle. However, the social Icons keep moving to the center of the screen and the Image gallery ends up overlapping them, making it difficult for me ...

javascripthtmlcss

Switch the background image of one div when hovering over a different div

Can anyone assist me with creating an interactive map where continents light up as you hover over them? I am using multiple images within div elements in order to achieve this effect. Specifically, I want to change the background image of one div when hove ...

htmlcss

Exploring the width of Bootstrap 5 Tab Pane content

My issue lies with the content width of my tab panels - specifically, it doesn't work well with columns. I am unable to divide a tab-pane as col-md-7 and col-md-5 (refer to the screenshot below). I am unsure of how to resolve this issue. <div clas ...

htmlcssbootstrap-5

Managing the appearance of one DOM element using another DOM element

Hey there, I'm currently working on an Angular Material tooltip implementation. When I hover over my span element, the tooltip appears. Now, I'm wondering how I can dynamically change the background color of the tooltip based on certain condition ...

javascripthtmlcssangularangular-material2

Enhance the appearance of QTreeView items using a customized display delegate and CSS

In my QTreeView, I have a custom delegate set up for one of the columns to display a colored progress bar. The appearance of the progress bar depends on the content and I used the color information from option.palette to mimic the default delegate behavior ...

cssqtdelegatesqtreeview

Switching background images for DIVs when links are rolled over

Having trouble changing the background image of a div when a user hovers over a link. Any ideas on what might be causing this issue? <style> #divToSwap { background-image: url(black.jpg); height: 150px; width: 150px; } </style> &l ...

javascriptjquerycss

Aligning the page content in perfect harmony with the footer

I've encountered variations of this question in the past, but I haven't found a solution that fits my specific needs. My challenge involves having a footer fixed at the bottom of a page, even when the content doesn't fill the entire page. Ad ...

htmlcss

Checking the Value of the Second Child Element Using jQuery

I am struggling with a DIV structure that looks like this: <div class="metafield_table"> <div class="metafield"></div> <div class="metafield"></div> <div class="metafield"> ...

javascriptjquerycss

The design of the button appears unappealing when viewed in

Hi there! I am currently working on creating a button for Outlook 2010, but I am running into an issue. The button image is not aligning vertically in the center, and the padding and margin are not displaying properly. It works perfectly fine on most ema ...

htmlcssoutlookhtml-email

Alter the preceding element within the DOM upon hovering with CSS

Could there be a CSS solution to this dilemma or would we need the assistance of JavaScript to navigate the DOM? Here's the HTML snippet in question: <div class="thumb_ctn"> <div class="overlay"> <div id="link_text">SOME ...

htmlcsshover

Placeholder disappears when text color is changed

I have been struggling for 3 hours trying to change the placeholder color to graytext, but it's just not working. Here is the code I've been using: <div class="form-group"> <label for="email">Email:</label ...

htmlcssbootstrap-4

The primary objective of utilizing margin

Just embarked on my journey to mastering HTML and CSS. Regarding the 'margin' property: Does its primary function revolve around centering elements horizontally on a webpage? I've crafted a navigation menu for a website, yet I struggle to ...

htmlcssmargin

When a cursor hovers over an image, a dark line appears

I wanted to create a hover effect where the image would enlarge when hovered over. I achieved this using a JavaScript function that applies the transform property with a scale of 1.2 to the picture. However, during the animation, a black line appears at th ...

javascriptcss

Incorporate extra padding for raised text on canvas

I have a project in progress where I am working on implementing live text engraving on a bracelet using a canvas overlay. Here is the link to my code snippet: var first = true; startIt(); function startIt() { const canvasDiv = document.getElement ...

javascripthtmlcsscanvas

Refresh the current page with jQuery Mobile when it is clicked

I have a multi page template in jQuery Mobile. How can I refresh the current page when clicking on a hyperlink or button? I am using JQM version 1.4.5 Despite trying the code suggested in how to refresh(reload) page when click button in jQuery Mobile, it ...

javascriptjqueryhtmlcssjquery-mobile