The h2 tag in Bootstrap 4 does not display headers on a new line as expected

While working with bootstrap 4, I found that my headers were not displaying in a single line as expected. Instead, the next content was getting displayed with the header tag without any line breaks. What could be causing this issue?

I have double-checked to ensure that the header tags are properly closed.

<div class="row">    <h2>Expertise</h2>    <p>Php, html5, css3, wordpress, </p>    </div>

The desired output should look like the code above, with each element on its own line. However, what I'm seeing is everything displayed in one line with different font sizes. The "Expertise" header appears larger than the rest of the content.

Unexpected Output: Expertise Php, html5, css3, wordpress,

cssbootstrap-4

Answer №1

Include columns to organize content within a row as shown below

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
    <div class="row">
        <div class="col">
            <h2>Skills</h2>
            <p>JavaScript, Python, React, Node.js</p>
        </div>
    </div>
</div>

Guidelines for Bootstrap 4 Grid Structure

  • Utilize rows to form horizontal sets of columns
  • Content must be placed within columns, and only columns can be direct descendants of rows

Source: https://www.w3schools.com/bootstrap4/bootstrap_grid_system.asp

Answer №2

The reason for this layout issue is due to the "row" class utilizing display:flex. To resolve this and ensure that h2 appears on the next line, you can apply the CSS property "flex-direction" with a value of column.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<body>
  <div class="">
    <h2>Expertise</h2>
    <p>Php, html5, css3, wordpress, </p>
  </div>
</body>

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 techniques can be used to implement a diagonal gradient using CSS3?

Looking to make a responsive button? Take a look at this image: https://i.sstatic.net/23GsY.jpg I've attempted recreating it with CSS3, as embedding the image directly wasn't giving me the desired responsiveness. The challenge lies in creating ...

htmlcssbuttongradient

Is it possible to generate multiple modal windows with similar designs but varying content?

I am facing a challenge with 140 link items that are supposed to trigger a modal window displaying a user profile for each link. The issue is that each user profile contains unique elements such as three images, a profile picture, text paragraph, and socia ...

javascriptjqueryhtmlcssmodal-dialog

Arrange multiple elements in a column using the flexbox `justify-content` property

I have a div containing h1 and h2 tags. My objective is to center them both horizontally and vertically using flexbox. However, my current code aligns them diagonally like this: -------------- | | | h1h2 | | | --------- ...

htmlcssflexbox

Follow us text placed in front of social sprite images all aligned on the same line

Is there a way to align the Follow Us text with sprite images? Check out this jsfiddle link for more details! <ul class="social_Emp">&nbsp;&nbsp;&nbsp;Follow us: <li class="Emp_twitter"><a href="{if $userInfo.TwitterPage} {$u ...

css

Changing the absolute layout to utilize floats

I am seeking guidance on a project I am currently working on and would greatly appreciate any help. Main Goal: The objective is to create a drag and drop CMS that allows users to draw elements on a grid and rearrange them as needed. The system will recor ...

javascriptjqueryhtmlcsscss-float

Background color applied to row elements in div containers

I've been experimenting with integrating table content into CSS floats, but I'm facing some challenges. My current strategy involves using divs at the "table," "row," and "cell" levels. However, I'm not convinced that this is the most effec ...

css

The Opera browser displays a horizontal orientation for vertical menus

Having some trouble with my vertical menu rendering correctly in different browsers. It's appearing horizontal in Opera, but looks good in Firefox and Chrome. I'm pretty sure it's just a small tweak needed in the code, but I can't quite ...

htmlcssopera

Enhancing the mobile navigation bar dropdown in Bootstrap 4

Issue My mobile navigation dropdown appears outdated. Interestingly, when I switch to mobile view using Chrome developer mode, the dropdown looks modern. Snippet I am using Bootstrap 4.3.1 <?php if (isset($admin) && $admin) { ?> ...

bootstrap-4

What causes a CSS Variable to appear crossed out in the Chrome Debugger?

Currently facing a challenge with debugging an issue where certain CSS Variables are being overridden by an unknown source. It's puzzling because I cannot identify what is causing the override. When it comes to standard CSS properties (such as font-fa ...

cssgoogle-chrome-devtools

Challenges with text in a Bootstrap 5 responsive carousel

I'm currently in the process of developing a new website and I am utilizing bootstrap 5. One issue I have encountered is that the text and button within the carousel in the header section do not appear to be compatible. To provide better clarity, I wi ...

htmlcsscarouselbootstrap-5

Tips for seamlessly integrating an overlay into a different image

My current system is set up to overlay the image when you check the checkboxes. However, I'm facing an issue with positioning the image inside the computer screen so it's not right at the edge. Can anyone provide assistance with this? <html&g ...

javascriptjqueryhtmlcss

What is the reason radio buttons are not compatible with box-sizing?

I attempted to create a unique radio button design, but I'm struggling to figure out why the box-sizing property isn't functioning as expected. Chrome: FireFox: What am I overlooking? HTML: <input class="radio-btn" type="radio" name="a"/& ...

htmlcss

Child elements should adjust their height based on the root parent container by utilizing flex properties, even if there is a potential top offset present

I am attempting to nest multiple "blocks" within each other, utilizing flex for this specific case. The structure I am aiming for is as follows: Parent (highlighted in blue in JSFIDDLE) Container: margin-top: 32px, (highlighted in red) Row 1: colored ...

htmlcssflexbox

retrieve the image name of the background using jQuery

How can I use jQuery to extract only the background image name from a div with a background image? I currently get 'http://localhost/xampp/uconnect/images/tour-networks-ss.png' but I only want 'tour-networks-ss.png' Any assistance wi ...

jqueryhtmlcss

Can a person select a characteristic like "height" using Javascript?

Is it doable to set a height for an image in CSS, then detect this gradient using JS and double the width based on the height x2.25? Could this be achieved? ...

javascriptcssattributesscale

Apply the CSS property to all divs with a shared class using jQuery

I am facing an issue with applying the CSS property 'z-index:99' to multiple divs that have the same class name. I want this CSS to be applied when clicking on a play button using jQuery. Currently, it only works for the first Play Button and I w ...

jqueryhtmlcss

Place a label within a container and surround it with a single border. Inside the container, create an unordered list

I'm attempting to design a filter dropdown feature where only the label of the dropdown is visible at first, and then upon clicking the label, a list of options will drop down over the top of the remaining content using absolute positioning. The chall ...

htmlcss

Tips on setting a background image to a div element

I'm facing an issue with a div setup like this: https://i.sstatic.net/4nuyO.png My goal is to remove a specific section of the circle shape displayed below: https://i.sstatic.net/09IWX.png The desired outcome is to achieve a final shape similar to ...

htmlcsstwitter-bootstrapbootstrap-4

The Django server fails to display the CSS files upon activation

Despite having all the static files in place, only the plain HTML loads without any styles for some unknown reason. I've attempted using collectstatic and even setting up a new project, but to no avail. STATIC_URL is also properly specified along with ...

pythoncssdjangodjango-templatesdjango-admin

Ways to position buttons at the bottom of a webpage

I am looking to position all buttons at the bottom of the page: https://i.sstatic.net/ikXW5.png This is the code snippet: https://codesandbox.io/s/angular-7-bootstrap-4-3pv0p?from-embed <div class="container-fluid py-2"> <div class="row"> ...

cssbuttonbootstrap-4