Tips for properly positioning a Bootstrap div element across the page in a horizontal manner

Hey there! Take a look at this code snippet:

   <form runat="server">
<div class="container">
    <div class="row">
        <div class="col-md-6">
            <div class="panel panel-primary">
                <div class="panel-heading text-center">
                    <h3 class="panel-title">
                        <span class="glyphicon glyphicon-bookmark"></span> Quick Shortcuts</h3>
                </div>
                <div class="panel-body">
                    <div class="row">
                        <div class="text-center">
                          <a href="#" class="btn btn-danger btn-block" role="button"><span class="glyphicon glyphicon-list-alt"></span> <br/>Apps</a>
                          <a href="#" class="btn btn-warning btn-block" role="button"><span class="glyphicon glyphicon-bookmark"></span> <br/>Bookmarks</a>
                          <a href="#" class="btn btn-primary btn-block" role="button"><span class="glyphicon glyphicon-signal"></span> <br/>Reports</a>
                          <a href="#" class="btn btn-primary btn-block" role="button"><span class="glyphicon glyphicon-comment"></span> <br/>Comments</a>


                          <a href="#" class="btn btn-success btn-block" role="button"><span class="glyphicon glyphicon-user"></span> <br/>Users</a>
                          <a href="#" class="btn btn-info btn-block" role="button"><span class="glyphicon glyphicon-file"></span> <br/>Notes</a>
                          <a href="#" class="btn btn-primary btn-block" role="button"><span class="glyphicon glyphicon-picture"></span> <br/>Photos</a>
                          <a href="#" class="btn btn-primary btn-block" role="button"><span class="glyphicon glyphicon-tag"></span> <br/>Tags</a>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</form>

I'm seeing the output like this: https://i.sstatic.net/A3C0B.png It's positioned on the right side of the page. I'd like it to center horizontally and be responsive as well.

Your assistance would be greatly appreciated!

htmlcsstwitter-bootstrapresponsive-designbootstrap-4

Answer №1

Consider using the col-md-offset-* class, it may provide a solution for your issue.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
 <form runat="server">
<div class="container">
    <div class="row">
        <div class="col-md-offset-3 col-sm-offset-3 col-xs-offset-3 col-md-6 col-sm-6 col-xs-6 ">
            <div class="panel panel-primary">
                <div class="panel-heading text-center">
                    <h3 class="panel-title">
                        <span class="glyphicon glyphicon-bookmark"></span> Quick Shortcuts</h3>
                </div>
                <div class="panel-body">
                    <div class="row">
                        <div class="text-center">
                          <a href="#" class="btn btn-danger btn-block" role="button"><span class="glyphicon glyphicon-list-alt"></span> <br/>Apps</a>
                          <a href="#" class="btn btn-warning btn-block" role="button"><span class="glyphicon glyphicon-bookmark"></span> <br/>Bookmarks</a>
                          <a href="#" class="btn btn-primary btn-block" role="button"><span class="glyphicon glyphicon-signal"></span> <br/>Reports</a>
                          <a href="#" class="btn btn-primary btn-block" role="button"><span class="glyphicon glyphicon-comment"></span> <br/>Comments</a>


                          <a href="#" class="btn btn-success btn-block" role="button"><span class="glyphicon glyphicon-user"></span> <br/>Users</a>
                          <a href="#" class="btn btn-info btn-block" role="button"><span class="glyphicon glyphicon-file"></span> <br/>Notes</a>
                          <a href="#" class="btn btn-primary btn-block" role="button"><span class="glyphicon glyphicon-picture"></span> <br/>Photos</a>
                          <a href="#" class="btn btn-primary btn-block" role="button"><span class="glyphicon glyphicon-tag"></span> <br/>Tags</a>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</form>
</body>
</html>

Answer №2

You're missing a closing tag in your code snippet.

To center content, simply add mx-auto to your column class like this:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>

