Looking to have the content aligned in the center of the parent container while also

Below is the code snippet I am working on, which utilizes Bootstrap 4:

.resource{
  border:1px solid red;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="resource">
  <div class="container">
    <div class="row justify-content-center">
      <div class="wrapper d-flex flex-wrap justify-content-center">
        <div class="card col-5">
          <p>test1</p>
        </div>
        <div class="card col-5">
            <p>test1</p>
          </div>
        <div class="card col-5">
          <p>test1</p>
        </div>
      </div>
    </div>
  </div>
</div>

I would like to align the cards to the left instead of having them centered. Removing justify-content-center from the .wrapper will achieve this, but then the .wrapper won't be centrally aligned within the .container. How can I make both the .wrapper centered in the .container and keep the .card elements left-aligned?

htmlcssbootstrap-4

Answer №1

Can you clarify what you mean? The removal of justify-content-center will not impact the positioning of .wrapper within .container > .row.

The wrapper remains centered, while the cards are now aligned from the left.

Remember to use col-6 instead of col-5 to create a 2-column grid in Bootstrap, as the grid system is based on 12 columns not 10.

.resource{
  border:1px solid red;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="resource">
  <div class="container">
    <div class="row justify-content-center">
      <!-- removed "justify-content-center" -->
      <div class="wrapper d-flex flex-wrap">
        <!-- changed from "col-5" to "col-6" -->
        <div class="card col-6">
          <p>test1</p>
        </div>
        <div class="card col-6">
            <p>test1</p>
          </div>
        <div class="card col-6">
          <p>test1</p>
        </div>
      </div>
    </div>
  </div>
</div>

Answer №2

Do not include the class justify-content-center

<div class="resource">
  <div class="container">
    <div class="row justify-content-center">
      <div class="wrapper d-flex flex-wrap">
        <div class="card col-5">
          <p>test1</p>
        </div>
        <div class="card col-5">
            <p>test1</p>
          </div>
        <div class="card col-5">
          <p>test1</p>
        </div>
      </div>
    </div>
  </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

Identifying the completion of loading a HTML page using an object tag

I am trying to load an HTML page using an object tag, and once the page is fully downloaded, I want to display something. I have attempted the following approach, but it is not working: document.querySelector(".obj_excel").addEventListener("load", funct ...

javascriptjqueryhtml

Create a curve using two distinct colors in JavaScript

I am currently experimenting with a canvas and I have a specific challenge in mind. My goal is to draw an arc using two different colors, where the first half of the arc will be green and the second half red. Check out the code snippet below: // CANVAS co ...

javascriptcsscanvas

"Eliminating the visual feedback frame from your Samsung Galaxy browser: A step-by-step

After clicking a link, a dark orange frame is displayed around it. This frame can sometimes persist until the next scroll or screen touch. Similarly, when other elements are clicked, an orange frame may appear, adjusting in size to reflect the element cli ...

androidhtmlcssbrowsersamsung-mobile

What is the best way to have a form open upwards when hovered over or clicked on?

Attempting to create a button in the bottom right corner that will reveal a form when clicked or hovered over. The form should slide open slowly and close after clicking on login, but currently the button is moving down as the form opens. The button also ...

javascriptjqueryhtmlcss

The onKeyUp event is not functioning as expected in React, unlike the onChange event

For a React coding challenge, I am required to update a value onKeyUp instead of onChange. However, after changing it to onKeyUp, my fields are not updating and I cannot type anything into the textarea. class MarkdownApp extends React.Component { constr ...

javascripthtmlreactjsonkeyup

Various text sizes within a nested HTML list structure

I've developed a nested CSS class for an ordered list on my website, but I'm encountering a problem where each list item is appearing in different font sizes even though I have specified the font size. .number_list ol { font:normal 1.2em ...

htmlcsshtml-lists

Dynamic content moves unpredictably when adding or modifying TextBoxes or DropDownList items

Whenever I navigate from one textBox to another in my .aspx form, it starts jumping around. The problem is exacerbated when I switch focus to or from a DropDownList. I only have a few textboxes on the form and nothing complex like gridviews or labels. So ...

asp.nethtmlajax

Stop the replication of HTML/CSS styles during the extraction of content from a div

Is there a way to prevent the copying of CSS properties, such as font styles and sizes, when content is copied from a div? I want only the plain text to be copied to the clipboard, without any formatting applied. ...

javascripthtmlcss

Z-order for ClockPicker

Within my application, I've implemented a pop-up for inputting event data. One of the fields within this pop-up is for setting the time using the DateTimePicker from MUI. <Popup width={600} height={600} ...

csstypesmaterial-ui

Menu Selector on the Right Side

I am currently working on a drop down menu and trying to align it to the right using HTML and CSS. Below is an example that I have been referencing: http://codepen.io/anon/pen/RNLmvq Attached here is a screenshot of how the menu appears without the text ...

csshtmldrop-down-menu

Displaying modal popups limited to one per session

Is there a way to display this Dialog Popup only once per session? I have looked into using cookies for configuration, but haven't been able to implement it in this scenario: $(document).ready(function() { ShowDialog(true); e. ...

jqueryhtmlcsspopupmodal-dialog

Unable to select selectbox in the bottom section of Safari browser

There seems to be an issue with the selectbox being unselectable at the lower part in Safari. It's difficult to pinpoint the exact problem in the code. You can see the issue on the country selectbox by visiting this website: <span> <sp ...

htmlcsssafari

Creating dynamic email templates in Node.js

I am working on a project using the MEAN stack and I need to implement email functionality. I have created separate email templates, but I want to include a common header and footer in all of them. Route.js router .route('/api/user/register&a ...

javascriptnode.jshtmlexpressmean-stack

Text-color in the v-tooltip

Is there a way to change the text color of v-tooltips components without affecting the tooltip background color? I attempted to inspect the element, but the tooltip only appears on hover, making it impossible to inspect. Below is the code snippet: < ...

cssvue.jsvuejs2vuetify.jsv-tooltip

Tips for adapting CSS images on mobile devices without distorting the aspect ratio

Our website is not responsive, and one of the requirements is to ensure that images render properly on mobile devices to fit the screen. However, we are encountering an issue due to the varying sizes of images uploaded to the web page. Below is the CSS co ...

cssresponsive-design

The inclusion of float: left disrupts the formatting of the list

My webpage features a visual element known as a "plan", which consists of a small table and an image. I want these two elements to appear side by side without any styling. Currently, they are displayed one below the other. You can view how it looks like he ...

htmlcsscss-float

Animating content through CSS and jQuery to reveal its unfolding effect

Just stumbled upon the amazing quote-expansion animation in the OSX Mail app and I am completely impressed. I am on a mission to bring that same magic to the web (or at least close to it), but unsure if anyone has done something similar yet. A couple of ...

javascriptjquerycss

Trouble with CSS: struggling to remove the bullet point from the <li> tag

I have created a CSS style for the layout of my basic document: div#content li { font-size:95%; list-style-image:url(/css/bullet_list.gif); line-height:1.5; } Further down in another document, I've included a CSS file that defines .code ...

htmlcsshtml-lists

The overflowing issue with the Nextjs Tailwind Marquee Component is causing a display

I've recently developed a unique nextjs/tailwind component. This component displays an isometric marquee that scrolls horizontally. However, I'm facing an issue where the content overflows to the right and causes the page to become horizontally s ...

cssreactjsnext.jstailwind-css

Trouble with closing windows in the in-app browser on Android devices

Is there a method to successfully close the in-app browser? Despite window.close working on iOS devices, it is not effective on Android. I have experimented with alternatives like window.top.close and window.open("", "_self") window.close, but none have ...

javascriptandroidhtmlmobileviber