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:

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

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

What is the best way to customize the appearance of a form element within an angular-schema-form schema without affecting the overall

Currently, I am in the process of constructing a form using the incredible angular-schema-form. Creating the form schema object has been a success so far. My goal is to configure all the form components within the schema using the x-schema-form property in ...

cssangularjsionic-frameworkangular-schema-form

Adjusting the size of a Video/Image Slider to perfectly fit the screen dimensions (both width and height

I have been using a slider code to display my images and videos. The code can be found here: Code:https://codepen.io/1wdtv/pen/jbjZeb The issue I am facing is that the slider is only responsive in terms of width. This means that when resizing the browser ...

javascriptjqueryhtmlcss

ASP.NET Core MVC: Issue with Passing C# Razor Variable to HTML Tag

GitHub Repo: https://github.com/shadowwolf123987/Gun-Identification-App I'm currently facing an issue in passing the values of two C# variables from the code block defined in my view to the corresponding html tags within the same view. Unfortunately, ...

c#htmlasp.net-core-mvc

Is it feasible to incorporate two distinct images into a single element using CSS layering?

I have a question about setting a background image for a web page using CSS. Currently, I have the following code: body { font-size: 62.5%; /* Resets 1em to 10px */ font-family: Verdana, Arial, Sans-Serif; background-color: #9D5922; color: #000; margin ...

cssimagelayoutz-index

Performing a database update in MySQL using user-generated data

I am looking to update the selected status timestamps in the corresponding column based on the user's selection from the menu. Explanation I have created columns in the database as shown below. Initially, the user will insert the sonumber and s ...

phphtmlmysqldatabase

Changing the Div heights in Material UI with grid layout customization

I have a project that requires me to implement material-ui. Is there a way I can adjust the width and height of the div containing the "Sign In With" text (as shown in the first image) to bring the buttons closer to the text? Transformation from this: ht ...

javascriptcssreactjsmaterial-uistyled-components

The perplexing phenomena of Ajax jQuery errors

Hey there! I'm having a bit of trouble with ajax jquery and could use some guidance. $.ajax({ type:"get", url:"www.google.com", success: function(html) { alert("success"); }, error : function(request,status,error) { alert(st ...

javascriptjqueryhtmlajax

Implementing JSON data binding for webgrid in ASP.net MVC4

I am struggling to populate a webgrid with Datatable values using Json. I have implemented a DropDownlist to select a person's name, and based on that selection, I want to display the corresponding data in the webgrid. However, my current code does no ...

c#asp.netasp.net-mvcjsonasp.net-mvc-4

Tips for centering text in a dijitTextBox:

Ensure that the text is centered vertically with left padding and placeholder text included Check out the image link below: https://i.stack.imgur.com/PbHDa.jpg Snippet of my xPage code: <xe:djTextBox id="djTextBoxSearch" style="width:100%;height: ...

cssdojoxpagesdijit.form

Tips for encoding a base64 string into formats such as PDF, doc, xls, and png using jQuery, JavaScript, and HTML5

Need help handling base64 strings received from the server to save files in multiple browsers (IE, FF, Chrome). If receiving a PDF base64 string, how can it be saved in the browser? Also, if receiving an Image or Doc base64 string, what is the process fo ...

javascriptjqueryajaxhtml

jQuery regex failing to display latest changes

I am running into some issues with my custom jQuery snippet that is supposed to dynamically display the results. Each H2 tag contains an image, and I want to ensure the image is positioned correctly next to the word "test." Here is the script in question: ...

htmljqueryregex

Is there a way for me to increment the value of 'sessionStorage.fgattempt' whenever either 'fgMade()' or 'threeMade()' are called?

Currently, I am developing a basketball game stat tracker and need to update the field goal attempts every time I make a field goal or three-pointer. Additionally, I am looking for ways to optimize the javascript code provided. The main requirement is to ...

javascripthtmlcss

What is the best way to align the <text> element within an SVG's parent <g> element?

I'm currently developing a booking tool that requires users to choose a desk on the map by clicking on it. Each desk is enclosed in its own group (<g>) with specific elements like <title>, <path>, and <text>. The issue I' ...

htmlcsssvg

Place a div on top of a table

I am facing a challenge with table rows and divs. The height of the table row is set to 100px, while divs can be up to 200px. I want the div to overlay the table and cover the bottom row if it exceeds the row's height. Currently, I have achieved this ...

htmlcss

Creating a dynamic and adaptive horizontal SVG line for your website

Understanding how SVGs function is still a bit unclear to me. I know that the viewBox property plays a role in scaling SVGs, and I have come across advice suggesting not to specify height and width attributes when creating responsive SVGs. While there are ...

htmlcsssvg

Is the appearance of the Select Box altered when using Opera browser?

Here is the outcome I am hoping for. It displays correctly in Chrome, IE and FF: However, this is what I see when using Opera: Check out the demo site: Can anyone offer assistance? ...

htmlcsscross-browseropera

Is there a way to seamlessly transition between different Angular components without having to refresh the entire webpage?

I'm currently working on implementing a navigation bar that allows users to switch between three components without having the navbar reload. The goal is for only the new component to load when the user clicks on a different section of the navbar, kee ...

htmlangulartypescriptcomponents

Is it possible to apply a CSS transform without erasing the existing transform?

Looking for a solution: elem transform translateY(5px) scale(1.2) I want the element to move down an extra 5px on hover elem:hover transform translateY(5px) Is there a way to achieve this without knowing the previous state of the transform? Appr ...

csstransform

Unlocking the Interactive Potential of CSS Across All Screen Formats

I am currently working on transforming my website into an engaging and interactive platform. My first challenge: The alignment of the logo image does not meet my desired specifications. Whenever the screen width exceeds 1200 pixels, there seems to be exc ...

phphtmlcssinteractive

Is it possible to utilize the addition assignment operator (`+=`) to modify the `transform:rotate('x'deg);` CSS property using

This is the code I have been working on: #move{ height:70px; width:70px; border:2px solid black; border-radius:15px; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <input type="button" val ...

javascriptjquerycsstransform