What can be done to resolve the issue of text not displaying correctly on the screen?

I am attempting to position text to the right of a card header in my project, but for some reason the working example on fiddle is not working. I am using Bootstrap 4.

Check out the example here.

Here is what I am seeing in my app:

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

Below is the corresponding code:

<div class="col">
     <div class="card">
       <!--CARD HEADER-->
       <h4 class="card-header">HEADER <small class="float-sm-right">right aligned</small></h4>
       <!--CARD BODY-->
       <div class="card-body">
       </div>
     </div>
   </div>
 </div>

Thank you for your help.

htmlcsstwitter-bootstrap

Answer №1

Chances are, your design may be causing the card-header to only be as wide as its content, possibly due to a style like display: inline.

Consider adding display: block; to the card-header class, or ensure that no conflicting styles are preventing the element from being display: block.

.card-header {
   display: block;
}

Answer №2

If you use the class float-sm-right, it will only float to the right on screens that are size sm (768px and up). To make it float to the right on all screen sizes, you can simply remove the -sm.

Here is a link to a JSFiddle example: https://jsfiddle.net/g9nu8f7d/

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">

  <div class="row">
    <div class="col">
      <div class="card">
        <!--CARD HEADER-->
        <h4 class="card-header">HEADER <small class="float-right">right aligned</small></h4>
        <!--CARD BODY-->
        <div class="card-body">
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col">
      <div class="card">
        <!--CARD HEADER-->
        <h4 class="card-header">HEADER <small class="float-right">right aligned</small></h4>
        <!--CARD BODY-->
        <div class="card-body">
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col">
      <div class="card">
        <!--CARD HEADER-->
        <h4 class="card-header">HEADER <small class="float-right">right aligned</small></h4>
        <!--CARD BODY-->
        <div class="card-body">
        </div>
      </div>
    </div>
  </div>

</div>

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

Storing multiple text box values into a single application variable in C# - A Comprehensive Guide

