In the following code, everything is centered. However, I now only want to center the Title and append the date without moving the Title to the left. The title must remain in the middle with the date appended behind it. How can I accomplish this?
<div class="row center">
<div class="col-md-12">
<h1 style="display:inline;">Title</h1><p style="display:inline;"> 27th June 2014</p>
</div>
</div>
Here's a neat little trick you can give a shot:
<div class="row text-center">
<div class="col-md-12">
<h1 class="title">Title</h1>
<p>27th June 2014</p>
</div>
</div>
CSS:
.text-center .title {
display: inline-block;
}
.text-center .title + p {
position: absolute;
display: inline-block;
top: 50%;
margin: -5px 0 0 10px; /* adjust margin-top based on your line height */
}
Since col-md-12 has position: relative, you can position p absolutely and align it vertically using negative margin (adjust for your line height).
You can also utilize Bootstrap's built-in .text-center class instead of creating a separate .center class.
Consider reorganizing and placing the date within the title as a span:
<div class="row center">
<div class="col-md-12">
<h1 id="title" >Title <span>27th June 2014</span></h1>
</div>
</div>
You can style it with CSS like this:
#title {
text-align:center;
position:relative;
}
#title span {
font-size:15px;
font-weight:normal;
position:absolute;
bottom:4px;
}
This is not exactly a bootstrap solution (as it may already have inset classes to address this issue).
However, one workaround could be offsetting the date with a negative margin:
Check out this JSFiddle for demonstration
<div class="row center">
<div class="col-md-12">
<h1>Title</h1><span class="date"> 27th June 2014</span>
</div>
</div>
.center{
text-align: center;
}
.center h1{
display: inline;
}
In my example, I replaced the p tag with a span since it's already inline. However, depending on your HTML structure, using a p tag might be more semantically correct (although a date doesn't necessarily need a paragraph in my opinion).
Is there a way to make a div expand to fit its contents up to 250px and then scroll if necessary? I attempted using the following CSS: text-overflow: ellipsis; max-height: 250px; overflow-y: scroll; However, this solution doesn't achieve the desired ...
https://i.sstatic.net/eLdxa.png Looking to design a table with rows representing different status levels such as suspended, closed, and open. The challenge is that when the status is "open", it should not be displayed on the row. Any suggestions for imple ...
I'm currently exploring Vue's approach to writing JavaScript. Let's consider this situation: In the .vue template <button v-on:click="biggerFont()" class="btn btn-s btn-default" type="button" name="button">A</button> < ...
I've been attempting to integrate some s3 WMV file URLs into my HTML page, but the following code doesn't seem to be functioning as expected. <object classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" standby="Loading Microsoft® Windows® ...
Help needed with maximize/minimize button functionality as my JavaScript code is not working. Any suggestions for a solution would be greatly appreciated. Thank you in advance. Below is the code snippet: <html> <head> <script> $(functio ...
I'm having trouble figuring out how to add a border around a div tag in HTML. The issue is that in certain browsers, the border isn't showing up. Below is my HTML code: <div id="divActivites" name="divActivites" style="border:thin"> ...
https://i.sstatic.net/QWcHm.jpg After successfully automating the process of filling in a textbox and clicking the "proceed with booking" button using a submit() command, I encountered an issue. The HTML code does not provide a URL that can be used in the ...
Any assistance is greatly appreciated. As a newcomer to Django and web development at large, I've been self-teaching myself while creating a website with the Django framework. Everything seems to be functioning well so far, but I have doubts about whe ...
Is there a jQuery or JS library that can perform the following task: If the user inputs 'x' in A01, then make A01_1 visible. Otherwise, do nothing. <form id="survey"> <fieldset> <label for="A01">A01</label&g ...
Why doesn't my Button B display an alert popup? Here are the code snippets from separate files: .html: <html> <body> <input type="button" class="popup" value="BUTTON A"/><br> <input type="button" class="displaymeh ...
I'm attempting to disable the submit button when a user enters something in the email field, but despite validation, it is not working as expected. What could be the issue with my validation code? function validateEmail(email) { var btnSubmit = ...
As a newcomer to Bootstrap 4, I have carefully gone through the documentation multiple times, but I have been facing challenges in making my project completely responsive for some time now. This is my HTML: <!DOCTYPE html> <html> <head> ...
I seem to be encountering a common issue with my ajax call not retrieving the JSON data. It appears that it may be due to an array and not using the correct index, although I am indeed utilizing an index on the front-end. Despite trying various solutions f ...
How do I eliminate the empty space between the header and wrapper div elements? Check out this DEMO fiddle. Below is the HTML code: <div id="container"> <div id="header"> <div id="logo"> </div> <div ...
How can I center an image that is larger than its parent element? I have set the min-width and min-height to 100% so that the picture will always fill up the parent element. The issue arises when the image does not match the proportions of the parent elem ...
Recently, my map started experiencing issues. The problem seems to be related to the HTML using a javascript and css file that is loaded from Google Drive for display. However, when I directly load these files from my computer, it works perfectly fine. Bel ...
I've been experimenting with jQuery to remove an option from a select element. In my specific situation, I have more than 4 select elements (sometimes even up to 10 selects). The goal is: When a user picks "Toyota" from the first select, the same op ...
Currently, I have a background set for my website along with a navigation bar that displays my name and additional information. I am looking to make the background of this navigation bar semi-transparent so that it is possible to see through it. I tried ...
I'm attempting to create a layout where divs are displayed from top to bottom, but once they reach the bottom of the browser window, any additional divs will overflow to the right. You can take a look at the desired layout here: https://i.stack.imgur. ...
Creating a basic Bootstrap 3 site, I've set up a full-width header with a Bootstrap Carousel showcasing three images. To handle different viewport widths, I added a media query to switch between image sets based on width. Here's the code snippet ...