How to align content in the center of a div using Bootstrap

I'm struggling to get my date picker positioned in the center of the page. I've tried using center-block and text-center, but they haven't had any effect. Even with the offset, it's not perfectly aligned in the center. Can anyone advise on what I should do?

Thank you!

<div class='row'>
  <div class='col-sm-12'>
    <div class='page-header page-header-with-icon mg-t'> <i class='fa-icon-calendar'></i>

      <h2>Calendar</h2>

    </div>
    <div class="row">
      <div class="col-sm-4 col-sm-offset-4">
        <div class="center-block text-center datepicker"></div>
      </div>
    </div>
  </div>
</div>
htmlcsstwitter-bootstrap

Answer №1

If you want to implement a date picker, consider the following code snippet:

<div class="col-md-6">
    <input type="text" id="datepicker" />
</div>

Then apply some styling to the date picker like so:

#datepicker {
    display: inline-block;
    margin: 0 auto;
}

This is just a starting point and may need further testing for functionality.

Answer №2

Adding the style="text-align:center;" attribute should help center the "CALENDAR" text as needed. I've tested it and confirmed that it works for me. Here is an example of how you can implement this:

<div class="col-sm-12">
   <div class="page-header page-header-with-icon mg-t" style="text-align:center;">
   <i class="fa-icon-calendar"></i>
   <h2>Calendar</h2>
    </div>
<div class="row">
   <div class="col-sm-4 col-sm-offset-4">
       <div class="center-block text-center datepicker"></div>
     </div>
</div>
  </div>
 </div>

Answer №3

Here is the solution to address your issue. Simply insert this code into your personalized style sheet and adjust the percentage width according to your design requirements.

.calendar-view {
 width: 25%;
 }

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

Place the child DIV at the bottom of its parent DIV

I've searched through open questions but couldn't find a solution. The code snippet in question looks like this: ... <div style="some height"> <div style="some width"> .......and so on.. .. < ...

javascriptcsshtml-table

Customizing the styling of an anchor tag using CSS in Bootstrap

I want my active link to appear red: nav class="navbar navbar-inverse"> <div class="container col-1 col-sm-12"> <ul class="nav"> <li class="<%= 'active' if current_page?(squad_path) %> ...

htmlcssruby-on-rails

Unable to locate the included file

When trying to add messages to my ejs template welcome.ejs from messages.ejs, I use the following include method: <%- include ('views/partials/messages.ejs;') %> '''https://i.sstatic.net/OYHZO.png Here are all the files in ...

htmlnpmejs

How to Position Input Fields over an Image Using CSS

I am working on positioning input fields over an image to allow data entry directly onto the image itself. https://i.sstatic.net/jW4iM.png Currently, I have a series of input fields (shown above) and three images with different squares on them. My goal is ...

javascripthtmlcssweb-deployment

Conceal Element without Eliminating from the Design

Need a solution: I have specific icons to display for certain elements, but not all. However, when hiding the icon, I want the spacing of the element to stay consistent. Is there a method to conceal an image within an element while preserving its allocat ...

htmlcss

The issue of the WordPress sidebar dropping to the bottom of the page in Internet Explorer

Well, I've been scratching my head for the past two days trying to figure this out but so far no luck! The sidebar looks just fine in Firefox and Chrome, sitting pretty on the right where it belongs. But when it comes to IE, it decides to play hide a ...

cssinternet-explorerwordpress

Is there a CSS3 Selector With Similar Functionality to jQuery's .click()?

For a few years now, I have been utilizing a pure CSS navigation system. However, with the recent increase in mobile site projects at my workplace, I am encountering issues with drop-down menus not functioning properly on mobile devices. Despite this chall ...

javascriptjquerycsscss-selectors

Incorporating Cascading Style Sheets (CSS) to

I'm looking to style my form with CSS but I'm unsure of the process. Currently, the form is generated using PHP and MySQL, and in the browser it appears like this: http://gyazo.com/5d099ead9bd6ea83859a5114b2438748 I want to align the text and dr ...

phphtmlcssforms

Is there a way to make Bootstrap's dark table heads hoverable without having to manually set the style?

I enjoy using hoverable tables, but I've noticed a strange behavior when including the table-dark class in my <thead>. It seems to make the header row behave like a body row, which is not what I want. Is this standard behavior and is there a way ...

htmljquerycssspring-bootbootstrap-4

I'm having trouble getting my button to work with addEventListener while using Ejs and Express. What could

Creating a Twitter-like platform where I can post tweets and have them display on the same page has been quite challenging. I've set up each post to have an Edit button initially hidden with 'display:none'. However, when I try to click on th ...

javascripthtmlnode.jsexpressejs

Unique twist on the Bootstrap grid: perfectly centered

I'd like to design a 12-column Bootstrap grid with specific colors. The header should be light blue, the body in green, and the footer orange against a grey background. I want the grid to be centered on the screen with horizontal light blue stripes m ...

twitter-bootstrapcss

Modify the value of the <select> tag based on whether it is required or not

When utilizing a my-select.component within a form component, the following code snippet is used: <div *ngIf="items?.length"> <select [ngModel]="selectedItem" (ngModelChange)="valueChanged($event)"> <optio ...

javascripthtmlangulartypescriptforms

Inserting blocks of text into a MySQL database

I'm hoping to insert text segments into a MySQL database. Below is an excerpt of my HTML code: <div class="margins3"> <h1>Meal Plan...</h1> <div id='results-container'> <div class='LeanMuscle ...

javascriptphphtmlmysqldatabase

Troubleshooting an Angular.js "Hello World" application that is malfunctioning

I've been trying to get a simple Hello World app working by following different tutorials, but it doesn't seem to be functioning correctly. I've double-checked my code and everything looks right to me. Could someone please assist me in troub ...

javascripthtmlangularjsnode.jsweb

Apply Class According to Style Property

My current CMS does not seem to apply a class name when an element is floated left or right. Instead of delving into the TinyMCE code, I would prefer to use jQuery to solve this issue. Currently, when aligning an image to the left or right, inline styles ...

jqueryhtmlcss

I am having issues displaying my background image

I'm experiencing an issue where my background image isn't displaying correctly. Here is the CSS code I'm using: body { background-image: url('img/bg.png'); background-repeat: no-repeat; } ...

css

The functionality of the button is currently not compatible with Internet Explorer

I have encountered an issue in my application involving a combination of <h:outputLink> and <p:commandButton> as shown below: <h:outputLink target="_blank" value="theURL"> <p:commandButton value="Click" type="button" /> </h: ...

htmlinternet-explorerbuttonjsf-2primefaces

What is causing my anchor tags not to reflow properly?

I've been working on my new website and I'm facing a challenge that I just can't seem to solve. Here's the link: When I resize my browser to "mobile width", making it narrower than the row of oval "Tags" below my site menu, I want the ...

htmlcss

Tips for maintaining focus while tabbing in a contenteditable field?

Why does the table lose focus every time I press tab instead of inserting a white space? How can I change this so that pressing tab just inserts a regular tab space? ...

javascriptjqueryhtml

Is it possible to employ a For loop with a Nodelist?

I have a unique HTML code structure that resembles a tree. My goal is to traverse the NodeList and assign specific classes to nodes that have children. Here's a snippet of the code: <li id='test' class="parentNode"> <button class ...

javascripthtmlnodelist