Achieving text center alignment and adding color to text within a header using Bootstrap

I am looking to center the text in a header and apply color to it using Bootstrap. Unfortunately, there is no direct option for font-color or text-color in Bootstrap.

Below is my HTML and CSS code:

#header {
  width: 800px;
  height: 50px;
  color :white;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div id="header" class="span12" style ="background-color :#003366; width :800px; height:50px; font-weight:bold; font-style :normal ;font-size:35px;">Customer</div>

Here is the current appearance:

htmlcsstwitter-bootstrapasp.net-mvc-4

Answer №1

To change the color of the text, use color (e.g.: color:#bbddff;) and to center the text within the div, use text-align:center. For example:

#header {
  width: 800px;
  height: 50px;
  color :#bbddff;
  text-align:center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div id="header" class="span12" style ="background-color :#003366; width :800px; height:50px; font-weight:bold; font-style :normal ;font-size:35px;">Customer</div>

If the code above doesn't work, there may be conflicting styles from other sources. Here's what I recommend:

  1. Open your page in a browser.
  2. Access the developer tools.
  3. Inspect the #header element.
  4. Determine where it is getting its styles from.

It's possible that your styles are being overridden by styles applied elsewhere.

Answer №2

<span class="unique-span-class">I am a unique span element.</span>

.unique-span-class{
 display:flex;
 justify-content:center;
 color:purple;
}

It's important to note that by default, a span is an inline element. To center the text within it, you can make it a block element using the above CSS code.

If you want to change the color of any text, simply use the 'color' property in your CSS and choose the color value you desire (e.g., color:green;).

Answer №3

To make the text in the #header CSS white, simply include the properties text-align: center and color: #FFFFFF.

Answer №4

To align text in the center, you can make use of the class "text-center". Here's an example:


    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

    <body>

    <div class="container">
       <p class="text-center">Center aligned text.</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

Background images at 100% width are not causing horizontal scrolling issues

I've come across an interesting problem. I created a quick screen recording to illustrate: Essentially, when you specify a min-width and the viewport width falls below that limit, a horizontal scroll bar appears. This behavior is expected, but when s ...

css

"The issue with jQuery not functioning properly is isolated to a particular HTML file

I'm encountering a strange issue with jQuery as a beginner. It seems that my jQuery code is not functioning properly on the HTML file I created for the website's homepage. Surprisingly, when I test the same jQuery code on a blank HTML file, it wo ...

jqueryhtml

Can you answer this straightforward query about CSS positioning?

I am currently facing a challenge in creating a small div (header class) that overlays a main banner image div (banner class). When I maximize my browser window, the positioning is correct. However, upon resizing the browser, the header div maintains its m ...

htmlcss

How can JavaScript be integrated with Django static URLs?

I have a Django application where I store static images on Digital Ocean Spaces. Displaying these static images in my template is simple:<img>{% static 'images/my_image.png' %}</img> When I inspect the HTML page after loading, I see ...

javascripthtmldjangodigital-ocean

Struggling with implementing responsive mobile buttons that stack in a column? Here's the solution

My content is nearly responsive on all screen sizes, but I'm having trouble getting the buttons to stack neatly in a column. Can anyone provide suggestions on how to fix this issue? You can view the current progress below. Thank you in advance for any ...

htmlcssresponsivescreen-sizedevice-width

The parameter necessary for [Route: admin.request.update] is missing. The required URI is admin/request/{request}, and the missing parameter is 'request'

When attempting to access detail.blade.php, I encountered an error stating "Missing required parameter for [Route: admin.request.update] [URI: admin/request/{request}] [Missing parameter: request]." Despite following the steps and codes exactly as in my pr ...

phphtmlcsslaravel

Attach the element to the bottom of the viewport without obstructing the rest of the page

My challenge is to create a button that sticks to the bottom of the viewport and is wider than its parent element. This image illustrates what I am trying to achieve: https://i.stack.imgur.com/rJVvJ.png The issue arises when the viewport height is shorte ...

javascripthtmlcss

Using the <li dir="..."> tag can cause list indicators to break

Is there a method to utilize dir tags for <li> elements without disrupting the list indicators? Logically, they should all align on the same side and RTL <li> elements in an otherwise LTR document should either be left-aligned if it's only ...

htmlcsshtml-listsdirection

Exploring the Functionality of POST in AJAX Requests

I'm facing an issue where the data is not displaying on my page even though I am using a Github URL and Ajax POST. Can anyone help me identify what needs to be fixed in the code below? <div id="content"> </div> window.onload = ...

htmljqueryjsonajax

jQuery for Special Characters

I am currently facing an issue with the character &gt; in my jQuery datatable. Strangely, it displays '>' correctly but when I click on a row, the character &gt; appears and I am feeling frustrated. Is there any solution to this probl ...

htmljquerydatatablespecial-charactershtml-entities

Designing a dropdown menu with sub-menus that appear when hovered over

In my quest to design CSS that will dynamically display links in left-to-right divs, I am seeking a way for sub-menus to appear below the menu being rolled over. The challenge lies in the fact that these menus will be loaded from a WordPress database, mean ...

htmlcsswordpressdrop-down-menunavigation

Emphasizing a full row within a table is a way to draw attention

I have a piece of HTML/CSS code that successfully underlines the text in a single table cell when hovering over it. However, I want to extend this effect to underline all text in a row of cells, rather than just one cell. It's not necessary for the en ...

htmlcss

Enhancing the appearance of child elements using CSS modules in Next.js

My Countdown component implementation includes: import styles from "./Countdown.module.scss"; import React from "react"; import useTimer from "hooks/useTimer"; import cn from "classnames"; function Countdown({ date, ...

cssreactjsnext.jscss-modules

Collaborating with interactive icon in input group

I'm having trouble getting the textbox and icon to be in the same line, like a bootstrap input group. The icon is also clickable. <div class="input-group"> <asp:textbox id="txtParentCategoryCode" runat="server" cssclass="input-text normal" m ...

cssasp.netfont-awesome

Ways to automatically trigger the opening of a Bootstrap accordion without manual

On my website, I have an "About Us" page featuring 3 bootstrap accordions - "Stories", and "Testimonials". My goal is to make it so that when a user clicks on the "FAQ" link in the navigation menu, they are directed to the "About Us" page with the "Testim ...

jqueryhtmlcsstwitter-bootstrap

Creating a video game HUD effect using JavaScript and HTML5

In an attempt to recreate a video game HUD using HTML5, I have styled a div with CSS properties to resemble a game overlay. When a navigation link is clicked, the div should transition from a hidden state (display:none), then flash twice rapidly before fad ...

javascripthtml

Is there a way to give only the left corners of a button a rounded look?

Here is the visual representation of the button: https://i.stack.imgur.com/Bjlkp.png ...

htmlcss

I attempted to implement a CSS and Typescript animation for a sliding effect, but unfortunately, it isn't functioning

So I'm encountering an issue with this unique ts code: {/* Mobile Menu */} <div className="lg:hidden"> <button className="flex items-center w-8" onClick={toggleMenu}> {isMobileMenuOpen ? ( ...

cssreactjstypescriptcss-animations

What is the process for creating an if statement for product activation?

<form method="get" formenctype="text/plain" action="https://app.cryptolens.io/api/key/Activate" > <input type="text" maxlength="23" size="80" name="Key" placeholder="XXXXX-XXXXX-XXXXX-XXXXX" /> <input type="hidden" name="toke ...

javascripthtml

Batch Script for Reading and Writing HTML files

My experience with writing DOS Batch scripts has been limited to basic tasks. However, I recently encountered a need to create a script that reads an HTML template file and generates a new file from it. I successfully managed to store the file data in a va ...

htmlbatch-file