Utilize Bootstrap to align text between floating elements

I am having an issue with positioning 3 objects in one row. There is text between two images on the desktop, but it looks great on mobile. I need a solution, can anyone help?

Here is my code:

<div class="pull-left hidden-xs">
    <img src="images/head_window.png" class="img-responsive">
</div>
<div class="header_title">
    <h2 class="align-right">åpnes i<br/>
          eller<br/>
          åpne ut
    </h2>
</div>
<div class="pull-right hidden-xs">
    <img src="images/head_window2.png" class="img-responsive">
</div>

CSS:

.header_title {
    margin:90px auto 0px; 
    width: 32%; 
    text-align: center;  
    padding: 0px; 
 }
.header_title h2 {
    font-family: 'Arimo', sans-serif; 
    font-size: 73px;
    color: #004657; 
}

Answer №1

Consider implementing columns in your design to make use of Bootstrap's features.

 <div class="col-sm-5">
      <div class="pull-left hidden-xs">
        <img src="images/head_window.png" class="img-responsive">
      </div>
    </div>
    <div class="col-sm-2">
      <div class="header_title">
        <h2 class="align-right">åpnes eller åpne ut</h2>
      </div>
    </div>
    <div class="col-sm-5">
      <div class="pull-right hidden-xs">
        <img src="images/head_window2.png" class="img-responsive">
      </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

How to perfectly position an image within a fixed full screen container

When you click on a thumbnail image, a full-screen overlay with a larger version of the image will be triggered using JavaScript. To ensure that the image is centered and resized inside the black overlay when the browser window size changes, I attempted t ...

When using HTML select, text alignment may not be centered properly in the Chrome

Recently, I encountered an issue where the text in select options is not centered in Chrome. Interestingly, using text-align: center on the select element works perfectly fine on Firefox, but fails to do so on Chrome. I haven't had the chance to test ...

children in CSS grid expanding beyond grid boundaries

I am facing a challenge with my grid layout where the children's content needs to be scrollable. The grid is sandwiched between a header and footer, as illustrated below: <div class="app"> <div class="header"> Header </div> ...

Pattern matching for CSS class names

My current project involves creating a PHP function that will sift through CSS and JS files, swapping out class names and IDs in CSS selectors without touching the HTML elements or CSS properties themselves. Alas, my knowledge of regular expressions is sev ...

Customize your t-shirts with our unique online printing service that allows you to remove the

Looking to update my image upload onto a t-shirt platform. I've been successful so far, but now I need to remove the color white from uploaded images in order to eliminate the background color. Unfortunately, Flash is not an option for me. The upload ...

How to dynamically set a background image using Ionic's ngStyle

I've been trying to set a background image on my card using ngStyle Take a look at my code below: <ion-slides slidesPerView="1" centeredSlides (ionSlideWillChange)= "slideChange($event)" [ngStyle]= "{'background-image': 'ur ...

What is the best way to showcase a variable amount of information using just one popup box?

I currently have a section dedicated to showcasing various projects. Each project is represented by an image, and upon clicking on it, a popup box will appear with more detailed information about that specific project. Issue at Hand The challenge I am fa ...

I'm experiencing an issue where articles are not appearing as inline objects on my page

I need assistance in figuring out why my articles are not displaying in one line, even though they are set to be inline-block elements (each article includes an image, h3 text, and a paragraph). Below is the CSS code I am using: #article_1{ width: 1000 ...

What could be causing my CSS to malfunction when I include two parameters in app.get?

While developing an express app, I encountered an issue where my CSS code stopped working whenever I added an ":ID" parameter to the URL. It seems like a filepath problem because bootstrap is still loading fine, but on the specific page with the ID paramet ...

Gradual appearance animation upon webpage load

I am attempting to create a fading effect on my homepage that is consistent every time it loads. Unfortunately, the current script I have only seems to work sporadically. The code I am currently using sets the fade effect on the html element since applyi ...

Is there a way to achieve a two-column layout using flexbox while maintaining consistent spacing between items in each column?

Hey there! I could really use some assistance. I'm attempting to create a two-column layout with consistent spacing between items in the same column. https://i.sstatic.net/hb5bT.png .flex { margin: 0; padding-left: 0; list-style: none; disp ...

Ways to gradually reveal all elements within a header section

Is there a way to gradually reveal all the components in my header once the window has finished loading by utilizing jQuery's fadeIn function? Below is the pertinent code snippet: HTML <div class="banner"> <header class="header"> < ...

Menu remains open even after clicking the nav button again

I've been searching extensively, but haven't found a straightforward solution to the issue. When I click the button, it opens but doesn't close again. Any suggestions on what might be missing? Thanks in advance. <nav class="navbar navbar ...

Creating a dynamic radio button group with buttons

Currently, I am occupied with crafting some helper functions for my colleagues in the office who are not very familiar with Bootstrap. This involves taking basic HTML and transforming it into Bootstrap layouts. Specifically, I am working on creating a jus ...

jQuery enhanced login panel

Looking to create a unique login box or panel similar to the one featured in this tutorial:Check out the 'subscribe' section at the top right I need a panel like this but with a twist. I want it to open using a slide effect with jQuery or anothe ...

Switching the visibility of a DIV by clicking on a list item

Struggling with a seemingly simple function for way too long now. The task is to show a hidden div with information on an item when it's clicked, without using jQuery. Tried multiple examples from various sources but nothing seems to work. Hoping for ...

What is the process for making a button that only consists of text?

Is there a way to design a button that displays text like a hyperlink, but still maintains the <button> characteristics? ...

Simple math operations in GWT CssResource

I need help achieving a similar result to the following: // design.css @define borderThickness '2px'; .format { width: borderThickness + 2; height: borderThickness + 2; } The desired output is for the width and height properties to equal 4 ...

Troubleshooting problem with arrow in Bootstrap accordion

I'm currently developing an accordion feature, and I've encountered a problem where the arrow on the right side of each collapsed section is not visible, although it's still present. I suspect there might be some styling issues causing this ...

unique hyperlink to an external style sheet

element, I came across this line in the header of a web page that was generated by a program. Any thoughts on what significance the number and ID serve in this stylesheet link? <link rel="stylesheet" type="text/css" href="css/contact.css?4131768016" ...