I am struggling to center and adjust the size to 80% of an alert box, but the text-center class is not achieving this for me.
<div class="text-center">
<div class="alert alert-info" style="width: 80%;" role="alert"> <i class="fa fa-exclamation-triangle" aria-hidden="true></i> <strong>Hello!</strong> This is just an alert... </div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="alert alert-warning alert-dismissible fade in text-center" role="alert">
<strong>Wowza!</strong> You might want to take a look at yourself, things aren't looking so great.
</div>
</div>
</div>
</div>
The use of the text-center class is functioning as intended here. By placing the .alert within the Bootstrap Grid, you can control the overall width of the alert message.
Make sure there are no conflicting CSS styles that could be interfering with your layout. This code snippet has been tested on Bootply: http://www.bootply.com/MFv1HMC0G7
To center align the entire alert, use center-block instead of text-center in conjunction with alert.
<div class="alert alert-info center-block" style="width: 80%;" role="alert"> <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> <strong>Hey!</strong> It's just an alert... </div>
If you want to center align the text within the alert, do as follows:
<div class="alert alert-info" style="width: 80%;" role="alert">
<p class="text-center">
<i class="fa fa-exclamation-triangle" aria-hidden="true"></i> <strong>Hey!</strong> It's just an alert...
</p>
</div>
To center the alert without requiring additional containers, I modified the Bootstrap alert class as shown below.
.alert {
left: 0;
margin: auto; // Centers alert component
position: absolute; // Ensures display relative to entire page
right: 0;
text-align: center; // Centers 'Alert Test' text
top: 1em;
width: 80%;
z-index: 1; // Overlays app and bootstrap Navbar
}
If you prefer not to directly override the base alert class from Bootstrap, you can rename the class and reference it instead.
In my setup using React for rendering components, I included them in this manner:
Alerts.jsx
<div className="alert alert-primary alert-dismissable fade show" role="alert">
Alert Test
<button className="close" type="button" data-dismiss="alert">
<span>×</span>
</button>
</div>
App.jsx
<>
<Alerts />
<Navigation />
<Switch>
<Route exact path="/" component={HomePage} />
<Route path="/login" component={LoginPage} />
</Switch>
</>
The Alerts.jsx component is imported into the App.jsx component to achieve a layout similar to this.
https://i.sstatic.net/iFZF0.png
When working with Bootstrap 5, implementing d-block in combination with text-center can help align content.
<div class="alert alert-info d-block text-center" role="alert">
Centered Text
</div>
My code snippet is located at http://jsfiddle.net/kXesZ/. I am trying to align the two social media icons to the bottom edge of a background image but I am having trouble getting them to display inline. I've attempted various methods such as using dis ...
Having an issue with my ngx datatable row details. Everything works well initially, but when I adjust the browser width, the details don't scale properly with rows and columns. They seem to have a fixed width that was set when the page was first loade ...
Here is a string I have: var items = "<div class='item'><div class='item-img' style='background-image: url('images.123.jpg')'></div></div>" I am looking to update the inner HTML of a div: $ ...
When attempting to parse an HTML page using PHP with DOMDocument, I encountered an issue where a javascript on the page was updating an element after the DOMDocument loaded the page. This resulted in parsing the HTML before the elements were fully update ...
I've been working on displaying a list from my Django application in an HTML select option, but I'm having trouble getting it to show up. Also, I believe I need to assign IDs to the option values in the select list, but I'm not sure where to ...
I've been attempting to customize the color of the navbar using a custom CSS code, but unfortunately without success. I've searched through various resources and tried different class names like navbar, navbar-custom, and more, but none seem to w ...
There seems to be an issue with the Angular form when checking if the form is touched, especially in relation to a checkbox element. Despite the value of the checkbox changing on click, I am seeing !newDeviceGroup.touched = true. I'm not quite sure wh ...
I'm struggling to load static .html pages for my Python application. Every time I try to access a link like index.html, the page remains blank and the server log shows a 404 error. This issue persists with other static .html files such as about.html. ...
I have just started learning HTML and CSS, and I'm curious to know how I can center the links Home, About, and Contact in the header. HTML: <body> <header> <h1><a href="#">HBT</a> </h1& ...
After searching for a jQuery animation that would constantly change text within a paragraph, I stumbled upon a solution at this link : Text changing with animation jquery. However, I encountered a challenge as I wanted to include a bootstrap button beneath ...
I'm currently working on a floating menu that includes several links. I've successfully applied a CSS style to rotate the menu vertically (-90deg), but I'm facing an issue with the height being greater than desired. How can I reduce the heig ...
My goal was to truncate a string and add an ellipsis at the end using jQuery, but my code doesn't seem to be working as intended. Below is the jQuery code I wrote: $(".link-content > h4").each(function(){ var len = $(this).text().length; ...
Issue with positioning Bootstrap dropdown I recently encountered a problem where I placed a bootstrap dropdown inside a div that centers the dropdown using CSS "text-align: center", but the dropdown menu still appeared in its original position. It seems l ...
I am facing an issue with wrapping the date and all events in one day within a div called "obal_date". The current implementation is not working as expected. The number of events can vary, but I need to group them by date. Can someone help me achieve this? ...
I am currently facing an issue with loading HTML content from my sqlite database into a webview successfully. The HTML renders beautifully, however, the local file included in the HTML is not being loaded. I have placed it in the assets folder under this s ...
Looking to retrieve results from a website by utilizing a for loop to gather and compile them together. (Please note that it involves an ASP request which generates a webpage with specific parameters) I have drafted this code in attempt to achieve the de ...
I am currently using NodeJS, Handlebars, and Bootstrap to develop a basic web application. The goal is to iterate through a MongoDB collection of simulated products and exhibit their respective fields. The data is being presented in "product cards" (see i ...
Here's how my form appears: https://i.sstatic.net/jXCxm.jpg Once I set the container to be: <div class="container" style="background:white;"> https://i.sstatic.net/DZjAK.png I want to make it white and ensure that the prog ...
I am currently using static data in a slider with wow slider jquery mobile. However, I would like to retrieve data from a database and display it in the slider. Can someone provide suggestions on how to do this? Thank you. <script type="text/javascri ...
Looking for advice on simplifying my JS stopwatch timer that currently only activates once and keeps running indefinitely. As a newcomer to JS, this is the best solution I could come up with: let time = 0 let activated = 0 function changePic() { if(a ...