[code page="c#"] Hdnano.Value = Application["AccountNum"].ToString(); $(document).ready(function() { $("#ano").on("blur", function() { var accountNum = $('textarea#ano').val(); $("#Hdnano").val(folioNum); }); &l ...

c#jqueryjsonhtmlbootstrapping

Replicating a row in a table without disrupting a button within the row

As a novice in the world of coding, I am currently embarking on a project to revamp an existing website. The task at hand involves creating a table with a built-in save/edit feature, which I have successfully implemented. However, I am facing a roadblock w ...

javascriptjqueryhtml

Switching between various quantities of inputs in each row using Bootstrap V3

My Bootstrap V3 form has a mix of rows with two inputs and rows with one input, as per the designer's request. Check out my fiddle here: https://jsfiddle.net/06qk4wh4/ <div class="form-group col-sm-12"> <label class="control-label col- ...

htmlcsstwitter-bootstrap

Positioning Images at the Top of the Screen in React Native

I have two images that I would like to display side by side at the top of the screen. <View style={styles.container}> <View style={styles.topWrapper}> <Image source={TOP_START_GRAPHIC} style={styles.topStartImage} /> ...

javascriptcssreact-nativecss-positionimage-resizing

Fixing issues in PHP File Editor

At our web development company, we have created an online file editor and file manager script for our website users to easily manage their files and customize their templates. This script is written in PHP and allows users to edit html, text, php, js, jque ...

phphtml

The jQuery Show Hide feature is experiencing issues specifically on Internet Explorer

Everything looks good in Firefox and Chrome, but unfortunately it's malfunctioning in IE. Does anyone have a suggestion for hiding select Dropdown options? I attempted using CSS with display: none but it didn't work. $j("#id option[value=&apos ...

javascriptjquerycss

"Allowing the PDF file type to be passed as a prop to a div instead of an input

In my project using semantic-ui-react, I encountered an issue while trying to validate input in a form by passing the accept:pdf prop. The code snippet I used is as follows: <Input label='Business Plan__' fluid accept= ".pdf" type="fil ...

htmlreactjssemantic-ui-react

When utilizing gridView, the ExecuteReader method will throw an error if the CommandText property has not been

I am encountering an issue with populating a gridView using the ExecuteReader function in my program. Every time I run it, I receive an error message stating "ExecuteReader : CommandText property has not been initialized". aspx.cs private void LoadGr ...

c#htmlcssasp.net

Exploring the potential of overflow within a container with a percentage-based

I am attempting to design a webpage that fills the entire screen height without scroll bars, yet contains a scrollable container within it. Despite trying various approaches with percentage heights, I have not been successful as the percentages do not beha ...

htmlcss

Experiencing difficulties with my .css formatting following the installation of bootstrap in Angular

I've been immersing myself in Angular and encountered an issue that has me stumped. Despite using the latest version of Bootstrap in my Angular project, I'm facing challenges with my styles.css file that was defined prior to installing Bootstrap. ...

cssangularbootstrap-5

Unknown CSS element discovered: bootstrap, gradient, carousel

I recently created a random quote app using javascript, jQuery, and bootstrap on Codepen. Everything worked perfectly there. However, when I organized the files, pushed them to git, and tried to view the app from Safari, I encountered some warnings and t ...

javascriptjquerycsstwitter-bootstrap

What is the best way to serialize data from non-form elements and make it easily accessible through params[:model]?

I have developed a unique Sinatra application that leverages an external API to load data and exhibit it on a page. Utilizing Sinatra, the information is retrieved and stored in a temporary model instance (which is NOT saved) for seamless access to all its ...

javascriptjqueryhtmlsinatra

Vuetify displaying incorrectly following deployment

After creating a spa with vue.js for the frontend, I utilized the vuetify library for various components and layout. While everything looked great locally, upon deploying to Azure, all vuetify styling seemed to disappear. My custom css was still applying ...

cssazurevue.jsdeploymentvuetify.js

The submission of FormData to the PHP server is causing an issue

I am having an issue with sending the formData to my PHP script using AJAX. Despite inspecting the elements, I can't find any errors in the process. Below is the structure of my form: The input values are sent to a JS file onclick event. <form c ...

javascriptphphtmlajax

Adjusting the margins of jQuery mobile buttons

I seem to be stuck on a simple error that is causing me to spin my wheels. Take a look at the following jqm (version 1.3) view (in haml) #main-header{'data-role' => 'header'} #main-content{'data-role' => 'content ...

jquerycsshtmljquery-mobilejquery-mobile-button

Tips for creating a transition effect when hovering over a CSS sprite

Below is a snippet of my CSS sprite code: #IconSet a { width: 36px; height: 36px; display: inline-block; } #DeviantArtIcon { border-width: 0px; border-style: none; background-image: url(http ...

csshovercss-transitionstransition

Ways to center items in a row-oriented collection

When dealing with a horizontal list, the issue arises when the first element is larger than the others. This can lead to a layout that looks like this. Is there a way to vertically align the other elements without changing their size? I am aware of manual ...

htmlcss

Vertical stacks of DIVs suddenly vanish

I am currently creating a map grid using HTML/CSS with the following layout: #map { position: absolute; top: 2vw; bottom: 2vw; left: 2vw; right: 2vw; overflow: visible; background : blue; } .map-row { width: 100%; ba ...

htmlcss

Ways to expand the width of a div on hover - Angular navbar dropdown utilizing Bootstrap 4

I am attempting to make the div full width while also implementing a slideDown/Up effect. I am struggling to identify the specific CSS needed to adjust the width accordingly. Currently, this is what I have: I can see that the class open is dynamically ad ...

csstwitter-bootstrapbootstrap-4

If the div is visible in the viewport, then automatically scroll to the top

Struggling to locate online resources for this particular technique. In my JSFiddle, users can navigate through fullscreen divs using 'next' or 'prev', as well as scrolling to access the next or previous divs. The issue arises when us ...

jqueryhtmlcss