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?

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

I recently designed a form using a combination of HTML and JavaScript in order to display different dialogues depending on the number of selections made. Unfortunately, the alert function does not seem to be functioning

The concept is to have users select options and then receive employment sector suggestions based on their selections. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

javascripthtmlcssforms

What are the dimensions for maximum picture width and height in the Bootstrap 4 grid class col-4? Additionally, can you provide some tips on minimizing image bl

Hey there! I am trying to arrange 3 screenshots in 3 separate columns in one row, resembling steps 1, 2, and 3. I want them all to have the same size. Can you advise on the maximum width and height I should use before they start getting stretched or comp ...

htmlcssbootstrap-4

Customize Your Lists in Wordpress to Reflect Your Unique Style

I need help with styling a specific text widget in Wordpress by adding a FontAwesome icon as a list bullet. I have the following CSS code: .covenant li { counter-increment: my-awesome-counter; margin: 0.25rem; } .covenant li:before { font-family: 'Fo ...

htmlcss

iOS devices will not scroll horizontally if there is a div that scrolls vertically within a div that scrolls horizontally

Picture a div that scrolls horizontally, housing two vertical-scrolling divs. You'll need to scroll left and right to navigate, then up and down inside the inner divs to read the content. /* RESET TO MINIMUM */ body, html { height: 100%; mar ...

javascripthtmlioscss

Implementing a Moving Background Image with CSS3 or jQuery

I am facing an issue with a background image that has a file size of 4+ MB in PNG format. My website is a single page website and I want to use this background image, but I'm unsure how to go about it. Is there a way to reduce the size of the image s ...

jqueryhtmlcss

Ways to change columns into rows with CSS

Hey there! I'm looking for a way to convert columns into rows and vice versa. In my table, I have both column headers and row headers on the left side. The row headers are simply bold text placed next to each row to describe its content. I want to op ...

javascripthtmlcss

Spacing applied to content within a fresh Vue application

Having been assigned the task of developing a Vue page for my team, I am facing an issue with a persistent white border surrounding the entire page. <script setup lang="ts"> </script> <template> <body> <div>&l ...

htmlcssvue.js

Attempting to replicate a <textarea> to behave like a <div> element

I am currently facing an issue with my HTML and CSS code. I have tried to construct a design using a <div> but it resulted in horizontal scrolling and looked chaotic. How can I make the CSS and HTML look the same without any issues? <textarea c ...

htmlcss

The webpage failed to show the hamburger menu

I'm trying to create a hamburger menu and have written the following code: <header class="header"> <nav class="flex flex-jc-sb flex-ai-c"> <a href="/" class="header__logo"> <img src="im ...

htmlcsswebsass

Is there a problem with the way divs are being displayed when using jQuery to show the first 12 elements with the class "hide-show"?

I am encountering a problem with displaying data using the jQuery slice() and show() methods to reveal dynamically generated divs from a PHP function. The code is as follows: <style> .hide-show { display :none; } </style> <div class="c ...

javascriptphpjquerycsscodeigniter

Issue with Gmail failing to render CSS in HTML email (svnspam)

After successfully setting up and configuring svnspam, I noticed that the emails sent to my Gmail account are missing the colored diffs. When examining the original email using Gmail's view original feature, I found the CSS code as follows: <html ...

htmlcssemailgmail

Having difficulty animating the height transition of the NextJS Image component

On my webpage, I have a headerbar that changes size (from 120px to 70px) when the user scrolls down. I successfully implemented this transition using Tailwind classes and a height transition. Now, I am trying to make the site logo resize along with the hea ...

cssreactjsnext.js

Is there a way to control the visibility of two divs depending on which one a user hovers on?

Having two stacked div elements containing images, I want the div with id = "features3_HDS_image" to become visible when a user hovers over the div with id = "HDS_Blurb", and the div with id = "features3_FH_image" to be displayed when hovering over the div ...

jqueryhtmlcss

Unique text: "Personalized button design without using SVG

I've been experimenting with creating a button using SVG, but unfortunately, it seems that SVG is not supported on Next.js & Material UI. Below you'll find the code snippet and screenshot I have been working with. Any help or guidance would be g ...

htmlcssmaterial-uifrontendnext.js

The layout of the table is not formatted in a single continuous line

I recently implemented the material-ui table and noticed that the header has a multiline break space. I am looking for a way to make it display in a single line instead. Is there any solution for achieving this using material UI or CSS? Feel free to chec ...

htmlcssreactjsmaterial-ui

Troubleshooting Issue with Importing File into CSS Document

I'm currently working on building a website and I've been trying to import an image to use as the header. I want to add this .png picture to my CSS file, but despite extensive research and double checking everything, I still can't figure out ...

htmlcssimagefilepath

Styling text on a HTML webpage

Is there a way to center text in the caption and add a link on the far-right of the caption? Let me know if this is possible. The format for the caption should be: Centered Text Right-justified link ...

htmlcss

Move your cursor over the image to activate the effect, then hover over it again to make the effect disappear

Looking to enhance my images with hover effects. Currently, all the images are in grayscale and I'd like to change that so that when you hover over an image, it reverts to full color and remains that way until hovered over again. I've noticed so ...

javascripthtmlcss

What is the best way to center a Checkbox in HTML5 and CSS?

I've been struggling to center my Checkbox with label on my current website project. Despite searching online for solutions, I'm still unable to find the right method! If you're curious, you can check out the source code of my webpage at ( ...

csshtmlweb-applicationsweb

The transparency feature using rgba is not supported in the Chrome browser for Android

Have you noticed the transparency effect in certain divs using the rgba CSS property? Strangely, Chrome on my ASUS tablet and Samsung S3 mini Galaxy smartphone does not seem to support this feature. Surprisingly, Internet Explorer does! Any insights on w ...

androidcssgoogle-chrome