How to create a centered box in Bootstrap with an image and text floating to the side

Is there a way to center a box with a picture and two headlines floating to the right of it?

<div class="py-1 py-sm-5">
  <div class="box"> 
    <img src="img/logo_gross.png" class="mx-auto d-block col-lg-3 col-sm-6 col-8 img-fluid float-sm-left" alt="Dennis Pfeiffer Asslar - Dienstleistung Professionell">
    <h1 class="text-center text-sm-left"><span class="text-red">dienstleistung</span><span class="text-blue">professionell</span></h1>
    <h1 class="text-center text-sm-left"><span class="text-red">dennis</span> <span class="text-blue">pfeiffer</span></h1>
  </div>
</div>

Currently, everything is aligned to the left of the screen, but I want it centered. Using 2 x "col-6" is not a suitable solution as it won't be truly centered.

htmlcssbootstrap-4

Answer №1

Add a flex display to the container and set the justify-content property to center.

<div class="py-1 py-sm-5 d-flex justify-content-center">
  <div class="box">
    <img src="img/logo_gross.png" class="mx-auto d-block col-lg-3 col-sm-6 col-8 img-fluid float-sm-left" alt="Dennis Pfeiffer Asslar - Dienstleistung Professionell">
    <h1 class="text-center text-sm-left"><span class="text-red">dienstleistung</span><span class="text-blue">professionell</span></h1>
    <h1 class="text-center text-sm-left"><span class="text-red">dennis</span> <span class="text-blue">pfeiffer</span></h1>
  </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

Tips for reusing a form within a one-page website

I am looking for a way to handle a form's submit action using JavaScript. My goal is to hide the form when it is submitted and then be able to reuse it later. However, the code I currently have seems to have a hidden state that prevents the submit act ...

javascripthtmlforms

Just built a React App including a blog functionality, but for some reason the blog posts are not showing up. Any suggestions on how to fix this issue

I'm currently working on a project that involves creating a blog page for our react app. Despite my efforts, I am facing difficulty in getting the blog posts to show up. In order to retrieve all the posts from my MYSQL database, I have set up an API ...

javascripthtmlnode.jsreactjsexpress

How can I retrieve and manipulate the text within an option tag of a form using JavaScript?

<select name="products"> <option value=""> - Choose - </option> <option value="01">table</option> <option value="02">chair</option> <option value="03">book</option> <option value= ...

javascripthtmlforms

Tips for relocating anchor elements to less desirable locations

My website has an issue with anchor elements appearing too frequently and not in the desired location. I need someone to help fix this so there are only two anchors displayed. After checking my code, it seems like there are not more than the specified num ...

htmlcss

Searching for columns should be at the top of an angular datatable, not at the bottom

In my Angular 7 project, I am utilizing the library found at this link. I have followed the example provided, which can be seen here. Everything is working perfectly, except for the position of the search columns. I would like the search columns to appear ...

javascriptcssangulardatatablesangular-datatables

Exploring the functionality of setAttribute method in JavaScript

Snippet: activeCell.onclick = function() { console.log(element); element.value = this.value; console.log(element.value); console.log(element); }; Imagine activeCell as a span with value = "678", while element is represented by a simple in ...

javascripthtmlinput

JavaScript may fail to execute properly if the <!doctype html> declaration is not inserted in the correct syntax

While building a web page, I encountered an issue with my JavaScript code not working when using <!doctype html> or any type of <!doctype> at the top of the page. Can someone explain this error? After researching online, I learned that <!do ...

javascripthtml

Is there a way for me to have an image smoothly ascend as the caption rises?

I have put together the following html snippet: http://jsfiddle.net/4gDMK/ Everything is working smoothly, but I am struggling to figure out how to simultaneously move both the captions and the image upwards so that the entire image is no longer visible. ...

jqueryhtmlcss

What is the best way to center align an element while having another element situated directly below it?

I want to create a grid of "clock" elements, with five clocks in each row. Below each clock, I'd like to display the DAY and DATE centered with the clock (day on top line, date below). Since I'm new to html/css, I appreciate your patience. Here&a ...

javascripthtmlcss

Add HTML code to the dataTable

I am working on an ajax function that receives HTML response containing table data like this: <tr><td>data1</td>td>data2</td>td>data3</td></tr> My question is, can I add this response to a dataTable row in the fo ...

phpjqueryhtmlajaxdatatable

Is it possible to have square corners on the Vuetify Mobile Drawer component?

Currently, I am working with the Vuetify mobile drawer component and my goal is to give it square corners instead of the default rounded corners that are prevalent in Material design for all Vuetify components. While the Vuetify card component offers a " ...

cssvue.jssassvuetify.js

Interactive pop-up windows in Bootstrap

I encountered an issue with bootstrap modal forms where the form displays correctly after clicking on the button, but the area in which the form is displayed gets blocked! It's difficult to explain, but you can see the problem by visiting this link. ...

javascriptjqueryhtmltwitter-bootstrap

Automatically close one option upon opening another

Displayed below is the HTML code that I have printed with echo: <input id="58" readonly="readonly" class="cell_to_edit" value="Accepted"> <span id="58" class="toggle_status"> <select class="status_change"> <option>Ac ...

javascriptphpjqueryhtmlajax

The Jodit editor is appearing incorrectly

Encountering an issue with the jodit wysiwyg editor or any similar plugin editor while working within a Bootstrap tab. When adding an editor to the tab content, the display is incorrect upon selecting the tab (displayed at a fraction of the height and miss ...

javascriptcssbootstrap-4jodit

Eliminate any unnecessary zeros at the end of a number within AngularJS interpolation

Although there are solutions available for plain JavaScript code, unfortunately they are not applicable in this particular scenario. I have a table that needs to be populated with data. The current code snippet is as follows: <tr ng-repeat="rows in $ ...

javascripthtmlangularjs

Place unchangeable elements both preceding and following an input field

At first glance, this question bears a striking resemblance to this specific one. However, the original poster indicated that it remains unanswered, prompting me to inquire about its feasibility and implementation. Here is what I aim to achieve: I am seek ...

htmlcssreactjsjsx

Is there a way to obtain the Base64 data following the conversion of a div to an image?

I am not very experienced with JavaScript, but I wanted to convert a div to an image. I came across this helpful jsfiddle that showed me how to do it. $(function() { $("#btnSave").click(function() { html2canvas($("#widget"), { on ...

javascriptjqueryhtmlcanvaspng

How to create a CSS animation that gradually darkens a background image during a

Currently in the process of constructing a page with an intriguing background image: body { background:url(images/bg.png) center center no-repeat fixed; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; ...

javascriptjquerycsscss-animations

Sending data via Ajax using the multipart/form-data format

I am encountering an issue with a script that is not working correctly. When I submit the form without using the script, everything works as expected. However, when I use the script to submit the form, only the category and description are included in the ...

jqueryhtmlajax

Applying identical values to multiple properties (CSS)

Can we assign a single value to multiple CSS properties at once? border-left, border-right: 1px solid #E2E2E2; Similar to how we can with selectors? .wrapper, .maindiv { ... } ...

css