How can I vertically align text using custom CSS in Bootstrap?

As I attempted to incorporate some custom code into Bootstrap, I encountered an issue where the text within the frame was not perfectly vertically centered.

Despite the simplicity of the code with only a few lines, I struggled to achieve vertical centering. You can view how it appears on jsfiddle:

http://jsfiddle.net/atJzD/1/

When I exclude the Bootstrap CSS, the text aligns perfectly in the center. However, I require the use of Bootstrap for this project.

.init {
    border:2px solid #EEEEEE;
    font:14px/1.3 Verdana,"Lucida Grande",Arial,Helvetica,Sans-Serif;
    margin:0px;
    padding:5px;
    min-width:120px;
}

.alignleft {
    float: left;
}
.alignright {
    float: right;
}

.taken span {background:none repeat scroll 0 0 #F08F78; }
.taken:hover{background:none repeat scroll 0 0 #FFC5B7;}

Answer №1

To customize default bootstrap classes, you can use the .init class to override certain properties. For example, you can create a custom alert message like this:

.init {
    border: 2px solid #DDDDDD;
    font: 16px/1.5 Arial, sans-serif;
    margin: 0;
    padding: 10px;
    min-width: 150px;
}

.alignleft {
    float: left;
}
.alignright {
    float: right;
}

.custom span {background: #88C3A9; }
.custom:hover{background: #B7E4D7;}

Check out a live demo Here

Answer №2

Try this out for size:

.init {
    border:1px solid #CCCCCC;
    font:16px/1.4 Arial,Helvetica,Sans-Serif;
    margin:0;
    padding:10px;
    min-width:150px;
}

.alignleft {
    float: left;
}
.alignright {
    float: right;
}

.selected span {background:none repeat scroll 0 0 #A3D9B4; }
.selected:hover{background:none repeat scroll 0 0 #7DCBA8;}

p {
    margin: 0;
}

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

Assistance needed for disabled JavaScript

I'm currently working on a small application where I need to display some text wrapped in 3 divs. The goal is to only show one div at a time and provide users with prev and next buttons to switch between them. However, when JavaScript is disabled, I w ...

Preventing an image from being repeated when using Canvas drawImage() without having to clear the entire canvas

How can I prevent multiple instances of the same image from smearing across the canvas when drawing it? The platforms seem to stick together and not separate properly. Why do I have to clear the entire rectangle for everything to disappear? Does anyone ha ...

An upright section embellished with a mirrored image design on both ends

I am currently working on creating a unique div layout that resembles a piece of paper, similar to this imagehttps://i.sstatic.net/mFq3l.png. However, I am looking to make it a vertical design with the random curly edges on the left and right sides like i ...

The text area within the input group is misaligned with the input group button

Here is an example of how I'm using the input group feature with Bootstrap: <div class="input-group" style="padding-left: 20px;"> <input type="text" name="s" class="form-control input-sm"> <span class="input-group-btn"> ...

Inline-block display for file input button in Bootstrap 4 style

I have added an input file button and I am trying to make it full width using display:block. Even after hiding the input field, I am not seeing any difference. Here is the relevant code snippet: <link href="https://stackpath.bootstrapcdn.com/bootstra ...

The jQuery "Chosen" select accordion is experiencing the issue of its height becoming too large and then snapping back into place

I have integrated jQuery Chosen with a Twitter Bootstrap Accordion. The issue of the Chosen dropdown being clipped by the accordion body has been resolved by referring to solutions provided in this thread. However, I am still encountering another problem w ...

Would it be possible for me to adjust the CSS to center the sections?

I'm facing an issue with the layout of my website at . At the bottom, there is a navigation menu and three boxes with images. However, they are currently left-aligned instead of centered. Can anyone suggest CSS code that I can use to center them? Her ...

Is there a way to prevent the page's navbar from getting hidden under the slide animation? I want to display the navbar separately at the top, with animations working as usual

I'm struggling with getting my navigation bar to work properly alongside a slide animation. No matter what I try, the navbar keeps overlapping. Here's the code I have so far: Here is the HTML section: Navbar section: <ul class="slidesho ...

Ensure that the child div remains at the bottom of the parent div

I'm trying to make sure that the subfooter div stays at the bottom of the childbox div like a footer. You can see the code on this jsfiddle link <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> <title ...

Attempting to customize react-bootstrap styling within a NextJS application

I'm currently working on a project using Next.js and attempting to integrate Bootstrap as the CSS framework. After installing react-bootstrap into the project, I proceeded to create the navigation bar. My goal is to assign an '.active' class ...

Automatically adjust the size of embedded video streams within DIV elements

My application is quite simple, it displays four video streams in a quadrant layout. Users can double click on each video to switch to full-screen mode and then again to go back to the quadrant view, which all works perfectly. The issue I'm facing in ...

Transform the HTML content into a JSON format file

I'm currently developing an online marketplace and trying to convert all product information like name, price, and description into json format. I have a sample code featuring a selection of products displayed in rows. <div class='cakes'& ...

"Comparing Bootstrap 3.x.x and Alpha 4 - Unveiling the Wizard's Flaws

I recently created a Bootstrap 3.3.1 wizard using Bootply. However, upon trying to embed it into a site that runs Bootstrap 4.0, the wizard breaks. This has led me to wonder if the wizard function is no longer supported in Bootstrap 4.0, as the appearance ...

How to Use jQuery Slice to Display the Top N Items from a Dropdown Menu

How can I display only the top 10 results from multiple UL lists in my navigation? The code snippet provided below currently works for the first list, but how can I extend this functionality to all of the lists? $(document).ready(function() { var elem ...

Having trouble with the burger menu not opening while using javascript

Whenever I click the burger_btn, it changes to cross_btn. however, the list menu fails to appear on the screen. In an attempt to debug this issue, I inserted console.log() statements at the beginning and end of both functions. Surprisingly, the console.log ...

fullpage.js supports triggering multiple onLeave and afterLoad events for different sections

I'm facing an issue while trying to incorporate multiple afterLoad and onLeave events in my fullpage.js for different sections. It seems like only the last one I set up is functional. What could be causing this problem? Interestingly, when I remove t ...

Displaying Edit and Delete options upon hovering over the data row

I'm working on a table that uses ng-repeat on the <tr> element. In the last column of each row, I have edit/delete links that should only be visible when the user hovers over the <tr> element. <tr ng-repeat="form in allData | filter:se ...

Exploring the inner workings of CSS shapes

http://jsfiddle.net/zth05v3q/ div { background:red; width:100px; height:100px; } div:after{ content: ''; position: absolute; display: block; border: 40px solid green; border-left-width: 15px; bord ...

Fixed-top navigation bar in Bootstrap

Currently working on constructing a Single Page Application (SPA) using Bootstrap, where the navbar is fixed-top. Encountering an issue where content gets cut off by the navbar unless setting the element margin-top to 58px. Although using the specified sty ...

Modification of a CSS element

The CSS I am working with looks like this: .cls .imageX { float:left; } .cls .imageY { float:right; } It is currently being used on a page in this way: <div class="cls"> <a href="" class="imageX"><img src="left.png"/></a> &l ...