Positioning a BootStrap well in the center

I'm attempting to center a Bootstrap Well labeled "Resource Booker" within a div to align properly with the two boxes below it. I've experimented with adding padding, but it ends up adding padding within the well itself. Below is a picture of the page and the corresponding code:

Page Screenshot

https://i.sstatic.net/7Hwkh.png

      <div class="col-sm-8 text-left"> 
            <br>
            <br>
     <div class="well well-lg" style="background-color:rgb(0,50,0); color:white;"><h1>   Resource Booker </h1> </div> 
            <br>
            <br>           
       <div class="row">     
      <div class="column"> 
        <div class="card" id="hi" style="width:400px; height:300px;">
          <p><i class="fa fa-user"></i></p>
          <h1>Book</h1>
          <p>Book A Room</p>
          <p>  <span class="glyphicon glyphicon-book" style="font-size:150px;"></span></p>
        </div>
      </div>
    <center>
      <div class="column">
    <br>
      </div> 
      <div class="column">
   <div class="card" id="bye" style="width:400px; height:300px;">
          <p><i class="fa fa-coffee"></i></p>                               
          <h1>Calender</h1>
          <p>Check Availability</p>
          <p>  <span class="glyphicon glyphicon-calendar" style="font-size:150px;"></span></p>
        </div>
      </div>        
    </div>
        </div>
          </center>       
    </div>

The CSS code for the cards underneath the well is as follows:

/* Float four columns side by side */

.column {
  float:left;
  width: 27%;

  padding: 0px 50px 0px 90px;
}

.row {margin: 0 -5px;}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive columns */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
    display: block;
    margin-bottom: 10px;
  }
}

/* Style the counter cards */

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  padding: 16px;
  text-align: center;
  background-color: #444;
  color: white;

}

.fa {font-size:200px;

Answer №1

If you wrap your div with the container class and add some margin-left, it should help. Additionally, providing a codepen of your project would be beneficial for mobile users to test out the solution.

Answer №2

When adding a margin-left to a div, it is important to adjust that margin in a media query. It is recommended to set a max-width for the div and apply margin: 0 auto and width: 100%.

Your CSS should look like this:

.well{max-width: 400px; width: 100%; margin: 0 auto;}

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

How can I dynamically assign a className in a React component based on the current state when importing styles?

I've been utilizing the style-loader to insert CSS modularly into my components ({style.exampleClassName}). My goal is to showcase a loader for a specific duration before displaying an image (at least 16 of these components in a grid layout). This i ...

How about a fading effect for the select box?

I'm currently working on creating a select tag that opens its options slowly with a fade in, fade out effect when the user clicks on "Actions." I've attempted to use jQuery for this feature but haven't had any luck. Here's my code: &l ...

What are some ways to showcase HTML/CSS content within an email?

For my service to be used, an activation process is necessary before the account can be accessed. The challenge we are facing is that the CSS styling we added to the activation email template is not showing up when the email is sent. Only the HTML content ...

Tips for sending two values to a PHP file using JavaScript Ajax

I have created a code for two dropdown menus. The goal is to select values from both menus and send them to a php file using the GET method. The values should be sent to the php file only when both menus have selections made. Below is the code snippet: ...

"Utilize Tailwind to effortlessly place a single item at the center

Looking for a way to align a row of items with one item centered in the div and the others positioned on either side while maintaining their original order? Check out this code snippet: <div className="flex mx-auto justify-center items-center" ...

Concealing/Revealing Elements with jquery

For hours, I've been attempting to switch between hiding one element and showing another in my script. Here is the code I am using: <script type="text/javascript"> function () { $('#Instructions').hide(); $('#G ...

Adding a text field on top of a div based on the dropdown value selection

I am working with a dropdown option inside a div. I want to make it so that when the last option is selected, a text box will appear on top of the dropdown. And when a different option is selected, the text box should be disabled. How can I achieve this? ...

How can you enable a button to be clicked from within a drawer?

Hey there, I've got a div that toggles hide/show like a drawer when clicked. When the drawer is in show state, it contains a button. How can I make the button clickable without toggling the drawer? Any ideas on this?! `zIndex` doesn't seem to be ...

The option to "open in new tab" is absent from the right-click menu when clicking a link on a website

Why does the option to open a link in a new tab not appear when using JavaScript or jQuery, but it works with an anchor tag? I have tried using window.location and window.open, as well as adding the onclick attribute to a div, but the option still doesn&ap ...

Confusing Vaadin Component Styling Dilemma

I've been struggling to access the individual parts of elements that require navigating through the shadow DOM. I've been following a guide for assistance: https://github.com/vaadin/vaadin-themable-mixin/wiki/1.-Style-Scopes When I add this code ...

Minimum width of Angular Material's mat-menu

I am looking to create a compact Material mat-menu using Angular 15. Below is the code I have: <mat-menu #flagMenu="matMenu"> <button mat-menu-item> <img src="assets/flags/en.png" class="flag"/> ...

The disappearance of the checkbox is not occurring when the text three is moved before the input tag

When I move text three before the input tag, the checkbox does not disappear when clicked for the third time. However, if I keep text three after the input tag, it works fine. Do you have any suggestions on how to fix this issue? I have included my code be ...

Transmit information through a router connection

When attempting to pass data from one page to another routing page using [queryParams]="{'usd':usd, 'count' :country, 'name' :name}" through the routing button, it works perfectly fine but an error is displayed in my console. ...

"Assigning a CSS class to determine the length of a List in a JSP

In my JSP code, I have a list called ${contentList} that contains product information such as product images, names, and prices. To display this data in an HTML table using JSP, I want to dynamically set the class of the first table row based on the numbe ...

The ng-View feature appears to be malfunctioning within AngularJS

I'm extremely new to AngularJS and am having trouble with ng-view. Here is the code from AngularFormsApp.js: var angularFormsApp = angular.module('angularFormsApp', ["ngRoute"]); angularFormsApp.config(function ($routeProvider) { $routeP ...

What is the best way to apply the CssClass "active" when clicking on a link

How can we update the cssClass of a link button on each click event, considering that the page refreshes every time? Currently, when I click on any LinkButton, the default behavior sets the cssClass to Plus LinkButton. ---index.aspx----------- <ul cl ...

Is it possible to load a route first, and then proceed to load the static files from the public folder in a Node.js application?

When running the app.js file for Node.js, I am trying to ensure that the '/' route is loaded first. This route handles authentication and then redirects to the index.html file. However, I am encountering an error because the program cannot find ...

Decrease the gap between the ticks on a horizontal bar chart in ChartJS

Currently, I am utilizing the horizontal bar chart feature from chartjs and encountering an issue with the chart appearing too large. In addition, there is a notable gap between the ticks on the xAxis (as shown in the attached image). Does anyone know how ...

How to automatically close a JavaScript popup once a form is submitted and refresh the parent page

I am facing an issue with a popup on my website. I have a separate page called math.ejs that pops up when a button is pressed on the index.ejs page. However, after clicking the submit Ok button in the math.ejs popup, I want it to close and display the calc ...

Challenge with shifting list items

The issue arises when applying margin to any element within the product or slider div, causing all list items to shift downwards. .product-slider { margin-top: 16px; text-align: center; } .slide-item { list-style-type: none; display: inline; ...