responsiveness is not working for bootstrap alert and forgot password link

2018-05-16 06:04 smitha gowda imported from Stackoverflow

I have designed login page using bootstrap 3 template. I have placed bootstrap error alert and i have forgot password link, but when i resize the browser the alert and forgot password link are displaced from their place

Fiddle :https://jsfiddle.net/tgmorswx/4/

Expected Result :

<div class="container">
        <div class="row">
            <div class="col-md-4 col-md-offset-4">

             <div class="alert alert-danger alert-dismissible fade in">
             <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
             <strong>Danger!</strong> This alert box could indicate a dangerous or potentially negative action.
               </div>
                 <div class="login-panel panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">Please Sign In</h3>
                    </div>
                    <div class="panel-body">
                        <form role="form">
                            <fieldset>
                                <div class="form-group">
                                    <input class="form-control" placeholder="E-mail" name="email" type="email" autofocus>
                                </div>
                                <div class="form-group">
                                    <input class="form-control" placeholder="Password" name="password" type="password" value="">
                                </div>
                                <div class="checkbox">
                                    <label>
                                        <input name="remember" type="checkbox" value="Remember Me">Remember Me
                                    </label>
                                </div>
                                <!-- Change this to a button or input when using this as a form -->
                                <a href="index.html" class="btn btn-lg btn-success btn-block">Login</a>
                            </fieldset>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

2 answers

answered 2018-05-16 06:22 לבני מלכה

remove this:

.login-panel {
    margin-top: 25%; 
}

