Label text will not be wrapped in front of the label (bootstrap)

I'm struggling with some css coding. I want the text to wrap so the label is positioned on the middle right of the box, similar to this example: . However, currently it looks like this: http://jsfiddle.net/yuvemL1z/ and the label ends up being pushed under the text. Any assistance would be greatly appreciated. Thank you.

<div class="container">
    <div class="row">
        <div class="col-md-4">Text Test Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<span class="label label-default pull-right">New</span></div>
        <div class="col-md-4">Text</div>
        <div class="col-md-4">Text</div>
    </div>
</div>
h4 {
    margin-top: 25px;
}
.row {
    margin-bottom: 20px;
}
.row .row {
    margin-top: 10px;
    margin-bottom: 0;
}
[class*="col-"] {
    padding-top: 15px;
    padding-bottom: 15px;
    background-color: #eee;
    background-color: rgba(86,61,124,.15);
    border: 1px solid #ddd;
    border: 1px solid rgba(86,61,124,.2);
}
hr {
    margin-top: 40px;
    margin-bottom: 40px;
}

Answer №1

To add a text container element, follow these steps:

<div class="col-md-4"><div class="innertext">Text Test Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</div><span class="label label-default pull-right">New</span></div>

Next, customize the .innertext div with this styling:

.innertext{display:inline-block; width:90%}

Check out the fiddle here!

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 are some strategies for efficiently positioning buttons using CSS to prevent unwanted consequences?

Below is the CSS and HTML code, detailing a specific issue. * { box-sizing: border-box; font-family: Georgia, 'Times New Roman', Times, serif; } body { margin: 0; font-family: Georgia, 'Times New Roman', Times, serif; } .topn ...

Creating a for loop using jQuery to append the value of [i] to the string "id" for the element

As a newcomer to programming, my code may not be the best. I am attempting to automate game results (1 / X / 2) based on the input of home and away goals in a form. To achieve this, I need assistance with my jQuery for loop. Here is the current code: for ...

Add the AJAX response to a div element when the submit button is pressed

Working on a WordPress project involving an AJAX call, I need to return the result of a row to a div with the ID #hero. The challenge is that since the result is inside a for loop and each row has its own hero div, I want the result to be returned to the c ...

Unique content on a web page when it is loaded with HTML

Is there a way to dynamically load various content (such as <img> and <a>) into divs every time a page is loaded? I've seen websites with dynamic or rotating banners that display different content either at set intervals or when the page ...

Stop text from overflowing when it reaches the maximum width in flexbox

A basic flexbox layout is displayed with an image next to text, aiming for this layout: #container { align-items: center; background: black; display: flex; justify-content: center; padding: 10px; width: 500px; /* Dynamic */ } #image { bac ...

The jQuery validation feature is failing to function properly within a bootstrap modal

I'm facing an issue with the jQuery validation plugin in my express app sign-up form that uses Bootstrap for the front-end. Despite setting rules and messages for name, email, and phone number fields, the validation is not functioning correctly. Below ...

Implementing jQuery to enable the selection of multiple options depending on user input

Assume that when the people input value is 1, then the options for values 1 and 2 will be selectable. However, if the people value is greater than 1, then all other options will become selectable. Is it feasible to enable multiple select options based on ...

What is the best method for placing an element above all other elements on a page, regardless of the layout or styles being used?

I want to create a sticky button that remains fixed on the page regardless of its content and styles. The button should always be displayed on top of other elements, without relying on specific z-index values or pre-existing structures. This solution must ...

Create a container-fluid design in Bootstrap with various colors

I am aiming to create a design with a fluid container featuring different background colors on each side, separated by two columns within the container. I have visualized it in this image - do you think it is feasible? https://i.stack.imgur.com/KRc2Q.pn ...

Adjusting image alignment and formatting long text with CSS in Firefox

I'm attempting to float an image and text within a paragraph, but encountering an issue when the text is long and in one line. The display appears fine in Chrome, but not in Mozilla Firefox. You can view the problem here: In Chrome, it looks like thi ...

What seems to be the issue with Collapse.js in Bootstrap 3.3.4 on this page?

I am currently utilizing Bootstrap version 3.3.4. All of my resources are linked relatively and the HTML file is in the correct location for access. I am creating a 'Learn More' button that should display a collapsed unordered list either above ...

Conceal div elements and retain their status when the page is reloaded or switched

I currently have 3 div elements displayed on a webpage: header-div fixed_menu_div page_cont Each of these divs are styled with the following CSS properties: #header-div { top:0; left:0; display:inline; float:left; } #page_cont { mar ...

Determining the container height for every two-image row

I am currently working on a project for this website. My focus right now is on resizing vertical images using the following script: function Gallery(selector) { this.add_module = function (type, image) { var portrait_text = image.next('.portr ...

Hide the 'white' color on visited links and category tags in the WordPress blog page

I created a custom WordPress theme, and I am having trouble styling the bootstrap navigation. I want the text to be white and change to brown when selected. However, my attempts to add a separate class for H1 tags on the blog post page have not been succes ...

Merging HTML Array with jQuery

I am working with input fields of type text in the following code snippet: <input type="text" minlength="1" maxlength="1" class="myinputs" name="myinputs[]" > <input type="text" minlength="1" maxlength="1" class="myinputs" name="myinputs[]" > ...

Utilizing absolute and relative positioning for setting up a flexible sidebar layout

I'm finding myself a bit puzzled when it comes to using Absolute and Relative positioning. In essence, I have a sidebar with about 4 divs in it. My goal is for div 3 to stay in the same position on every page, even if div 1 or div 2 are missing and c ...

Enhance your SVG image in D3 by incorporating a drop-shadow effect

Trying to apply a drop-shadow effect to an SVG image using D3. Check out my code below and see the example block here: var imgurl = 'http://www.logo-designer.co/wp-content/uploads/2015/08/2015-Penn-State-University-logo-design-4.png'; var mar ...

Tips for showcasing a lineup horizontally with HTML and CSS

I'm currently working on creating a menu using HTML. I've included my links in an unordered list (ul) as shown below. In my CSS, I added a display:inline; property to the links to make them appear side by side like a menu. However, for some reaso ...

Effortlessly implement CSS styling in a scoped shadow element with Vue3

I am facing an issue with applying styles to an anchor element in my code. Below is a snippet of the code: <template> <custom-button> #shadow-root (open) <a href="#"></a> <other-custom></other-c ...

Tips on snapping pictures using an html5 camera without encountering security prompts

Is there a way to capture an image from a webpage without triggering security warnings? The webpage where I need webcam functionality cannot be switched to HTTPS protocol. I have already installed root certificates and made them trusted, but still no succ ...