Achieving Text Centering and Right-Aligned Image in a Single Div with Bootstrap 4

Text                            Image

I'm having trouble aligning the text in the center and the image on the right using Bootstrap. Here's my HTML code:

<div class="english-Box">
    <h1 class="text-center color-English">English</h1>
    <img class="eng-Img" src="images/abc.png"></img>
  </div>

And here's my CSS code:

.eng-Img {
    float: left;
  }
  .color-English {
    padding-top: 14px;
    color: #7952b3;
    font-family: 'PT Sans', sans-serif;
    font-size: 25px !important;
    letter-spacing: 2px;
  }
  .english-Box {
    border-radius: 5px;
    border: 1px solid #7952b3;
    height: 60px;
    width: 20%;
    display: block;
    margin: 0 auto 80px auto !important;
    float: none;
  }
jqueryhtmlcsstwitter-bootstrap

Answer №1

If you're utilizing bootstrap, take advantage of the float classes it offers. Simply add the 'float-left' class to your 'h1' element and 'float-right' to your 'img' element for the desired effect.

<div class="english-Box">
    <h1 class="text-center color-English float-left">English</h1>
    <img class="eng-Img float right" src="images/abc.png"></img>
</div>

Additionally, in your CSS, assign a width to the 'h1' element. This will ensure that the text within the 'h1' remains centered within the set width.

.color-English {
  width: 70%;
}

Answer №2

To align your image to the right, add the pull-right class like this:

<img class="eng-Img pull-right" src="images/abc.png"/>

Remember that the img tag is self-closing and should end with >, there's no need for </img>.

You can use Bootstrap's Grid System to structure your div elements as follows:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<div class="english-Box row">
  <div class="col-xs-10">
    <h1 class="color-English text-center">English</h1>
  </div>
  <div class="col-xs-2">
    <img class="eng-Img pull-right" src="images/abc.png" />
  </div>
</div>

Answer №3

Revise your code by incorporating the following HTML :

<div class="container">
<div class="english-Box">
    <h1 class="text-center color-English">English</h1>    
</div>
    <img class="eng-Img" src="images/abc.png" />
</div>

along with CSS styling :

.container{
  position : relative;
  width : 100%;
}
.eng-Img{

   float:right;
  }
.color-English{
    padding-top: 14px;
    color: #7952b3;
    font-family: 'PT Sans', sans-serif;
    font-size: 25px !important;
    letter-spacing: 2px;    
  }

  .english-Box{
    position:absolute;
    border-radius: 5px;
    Border:1px solid #7952b3;
    height: 60px;
    width:20%;
    display: block;
    margin:0 auto 80px auto !important;
    left:50%;

  }

Enclose all content within a container class, utilizing positioning to set the content wrapper as relative and its content as absolute.

This adjustment should be beneficial.

Answer №4

To align your image to the right in bootstrap 4, use the class float-right. In bootstrap 3, you would use pull-right.

<img class="float-right eng-Img" src="images/abc.png"/>

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

Inject JSON data into a JavaScript array

I am dealing with a JSON file in the following format: [{"excursionDay":"2"},{"excursionDay":"3"},{"excursionDay":"4"}] My goal is to extract the values of excursionDay and store them in an array in JavaScript like this: dayValues = [2,3,4] Here is m ...

javascriptjqueryjson

Can a Data Table and a grid be combined within an MVC View?

Is it possible to display data from a database table in a 2x3 grid format, which can be paginated for easy navigation without having to list everything vertically? I currently have the following code that displays all the data one after the other, but I wo ...

htmlasp.net-mvcasp.net-mvc-4

"Securing digital signatures by storing them as base64 encoded data in the

What is the most efficient way to store a base 64 encoded signature in a MySQL database? I've discovered that some of my signatures are larger than the character limit for varchar. I am currently utilizing jSignature to collect the string. Is this th ...

jquerymysql

Create a PDF on-the-fly by leveraging Vuejs to dynamically pull data and design elements

Is it possible to create a form that captures name, expiry date, and picture, and upon submission generates a PDF document with the provided details? The PDF should be based on a design created by me and have the input data displayed in a specific location ...

phphtmlcsslaravelvue.js

Pixel information from previous canvas remains intact post resizing

I have crafted a canvas and loaded pixel data at specific locations using the following code snippet. let maskCanvas = document.createElement("canvas"); let patchWidth = 30; let patchHeight = 30; let scale = 3; maskCanvas.setAttribute("class", "mask"); ...