by: (see fiddle:https://jsfiddle.net/8f4epsqh/)

.login-panel{
   margin-top: 15px!important;}
.alert-danger{
  margin-top: 15px!important;
}

                      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
        <div class="row">
            <div class="col-md-4 col-md-offset-4">
			
			 <div class="alert alert-danger alert-dismissible fade in">
             <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
             <strong>Danger!</strong> This alert box could indicate a dangerous or potentially negative action.
               </div>
                 <div class="login-panel panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">Please Sign In</h3>
                    </div>
                    <div class="panel-body">

                    <form role="form">
                            <fieldset>
                                <div class="form-group">
                                    <input class="form-control" placeholder="E-mail" name="email" type="email" autofocus>
                                </div>
                                <div class="form-group">
                                    <input class="form-control" placeholder="Password" name="password" type="password" value="">
                                </div>
                                <div class="checkbox">
                                    <label>
                                        <input name="remember" type="checkbox" value="Remember Me">Remember Me
                                    </label>
                                </div>
                                <!-- Change this to a button or input when using this as a form -->
                                <a href="index.html" class="btn btn-lg btn-success btn-block">Login</a>
                            </fieldset>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

you can set margin-top to alert(as i did)

answered 2018-05-16 07:59 faisal97

Check This One

https://jsfiddle.net/F86597/pq4ncrb7/1/

.alert-danger{
  margin-top: -85px!important;
  position: absolute;
}
.login-panel{
   margin-top: 100px!important;
}

See also questions close to this topic

Onclick button center of screen

Here is my code for box. Below is what it looks like in the browser. I've tried text-align: center, box-align: center, and position: relative. None of these have worked. What am I missing? enter image description here
Image Mapping for ePaper

I'm working on a new project for a media company where I need to create their website something like their competitors epaper.bhaskar.com. After a bit of researching I found that they are using a plugin called maphilight. But my question is that do they manually provide coordinates for each area or is there an automated way to do this?

Another one of their competitors erelego.com is also have this feature but I don't know what plugin or technology they are using and it seems like an automated process.

Any help and clarity regarding this would be appreciated. Thanks!
HTML table with horizontal and vertical scroll with first column fixed

I want to create a table that has fixed header and a scroll-able tbody(horizontal and vertical);first column of the tbody should not be scroll-able; when I scroll it horizontal the header also should scroll, but when I scroll vertical the header should be fixed, and the browser window should not have a horizontal scroll, only table should have horizontal scroll. so, how can it be achieved?
Arranging layout, I am using bootstrap 4.1.3
I have this layout, here in this image :

I want the boxes to be listed dynamically. Every of the columns are inside the row. Is it possible to do it with css?

Here is a simple snippet to the above image.
```
<!-- https://codepen.io/umanga/pen/dQRVGX --!>
```

Bootstrap Input Group with Image

I am using bootstrap 3 for creating input groups with normal text as shown in image below

How can I get input group with image and also more than 2 span text.

I am using following code for normal input group

<div class="input-group input-group-lg">
                <input type="text" style="background-color: black; color: white" class="form-control" aria-label="You Send">
                <div class="input-group-btn">
                  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
                  <ul class="dropdown-menu dropdown-menu-right">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                  </ul>
                </div><!-- /btn-group -->
              </div><!-- /input-group -->

How can i make “grid-(row or column): span 2” be responsive on smaller devices?

how can i make grid-(row or column): span 2 be responsive? what i mean is, if i resize the screen to mobile, it should look something like output of col-sm-12

also, if i comment out :nth-child(4) & :last-child, the output will look exactly like col-sm-12

Please i need help :(

codepen code

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-auto-rows: minmax(250px, 1fr);
  grid-auto-flow: dense;
  grid-gap: 5px;
  padding: 5px;
}
.card-grid figure {
  margin: 0;
  position: relative;
}
.card-grid figure img {
  position: absolute;
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.card-grid figure figcaption {
  position: absolute;
  height: 75px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  background: rgba(71, 127, 45, 0.75);
  padding: 15px;
  color: white;
  overflow: hidden;
}
.card-grid figure figcaption blockquote {
  height: 60px;
  overflow: hidden;
}
.card-grid > :nth-child(4) {
  grid-row: span 2;
}
.card-grid > :last-child {
  grid-column: span 2;
}
.card-grid .card-event {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: space-around;
  color: white;
  background: rgba(0, 0, 0, 0.5);
}
.card-grid .card-event img {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: -1;
  -o-object-fit: cover;
     object-fit: cover;
}
.card-grid .card-event .event-date {
  text-align: center;
  height: 120px;
}
.card-grid .card-event .event-date > :nth-child(2) {
  font-size: 2em;
  border-left: 7px solid #477f2d;
  border-right: 7px solid #477f2d;
  margin: 0;
  height: 50px;
  background: white;
  color: #477f2d;
}
.card-grid .card-event .event-date > :nth-child(odd) {
  height: 28px;
  background: #477f2d;
}
.card-grid .card-event .event-description {
  text-align: center;
}
.card-grid .card-event .event-description > :nth-child(1n + 0) {
  padding: 0;
  margin: 0;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap-grid.min.css" rel="stylesheet"/>
</head>
<body>
<main role="main">
 <section class="container card-grid">
  <figure>
   <img src="https://res.cloudinary.com/imgursoyjean/image/upload/v1537496761/mis/mis-homepage/2kids-reading.jpg" alt="two kids reading a book">
   <figcaption>
    <h4>Year 3 Students</h4>
    <blockquote>
     <p>Spends more of their free time in the Library. Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
    </blockquote>
    <a class="btn btn-info" href="#">Read More</a>
   </figcaption>
  </figure>
  <div class="card-event">
   <img src="https://res.cloudinary.com/imgursoyjean/image/upload/v1537496765/mis/mis-homepage/football.jpg" alt="">
   <div class="event-date">
    <div>SEP</div>
    <p>17</p>
    <div>MON</div>
   </div>
   <div class="event-description">
    <h2>Under 11 Mixed</h2>
    <h3>Football Match</h3>
    <p>ISC vs MIS<br> (venue <strong>@ISC</strong>)</p>
   </div>
  </div>

  <figure>
   <img src="https://res.cloudinary.com/imgursoyjean/image/upload/v1537496829/mis/mis-homepage/Mr-Mark.jpg" alt="School Principal's speech on the stage">
   <figcaption>
    <h4>Principal's Graduation Speech</h4>
    <blockquote>
     <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Architecto assumenda fugiat enim natus labore neque ipsa numquam temporibus quam fuga, eaque atque dolores dolorem officiis.</p>
    </blockquote>
    <a class="btn btn-info" href="#">Read More</a>
   </figcaption>
  </figure>

  <figure>
   <img src="https://res.cloudinary.com/imgursoyjean/image/upload/v1537496791/mis/mis-homepage/library.jpg" alt="Teacher reading a book to his student">
   <figcaption>
    <h4>Journey of a Future Bookworm</h4>
    <blockquote>
     <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Architecto assumenda fugiat enim natus labore neque ipsa numquam temporibus quam fuga, eaque atque dolores dolorem officiis.</p>
    </blockquote>
    <a class="btn btn-info" href="#">Read More</a>
   </figcaption>
  </figure>

  <div class="card-event">
   <img src="https://res.cloudinary.com/imgursoyjean/image/upload/v1537496765/mis/mis-homepage/football.jpg" alt="">
   <div class="event-date">
    <div>SEP</div>
    <p>18</p>
    <div>TUE</div>
   </div>
   <div class="event-description">
    <h2>Under 13 Boys</h2>
    <h3>Football Match</h3>
    <p>St. Andrews vs MIS<br> (venue <strong>@MIS</strong>)</p>
   </div>
  </div>

  <figure>
   <img src="https://res.cloudinary.com/imgursoyjean/image/upload/v1537496800/mis/mis-homepage/Mr-Craig.jpg" alt="Mr. Craig Jenkins storytelling to the students">
   <figcaption>
    <h4>Mr. Craig's Charismatic Storytelling</h4>
    <blockquote>
     <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Architecto assumenda fugiat enim natus labore neque ipsa numquam temporibus quam fuga, eaque atque dolores dolorem officiis.</p>
    </blockquote>
    <a class="btn btn-info" href="#">Read More</a>
   </figcaption>
  </figure>
 </section>

</main>
</body>
</html>

Bootstrap 4 vertical align not working at all for me

This is code that I directly copied and pasted from Bootstrap's documentation. And for some reason when I use it (with 2 columns), the first column center aligns vertically to the height of the second column. And nothing changes no matter the height of the parent element. Is there something I am doing wrong? I also have included the code I am trying to use. I am look for both columns to vertically align into the center of the containing element.

<div class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>


<div class="container-fluid">
  <div class="row align-items-center">
    <div class="col-sm pink"></div>
    <div class="col-sm pink"></div>
  </div>
</div>

Related questions

responsiveness is not working for bootstrap alert and forgot password link

2 answers

See also questions close to this topic