How can I align the starting point of a Bootstrap div col to the center?

Is it possible to change the layout from this https://i.sstatic.net/Dc8Yi.jpg to this https://i.sstatic.net/TcQU0.jpg? I want the content added to always start from the center and spread to both sides, like in the second image. Can this be achieved?

Here is my code:

<div class="container main_container">
        <h2 class="product-title">Produk</h2>
        @foreach (var item in Model.Product)
        {
            <div class="col-sm-6 col-md-4 col-xs-12 product-container">
                <div class="product_in">
                    <div class="product_hover col-sm-6 col-xs-12">
                        <img class="product_img" src="~/images/@(item.Image)" alt="@item.Nama">
                        <div class="product_info">
                            <h4 class="Gotham-Ultra">@item.Nama</h4>
                            <p class="Gotham-Book-2">
                                @Html.Raw(item.Deskripsi)
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        }
    </div>

Thank you for any help!

htmlcsstwitter-bootstrapbootstrap-4styles

Answer №1

When employing the CSS property display: flex;

it is necessary to include justify-content: center;

Best Regards

Answer №2

Give This a Shot:

  <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.5/jquery.min.js"></script>


<div class="container">
    <div class="box" style="margin-bottom:20px;">
        <div class="row">
            <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <div class="card">
                    <img class="card-img-top" src="..." alt="Card pic cap">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some example text to expand on the card title and form the main part of the card's content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <div class="card">
                    <img class="card-img-top" src="..." alt="Card pic cap">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some example text to build upon the card title and create the primary aspect of the card's content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <div class="card">
                    <img class="card-img-top" src="..." alt="Card pic cap">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some example text to enhance the card title and constitute most of the card's content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="box" style="margin-bottom:20px;">
        <div class="row">
            <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <div class="card">
                    <img class="card-img-top" src="..." alt="Card pic cap">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some example text to extend the card title and make up the bulk of the card's content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <div class="card">
                    <img class="card-img-top" src="..." alt="Card pic cap">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some example text to work off the card title and comprise the majority of the card's content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="box" style="margin-bottom:20px;">
        <div class="row">
            <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <div class="card">
                    <img class="card-img-top" src="..." alt="Card pic cap">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some example text to enhance the card title and make up the bulk of the card's content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

Answer №3

For those utilizing Bootstrap Version 4.0, there are several built-in classes available to help you achieve your desired layout. You can simply utilize the following code snippet:

<div class="container main_container d-flex justify-content-center">
  <div class="col-xs-12 col-sm-12 text-center">
    <h2 class="product-title">Product</h2>
  </div>

    @foreach (var item in Model.Product)
    {
        <div class="col-sm-6 col-md-4 col-xs-12 product-container">
            <div class="product_in">
                <div class="product_hover col-sm-6 col-xs-12">
                    <img class="product_img" src="~/images/@(item.Image)" alt="@item.Name">
                    <div class="product_info">
                        <h4 class="Gotham-Ultra">@item.Name</h4>
                        <p class="Gotham-Book-2">
                            @Html.Raw(item.Description)
                        </p>
                    </div>
                </div>
            </div>
        </div>
    }
</div>

If you are not currently using Bootstrap Version 4.0, please let me know and I will provide an alternative solution for you.

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

Is it possible to incorporate an external javascript file in my CSS file?

Currently, I am attempting to create a setup where my background adjusts based on the width of the user's browser. However, I am constrained by a background specified in the external stylesheet under a specific element. While I have the ability to alt ...

javascripthtmlcssbackgroundbrowser-width

Achieving a layered effect with elements overlapping onto another div

Looking for a way to create a design where the text in id="text-field" overlaps with id="image-field". Need some guidance on how to achieve this effect. Any help is appreciated. <!DOCTYPE html> <html> <body> <div class=" ...

htmlcss

Tracking a user's path while redirecting them through various pages

Recently, I created a website with a login page and a home page using nodejs, javascript, and html. The client side sends the entered username and password to the server, which then replies based on the validation result. During navigation between pages, h ...

javascripthtmlnode.js

Organize the HTML table upon importing