<form runat="server">
    <div class="container">
        <div class="row">
            <div class="col-md-6 mx-auto">
                <div class="panel panel-primary">
                    <div class="panel-heading text-center">
                        <h3 class="panel-title">
                            <span class="glyphicon glyphicon-bookmark"></span> Quick Shortcuts</h3>
                    </div>
                    <div class="panel-body">
                        <div class="row">
                            <div class="text-center">
                                <a href="#" class="btn btn-danger btn-block" role="button"><span class="glyphicon glyphicon-list-alt"></span> <br/>Apps</a>
                                <a href="#" class="btn btn-warning btn-block" role="button"><span class="glyphicon glyphicon-bookmark"></span> <br/>Bookmarks</a>
                                <a href="#" class="btn btn-primary btn-block" role="button"><span class="glyphicon glyphicon-signal"></span> <br/>Reports</a>
                                <a href="#" class="btn btn-primary btn-block" role="button"><span class="glyphicon glyphicon-comment"></span> <br/>Comments</a>
                                <a href="#" class="btn btn-success btn-block" role="button"><span class="glyphicon glyphicon-user"></span> <br/>Users</a>
                                <a href="#" class="btn btn-info btn-block" role="button"><span class="glyphicon glyphicon-file"></span> <br/>Notes</a>
                                <a href="#" class="btn btn-primary btn-block" role="button"><span class="glyphicon glyphicon-picture"></span> <br/>Photos</a>
                                <a href="#" class="btn btn-primary btn-block" role="button"><span class="glyphicon glyphicon-tag"></span> <br/>Tags</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

P.S. It seems like you're using Bootstrap 3 even though your tag indicates Bootstrap 4.

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

Navigating Bootstrap Tabs: Utilizing a Different URL Template

After successfully creating a tab that displays the active tab when clicked, I attempted to link the content of another HTML template to the tab. However, this caused the tab functionality to stop working. In my main URL, the code looks like this: <ul ...

javascripthtmldjango

Experiencing a horizontal scroll while shifting the elements despite no visible overflow

While working on the contact section of my website, I encountered an issue. Every time I adjust the position of the textboxes and labels by 15em within the wrapper, a horizontal scroll appears. How can I move these elements without triggering the scroll ba ...

htmlcss

The submission of data from an ASP.NET MVC form to the controller is unsuccessful

