Determining the dimensions of static alerts in bootstrap

I am currently working on creating a web page using Twitter Bootstrap that includes a "floating" (fixed-position) alert at the top. Here is an example of how I have set it up:

HTML:

<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <div id="top-message" class="container row col-sm-12">
       <div class="alert alert-danger">
        Hi there!
       </div>
      </div>
    </div>
    <!-- page content -->
  </div>
</div>

CSS:

#top-message {
    z-index: 10;
    position: fixed;
    width: 100%;
}

JSFiddle

When viewing this on smaller screens, it looks just as intended:

https://i.sstatic.net/UjeuX.png

However, on larger screens, the alert extends outward like this:

https://i.sstatic.net/fvTU2.png

Simply removing width: 100% from top-message is not an option, as I still want the alert to occupy some width even with small text.

What adjustments should I make so that the alert stays centered like on smaller screens, regardless of the screen size being used to view the page?

htmlcsstwitter-bootstrap

Answer №1

It seems that the issue lies within your HTML structure - why are you placing a fixed element inside a column? Try moving it outside and before the closing tag of the body for better functionality. See DEMO

HTML

<div class="container">
  <div class="row">
    <p>
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><h...
  </div>
</div>
<div id="top-message" class="container">
 <div class="alert alert-danger">
  Hi there!
 </div>
</div>

CSS

#top-message {
  z-index: 10;
    position: fixed;
    width: 100%;
  height:50px;
  left:50%;
  transform:translateX(-50%);
  top:10px;
}

Answer №2

Opting for a modal bootstrap over an alert creates a fixed position and size for the modal.

Explore more: Modal Bootstrap

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

Having trouble with a jQuery.validationEngine reference error?

Despite everything being correctly referenced, I am facing difficulties in getting it to function properly. It's strange because it worked once, but the validation message took 10 seconds to appear. After that, without making any changes, I tried agai ...

javascriptjqueryhtmljquery-plugins

I'm interested in creating a unique sidebar layout with Bootstrap 5 - how can

I'm struggling with creating a sidebar for my application and need guidance on using col to organize content into left, right, and center. Here is my navbar: <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <div class=&quo ...

cssbootstrap-5sidebar

Retrieve the value of the textarea only if it exceeds 15 characters

Could you please explain why in this example: <div id="comment-form"> <h3>Comment on this story:</h3> <form method="post" id="story-comment-form" action="#"> <textarea name="comment" id="story-comment-text"></textarea& ...

jqueryhtmltextarea

Utilize jQuery setInterval to dynamically add and remove classes on elements

My goal is to display my image in a way that resembles waving flames. I decided to achieve this effect by using two layers (flame tongues) stacked on top of each other in the same position. My initial approach was to hide one flame tongue while showing the ...

javascriptjqueryhtmlcss

Issue: The login.component.html file failed to load

I attempted to utilize a custom-made HTML file with the templateUrl attribute in Angular2. Below is the content of my login.component.ts file: import {Component} from '@angular/core'; @Component({ selector: 'login' , template ...

javascriptjqueryhtmlangulartypescript

Toggle camera on and off using a single button in Javascript

I'm encountering an issue with my camera functionality. I've implemented a button to open the camera (see code below), but I'm unsure how to turn off the camera when the same button is clicked. Snippet of my code: Button: <a type=" ...

javascripthtmljquerycssweb

How can I resize several images to fit seamlessly within a div container?

Looking for a smart method to resize multiple images to fit neatly inside a fixed-size div? I've considered using JavaScript to calculate the div's width, dividing it by the number of images, and resizing them equally while maintaining their asp ...

javascriptimagehtmlinlinescale

"Hey, do you need a see-through background for your

Currently, I am implementing the JS library found at . Unfortunately, I am struggling to make the background transparent or any other color. It appears that the issue lies in the fact that the tab styles are being overridden by the JS library whenever the ...

javascriptjquerycsstwitter-bootstrap

Incorporating personalized CSS into Drupal 7 for concealing the notice

Utilizing my custom block to showcase a flash game on the main page of my Drupal 7 setup, I encountered an irksome message: <div id="first-time"><p>No front page content has been created yet.</p> <div class="item-list"><ul>&l ...

cssdrupaldrupal-7

Eliminate any unnecessary tags located before the text

I am facing a challenge with the following code snippet. The Variable contains a string that includes HTML tags such as <img>, <a>, or <br>. My goal is to eliminate the <img> tag, <a> tag, or <br> tag if they appear befo ...

javascriptjqueryhtml

Verify if a <select> element exists inside the main div

Is there a way for me to check if a <select> element is present within the parent div and display certain content based on its existence? Appreciate any assistance! ...

javascriptjqueryhtml

Experience seamless video playback on both mobile and web browsers with JW Player

I have integrated the JW Player for video playback on both mobile and web browsers. Currently, I have a library of 100 videos with dimensions set at 1280*700 pixels. These videos work well on web browsers and load quickly depending on internet speed. Howe ...

jqueryhtmlflashjwplayer

combining class and ng-class for enhanced style control

Encountering an issue when combining regular element class and ng-class in my code. The css property of ng-class depends on a controller variable that changes for each iteration in ng-repeat. The problem arises when the 'dependent' variable has t ...

htmlangularjsangularjs-ng-repeatng-class

struggling to develop a sophisticated 'shopping cart organization' program

I am in the process of creating a database for video spots, where users can view and modify a list of spots. I am currently working on implementing a cart system that automatically stores checked spot IDs as cookies, allowing users to browse multiple pages ...

javascriptjqueryhtml

How can I customize the color of the disabled state in a mat-slide-toggle?

I am trying to customize the disabled state color of a mat-slide-toggle. This is what my slide toggle currently looks like: https://i.sstatic.net/Lhz0U.png Here is the code I have been using: <div> <mat-slide-toggle>Slide me!</mat-slide ...

cssangularangular-material

Assessing the performance of YUi and BackBone

As I embark on a new project, one of the crucial decisions to make is regarding the architecture. Currently, I am contemplating the selection of front-end components. I plan to utilize HTML5, CSS3, and Javascript for this purpose. When it comes to choos ...

htmlcssframeworksbackbone.jsyui

What is the correct way to center-align elements?

I have a basic grid layout that has been styled using CSS. #videowall-grid{ width:700px; border:1px dotted #dddddd; display: none; margin: 5px auto; padding: 5px; } #videowall-grid .square{ padding: 5px; margin: 5px; bo ...

htmlcss

Alter the background color of a table cell in Angular HTML depending on a boolean value

Attempting to use Angular ng-class to set the background color of a table cell. I'm referencing code snippets from these resources: Angular: How to change the color of cell table if condition is true Change HTML table cell background color using ...

htmlcssangular

How can we use a :before tag element to create a hovering effect on an image that remains clickable?

My objective is to create an image that is wrapped in a link. The link will have a pseudo element :before that adds a black overlay on hover. I want the image to remain clickable, but no matter what I try, the pseudo element won't position correctly o ...

css

Determine the height of the input group when a span, input, and button are included

I have been attempting to create a 3 control input-group using Bootstrap 3.3.7, but I am encountering an issue where the height of the first addon does not match the height of the input field or button that follow. <div class="input-group"> < ...

csstwitter-bootstraptwitter-bootstrap-3