I'm having trouble getting my paragraph to center with both Bootstrap 4's margin:auto and text

I've been trying to center a paragraph in my project but it's not working out.

I attempted using margin:0px auto; and the text-center features, but they didn't have the desired effect.

<div class="row text-center">
   <p>
You can contact us using the form below for more information or questions.<br>
We will get back to you within 24 hours for sure.
  </p>

</div>

Here is the CSS code:

.team-content p {

    font-family: 'Roboto Slab', serif;
    font-size:16px;
    color:#777;
    margin:50px auto;   

}

Screenshot:

I used a container div for these circles and applied the col-sm-6 class.

Furthermore, I tried adjusting the spacing between the circles by using padding-left and padding-right with matching values. However, this caused issues with responsive display.

htmlcssbootstrap-4

Answer №1

If you're facing your initial issue, simply utilize justify-content-center

<div class="row justify-content-center">
   <p>
For further information or for any inquiries, feel free to reach out to us using the contact form below.<br>
Rest assured, we will get back to you within 24 hours.
  </p>
</div>

Ref: https://getbootstrap.com/docs/4.3/utilities/flex/

To address your second query, you can opt for float-right for the first circle and float-left for the second one.

<div class="row">
   <div class="col-md-6"><span class="circle float-right"></span></div>
   <div class="col-md-6"><span class="circle float-left"></span></div>
</div>

Answer №2

Your text appears centered, as evidenced by the alignment of the second line not being to the left. This issue likely stems from the incorrect width applied to the paragraph or div containing the text. Fortunately, there are several solutions available depending on your desired visual outcome.

If you are unsure about where the width is set, consider establishing the width of both the div and p elements to 100%:

div {
  width: 100%;
}

Alternatively, you can set the width of the p element to 100%:

p {
  width: 100%;
}

To center the elements, it seems that a margin of 50px auto; is already applied to the p. In this case, try applying it to the div instead:

div {
  margin: 0 auto;
}

Remember to assign these corrections to unique classes or IDs to prevent them from affecting every instance of a div, p, or bootstrap class like row.

Answer №3

It works perfectly

<div class="row justify-content-md-center">  insert your content here </div>

Answer №4

To align the content in the center, simply include justify-content-center within the div element with the row class.

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

Position the larger element in the center of the smaller container element

Is there a way to center an image without it covering up the paragraph below? Using position: absolute; or float: left; can lead to layout issues. <p>This is the first paragraph</p> <p><img src="http://placekitten.com/600/280"/>&l ...

htmlcss

Tips for preventing a page from automatically scrolling to the top after submitting a form

Recently, I set up a form where users can input values. The form is set to submit either on change or when the user hits enter, depending on which value they want to update. However, after the values are submitted, the page automatically jumps back to the ...

javascriptphpjqueryhtmlforms

When the left/top/right/bottom properties are not specified, using position:fixed produces the desired results in Firefox and Internet Explorer, but not in Safari

It's unfortunate that I have to bring up another question related to position:fixed, but after going through various other questions and forum threads, I'm still not clear on this particular issue. The code below is a simple illustration of how ...

csscss-position

Javascript keycode used to target the element when a key is pressed

In my current project, I am utilizing a code snippet to attach a KeyDown event handler to any element within the HTML form. for(var i=0;i<ele.length;i++) { ele[i].onkeydown = function() { alert('onkeydown'); } } I am ...

javascripthtmldom

The Jquery Addclass function is not functioning properly

I have been struggling with this code as it seems to not be working in any browser, including IE, Chrome, and Firefox. I suspect that the system should add a class, so I checked the DOM using Chrome's console. I did see the class being added, but ther ...

jquerycssjquery-animateaddclass

Tips for accurately aligning a relative p tag within a td

Description: I am trying to prevent text overflow in a table cell and position the text underneath a header without wrapping it under an image. I have tried setting a static width for the image and adjusting the left property, but it is not working as expe ...

htmlcsshtml-tableposition

Tips for assigning a class to a div based on the route in Angular

In my angular template, I have a basic ng-repeat with some div elements. Now, I am looking to add a class to a specific div if the $routeParams.userId matches the id of the object in the loop. You can refer to the second line of code below for clarificatio ...