In my code, I am populating a table with data retrieved from a JSON object. Here is the JavaScript snippet: if (jsonObj[0].array !== 'undefined' && jsonObj[0].array.length > 0) { for (var i = 0; i < jsonObj[0].array.length; i++ ...

jqueryhtmltablesorter

Learn how to dynamically clear and update source data in jQuery autocomplete for enhanced functionality

Here is a snippet of my jQuery code. In this code, 'year' refers to the form input tag ID, and 'years' is an array variable containing all the year values. I have set this array as the source for autocomplete, which works fine. However, ...

javascriptjqueryhtmlautocompletejquery-ui-autocomplete

Using jQuery and JavaScript to swap images depending on the option chosen in a dropdown menu

On my existing ecommerce website, I have a dropdown menu with the following code: <select data-optgroup="10201" class="prodoption detailprodoption" onchange="updateoptimage(0,0)" name="optn0" id="optn0x0" size="1"><option value="">Please Selec ...

javascriptphpjqueryhtmldrop-down-menu

Can the <article> tag and all its content be positioned in the center of the webpage?

Can the <article> and its content remain centrally aligned on the page? Check out my website here: Typically, when you visit a website, the article is positioned in the center of the page. However, in my case, the article only remains centered when ...

csshtml

Guide to updating the value of a CSS seconds dynamically

let timerSeconds = 10; // This value will be retrieved from a database function StartCountDownTimer() { let timerStart = new Date(); let css_seconds = `${timerSeconds}s`; const css_root = document.querySelector(':root'); let cssVa ...

javascripthtmlcsscss-animations

The benefits of utilizing `calc()` compared to `transform` for positioning elements

When deciding between using calc() or the transform property for placing an element, is there a specific reason to choose one over the other when the size of the element is already known? For instance... .element { bottom: 100%; transform: translateY ...

csscss-transforms

Enhance PHP code for user registration by incorporating parameterized SQL queries

I am fairly new to PHP and I've been exploring how to implement parameterized queries for my SQL connections. However, everything I come across gives me the impression that I have to manually change values each time to make use of parameterized querie ...

phphtmlmysqlmysqli

Can you explain how to handle a POST request in an ASP.NET application?

I have a question that may appear trivial. Our streaming server manual mentions that it can authenticate by sending a POST request to an HTTP server and receiving a couple of lines of text in response. How does this process work in the context of ASP.NET? ...

asp.nethtmlhttppost

Align a Bootstrap div horizontally to vertically in a responsive manner

Styling for Responsive Design: .wrap { display: flex; background: white; padding: 1rem 1rem 1rem 1rem; border-radius: 0.5rem; box-shadow: 7px 7px 30px -5px rgba(0,0,0,0.1); margin-bottom: 2rem; } .vcenter { margin: auto; margin-left: 1 ...

htmlcsstwitter-bootstraptwitter-bootstrap-3responsive-design

Issue encountered with CSS3 animations, failing to perform as intended for various animations

In my project, I have a series of div elements that I am animating in various ways. The first one utilizes a cardflip animation effect: @-webkit-keyframes cardflip { from { -webkit-transform: perspective(2000) rotateY(90deg); -webkit-tra ...

htmlcssanimation

Incorporating navigation controls into a modal window

I have successfully created a sign-in modal, but now I'm looking to include buttons at the top. One button should redirect users to register/sign up, and the other button should lead them back to the sign-in modal, as shown in the image I've link ...

javascripthtmlcssbootstrap-5

What is the best way to position a div below another sticky div when the first div's height is constantly changing

I am facing a challenge with scrollable text and sticky headers on my webpage. The top text has dynamic height based on the content below, which is followed by a sticky header with its own dynamic height. Now, I want to add another sticky header below the ...

htmlcss

Tips for presenting text and an icon side by side on a single line

I am currently using Bootstrap 4 and Font Awesome to showcase text and an icon on the same line. However, I am facing an issue where the icon is appearing on a separate line below the text instead of at the right corner as desired. How can I resolve this l ...

bootstrap-4

How to ensure the table fits perfectly on the screen using JQueryMobile and Cordova?

I've been working on a JavaScript function that creates a dynamic page and displays data fetched from a database. However, I've encountered an issue where the displayed data overflows past the width of the mobile screen. Is there a way to ensure ...

javascriptjquerycsscordovajquery-mobile

Is there a way to send an array with data to a different component using react-redux within a Higher Order Component (H

It seems like I'm missing something because I can't seem to find any examples of how to pass an array with data from a Higher Order Component (HOC) to another component. Here is the code snippet: import React from 'react' import NoAc ...

javascripthtmlreactjs

In search of code that will display a dropdown menu only when a specific option is chosen from a previous dropdown selection

As a beginner in this field, I must admit that I have never attempted anything like this before. My goal is to make a dropdown menu appear when a specific option is chosen in a previous dropdown. Let's take a look at the initial dropdown: < ...

html

Choosing multiple images by clicking on their alternative text with jQuery

I am currently working on a project that involves clicking on a thumbnail to enlarge the image and display its name (alt) below it. I have made progress, but there seems to be an issue where only one image is displayed no matter which thumbnail I click on. ...

javascriptjqueryhtml