javascripthtmlcanvas

The usage of the "this" keyword in a function call is not

When I try to call a local function using the this pointer, I encounter an error message stating 'Uncaught TypeError: undefined is not a function'. The issue arises on line this.createtimetable(); within the loadtimetable function. The relevant ...

javascriptjquery

Enhancing Image Quality upon Hovering

Is there a way to prevent the content of the article from moving when an image becomes absolutely positioned? The issue I am facing is that the image overlaps its container with overflow: hidden only when the img is absolute positioned. article { back ...

htmlcssdom

Can you guide me in inserting space between two images along with headers and paragraphs utilizing bootstrap?

Trying to recreate a portfolio design from Codewell for practice, but struggling to create space between images without them stretching and the text disappearing. Even using display: flex and justify-content: space-between ends up stretching the images. I ...

htmlcssflexboxbootstrap-5

Sending data to AJAX for XML retrieval

Struggling with fetching different nodes based on user-clicked links. One issue I'm facing is transmitting the variable to Ajax. Current Code: XML <?xml version="1.0" encoding="iso-8859-1"?> <modules> <module id="1"> < ...

jqueryxmlajaxxpath

Reduce the length of the text and display it upon hovering with the mouse

I am trying to figure out how to truncate text and have it expand on mouseover in a paragraph element. I attempted to truncate the content using a specific code, but I encountered an issue. While my current code expands the content when clicking on the el ...

javascriptjqueryhtml

issue with mobile toggle functionality in bootstrap 4

I have successfully implemented a mobile nav using Bootstrap 3, but now I am trying to upgrade to Bootstrap 4. I am testing with local versions of the files and I believe everything is set up correctly. However, the toggle on mobile is ...

jquerymobilebootstrap-4

Choosing the appropriate value for a link button within a gridview

I am encountering an issue with my gridview where I am attempting to select the value of a link button clicked on a specific row. The code I have provided below is causing errors due to improper selection of the link button in the gridview. Can someone ass ...

c#jqueryasp.netgridviewjquery-selectors

Circular shapes inside a button created without using a canvas in HTML and JavaScript

I'm looking to design a button similar to the one demonstrated in this example. While I like how it appears, I prefer not to use canvas as it is not visually pleasing. Is there a way to achieve this without using canvas, or should I stick with it? Be ...

javascripthtmlcsscanvas

Enclose each instance of "Rs." with <span class="someClass">

I'm facing an issue with the currency symbol "Rs." appearing in multiple places on my website. I want to enclose every instance of this text within <span class="WebRupee">. However, if it's already wrapped in <span class="WebRupee">, ...

javascriptjqueryhtmlweb

Determine if there is at least one element that is true in the array

I am currently working on developing a menu that can detect the active page based on the site's structure, which is purely PHP/HTML without any CMS. While I have successfully implemented navigation for primary links, I am facing issues with the dropd ...

phpcssarraysif-statementdrop-down-menu

Why are the items I have inserted inside my <div> tag not appearing on the screen?

What could be simpler than this: {this.state.dash ? <div className='dashWrapper slide'> HELLO </div> : null} I've tried everything, but nothing seems to show up inside the div. ...

cssreactjs

What steps do I need to take in order to create functions that are

I have 10 functions with similar structures: function socialMedia_ajax(media){ return ajaxRequest('search/' + media + 'id', media + 'id').then( function(res) { var imgStatus = res[1].length > 0 ? "c ...

javascriptjqueryfunctionloopsdynamic-function

How to customize the hover and active properties of a checked checkbox in Vue 3 using Tailwind CSS and PUG?

It seems that checkboxes have a level of sophistication that I never anticipated, or perhaps my brain just can't quite grasp the nuances of checkboxes. After spending a significant amount of time researching and experimenting with checkboxes in a Vue ...

cssvue.jscheckboxpugtailwind-css

Issue with Bootstrap 5 Dropdowns and Navs: Unable to access 'children' property of null

Whenever I try to use a dropdown button with Nav Tabs in the Navbar Component, I keep getting this Dev Console error message "Cannot read property 'children of null". Clicking on the dropdown item to display nav-link in navbar triggers the same Dev C ...

javascripthtmldropdownbootstrap-5

Utilizing personalized icons through importing a font in CSS

Looking to incorporate an icon into my CSS using the @import feature from a specific font found on . However, I'm encountering issues with the icon not loading properly. Any suggestions on what might be going wrong here? Thank you in advance! <div ...

css