javascripthtmlcssangularjstemplates

What is the purpose of applying the two unique class names (root and disabled) to the DOM in order for it to function correctly?

When it comes to customizing components using material-ui, the process can be a bit tricky. Here's how you can do it: const styles = { root: { '&$disabled': { color: 'white', }, }, disabled: {}, // This is i ...

cssreactjsmaterial-uijsscss-specificity

Tips for aligning an element vertically when it has a float using CSS or JavaScript

I am struggling with centering the image within the article list loop I created. The code snippet looks like this: <article class="article <?php if($i%2==0) { echo 'even'; } else { echo 'odd'; } ?>"> <section class ...

javascriptjqueryhtmlcss

What is the best way to make my button sticky across different screen sizes on my webpage?

I'm having trouble figuring out how to make my purple button sticky and responsive on the right side of the screen as I scroll down. Can someone help me with this? This is the snippet of my HTML code: <Col className="colPre"> ...

htmlcssreactjs

Preserve the original position of the inner <div> when animating the container <div> using JQuery

I am currently working on a small website and encountering some challenges with jQuery animation. My issue involves placing a single character text inside a circle and wanting it to grow when the user hovers over it, while keeping the inner text in its ori ...

javascriptjqueryhtmlcss

How to Retrieve Multiple Values by Passing Arguments using AJAX, PHP, and MYSQL

I am currently working on developing an ajax Based Search feature. This is just a demo showing how it will function. However, I have encountered an issue with returning the results. I want to display the result twice, but it is only appearing once. Below i ...

phpmysqlhtmlajaxjquery

How about, "Enhance your website navigation with a sleek anchor

After many attempts to implement smooth scrolling on my Bootstrap project, I have tried numerous Youtube tutorials and Google search results without any success. The latest attempt I made was following this Stack Overflow post Smooth scrolling when clickin ...

javascripthtmlcssbootstrap-4smooth-scrolling

Choosing an element within a table following a different element using Selenium

On a webpage, a table displays various plain text elements (filenames) on the left side and hyperlinks to PDF files on the right: Red report Download PDF Blue report Download PDF Green report Download PDF These pages have multiple entries, and t ...

htmlselenium

Tips for closing the navbar by clicking elsewhere on the page

Is there a way to modify my code in order for the navbar to close when clicking outside of it, while staying open if something inside it is clicked? $(document).ready(function() { $('.nav-btn').on('click', function() { $('.na ...

javascripthtmlcsstwitter-bootstrapbootstrap-5

Difficulties arise when dealing with card elements and scrolling on a

Currently working on an ecommerce simulation project for a course, I successfully implemented a featured section with cards. However, when it comes to scrolling, I am facing an issue where the cards overlap with my sticky navbar as I scroll down. If anyo ...

htmlcssbootstrap-4bootstrap-cards

The amazingly efficient Chrome quick find feature, accessible by pressing the powerful combination of Ctrl + F, ingeniously

Currently using Google Chrome version 29.0.1547.62 m. I've employed the CSS attribute overflow set to hidden on the parent element, which renders some of my DIV elements hidden from view. Additionally, these concealed DIV elements are adjusted in pos ...

javascripthtmlcssgoogle-chrome

Tips for showing the chosen value of a ModelChoiceField in Django

Is there a way to display only the selected value from a forms.ModelChoiceField on a view page? I'm struggling to find a clear solution as a Python newbie, despite searching through various forums. Here is the form code snippet: class Manufacturer1F ...

pythonhtmldjango

I am encountering difficulties in accessing my component's property within the corresponding template while working with Angular 5

When I call an HTTP POST method to retrieve table names from the backend, I attempt to display them in the template using ngFor. However, the table names are not appearing on the screen. The tNames property is inaccessible in the template. As a beginner i ...

htmlangulartypescript

CSS error: Menu hover glitch concealed

I'm currently facing an issue with the navigation on my website. Whenever I place a logo image above the menu, the hover effect of the menu stops working correctly. To clarify: the background doesn't change on hover, but the border does. Here are ...

htmlwordpresscss