On my Index.cshtml page, I have implemented a generic login page using Bootstrap. The HTML markup is as follows: @model Accurecord_Direct.Models.Login. @{ ViewData["Title"] = "Home Page"; Layout = "~/Views/Shared/_NoMenu. ...

c#asp.net-mvcbootstrap-4

Dismissal feature malfunctioning in Materialize CSS

I am having trouble closing the modal when the user clicks outside of it. This issue is occurring in my first project with Materialize, and I can't figure out why it's not working. Below is a snippet of the code I have implemented: Within the ...

jqueryhtmlcssmaterialize

The DIV Card has been displaced into a different row

https://i.sstatic.net/sdUB6.png I'm struggling to align my div card next to another card without it getting distorted. The first one looks fine, but I can't figure out how to position the next one beside it... $sql = "SELECT * FROM posts WHERE ...

phphtmlbootstrap-4containers

The iPhone display scaling issue is causing difficulty viewing the entire website

Currently experiencing difficulties with a page that lacks sufficient content, resulting in a smaller height. As a result, the iPhone is scaling the page and cutting off the full menu bar (960px wide). I attempted to set a minimum height using a media quer ...

iphonehtmlcssmedia-queries

Having trouble with sending a post request through ajax

Whenever I try to initiate an Ajax request upon clicking a button, the request never seems to get executed. Below is the snippet of my HTML code : <!DOCTYPE html> <html lang="en"> <head> <title>User Form</title> ...

javascripthtmljqueryajax

What is the best way to align background shapes within a specific section on a webpage using CSS?

I've been attempting to strategically place multiple shapes in the background using CSS, but I'm facing challenges. While I was successful with my hero section at the top of the page, positioning elements in a section halfway down has proven prob ...

htmlcss

Unsure why the React button is disappearing specifically on Safari iOS. Any thoughts on how CSS

Hey there! I created a small hamburger button for my website, but for some reason, it doesn't show up on Safari iOS. Interestingly, it works perfectly fine on Windows Chrome, Windows Firefox, and my Android device. I've been trying to troubleshoo ...

htmlcssiosreactjsweb

Is there a way to eliminate the black bar appearing on my progress bars in Chrome due to a glitch?

I've created a simple slideshow with a progress bar that functions as a 5-second timer before moving to the next slide. However, there's a strange black section on the progress bar in Chrome that I can't figure out. Here you can view the cod ...

jqueryhtmlcss

Steps to solve a button alignment issue on the lower section of a mobile display using a WordPress theme

I integrated CSS and HTML code into the CSS and PHP sections of a Wordpress theme to showcase a button at the bottom center specifically on mobile screens. The button appears correctly in testing but ends up completely out of sight on actual mobile devices ...

phphtmlcsswordpress

Ways to trigger an alert once a div is fully loaded with content

I have a webpage with a search feature. When the user clicks the search button, the results are fetched via ajax from the database and displayed in a div. After the results are displayed, I want to perform an action as soon as the total count of records i ...

javascriptjqueryhtmlajax

Align the timing of the animation with the dataset in ThreeJS

I am faced with the challenge of working with data that includes time in milliseconds and the x, y, z position of an object at each specific time interval. msec |pos_x |pos_y |pos_z ------------------------------ 0 |318 |24 |3 25 |3 ...

javascripthtmlanimationtimethree.js

Is there a way to transform my QML WebEngine application into HTML5 code?

This is a basic application that simply loads webviews for various applications, designed in qml using qt.webengine. However, I am encountering errors due to an outdated web browser. As I do not plan to switch to Qt 6 just yet, I am exploring the possibili ...

htmlqmlbootstrap-5qtwebengine

What are the steps to design a fluid responsive grid with three boxes?

I really need help creating a responsive grid using CSS and HTML. The image below should give you an idea of what I'm trying to achieve. Thank you in advance for any assistance! Here is the image as a reference: https://i.sstatic.net/FO9q5.png ...

htmlcsslayoutresponsive-design

JS not functioning properly in specific pages causing display issues with page height set to 100%

I am facing an unusual issue where certain pages do not stretch to 100% page height in the middle section, causing the left-hand border to be incomplete. For example, on the 'Brentwood' site (please click on the 'Login' link in the top ...

javascripthtmlcss

Adjusting boxes (both up and across) as the window is resized with Bootstrap 4

CSS .main{ border-radius: 20px; margin-left: 20px; margin-right: 20px } .left{ max-width: 250px; height: 1%; border-radius: 20px; } .right{ max-width: 250px; height: 1%; border-radius: 20px; } .parent-containe ...

htmlcsstwitter-bootstrapbootstrap-4

"Utilizing the appendTo attribute in primeNG within a ContextMenu component - A step-by-step guide

Currently, I am attempting to utilize the appendTo attribute within the ContextMenu component. My intention is to associate this behavior with a specific element, such as a div. ...

htmlprimeng

Even though I have the image button's ID, I am unable to successfully click on it

I am facing an issue where I can't seem to click on an image button even though I know its ID: driver.findElement(By.id("its Id")).click() Unfortunately, I cannot provide the website link as it is not a public website. However, I have pasted the HTM ...

javascripthtmlseleniumselenium-webdriverselenium-chromedriver

Fetching data to a dropdown menu in Laravel 5

In my application, I have a requirement to display records that are foreign keys in a select dropdown. The select should only show the name of a food plate. I have the following tables: plato and platoIngrediente (where the foreign keys reside). Migratio ...

phplaraveltwitter-bootstraplaravel-5eloquent