Related questions

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 : enter image description here 

<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

  • bootstrap 4 carousel resizing images

    I have this code here, Currently my carousel's images span over the entire screen, I want to make it short in height and width and the images remaining responsive. How can I achieve this effect. And I am using bootstrap 4, just to clear it out.

        <style>


.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
  display: block;
}

    </style>
  </head>

  <body class="container-fluid">

    <nav style="border:1px solid black;">
      Navigation Space
    </nav>

                                                    <!--CAROUSEL-->

<div id="myCarousel" class="carousel slide" data-ride="carousel">

  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>

  <!--Wrapper for Slides-->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="images/car1.jpeg" alt="car1">
      <div class="carousel-caption">
        <h3>Making Data Available</h3>
        <p>With 100% Accuracy</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="images/car2.jpeg" alt="car2" class="img-responsive">
    </div>
    <div class="carousel-item">
      <img src="images/car3.jpeg" alt="car3">
    </div>
  </div>

  <!--Left and Right Controls-->
  <a class="carousel-control-prev" href="#myCarousel" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#myCarousel" data-slide="next">
    <span class="carousel-control-next-icon"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

  • Can I use css or html to add a feature by default?

    In case my question was vague, I'm trying to create a new SNS website for my own project, and I'm implementing a lot of features from other top SNS community (fb, instagram, etc.).

    More specifically, I want to know if there's a feature in css or html that allows me to add a feature by default. For example, if a person makes a new post, his profile picture, name, and date is at the top of the post by default, and the comment, like, share functions are at the bottom of the post.

    I realize that to make a website that has account and password system needs back-end experience, but I was wondering if there's any feature on the front-end side.

  • Child dropdown list refresh from parent value selected

    I'm new to Ruby, as the below code I still have the previous value selected after I changed the parent value, I need help to find out a solution for this matter:

    CODE

    here is my JavaScript code 

    $(function() {

  var parentFieldId = 'issue_field_72';
  var childFieldId = 'issue_field_73';

  var isTarget = function(child, parent) {

    return child.text().indexOf(parent.text()) == 0;
  }

  var narrowChildField = function() {
    var parentSelected = $('#' + parentFieldId + ' > option:selected');

    $('#' + childFieldId + ' > option').each(function() {

      var child = $(this);
      if (isTarget(child, parentSelected)) {
        child.show();
        child.prop('disabled', false);
      } else {
        child.hide();
        child.prop('disabled', true);
      }
    });
  }
  narrowChildField();
  $('#all_attributes').change(function(e) {
    if (e.target.id == parentFieldId) {
      narrowChildField();
    }
 });

  var _replaceIssueFormWith = replaceIssueFormWith;
  replaceIssueFormWith = function(html){

    _replaceIssueFormWith(html);

    narrowChildField();
  };
});
    Here is my HTML code 
     
<div id="all_attributes" >

<select name="issue[custom_field_values][72]" id="issue_field_72" class="list_cf"><option value="">--- Please select ---</option><option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
<option value="F">F</option></select>

<select name="issue[custom_field_values][73]" id="issue_field_73" class="list_cf">

  <option value="">--- Please select ---</option>

  <option value="A-1" disabled="" style="display: none;">A-1</option>
<option value="A-2" disabled="" style="display: none;">A-2</option>
<option value="A-3" disabled="" style="display: none;">A-3</option>
<option value="B-1" disabled="" style="display: none;">B-1</option>
<option value="B-2" disabled="" style="display: none;">B-2</option>
<option value="B-3" disabled="" style="display: none;">B-3</option>
<option value="B-4" disabled="" style="display: none;">B-4</option>
<option value="C-1" disabled="" style="display: none;">C-1</option>
<option value="C-2" disabled="" style="display: none;">C-2</option>
<option value="C-3" disabled="" style="display: none;">C-3</option>
<option value="C-4" disabled="" style="display: none;">C-4</option>
<option value="C-5" disabled="" style="display: none;">C-5</option>
<option value="C-6" disabled="" style="display: none;">C-6</option></select>

</div>

    Output

    enter image description here

    As you see the output i need a solution for this javascript code.

  • Building a Custom Flash Video Player using JavaScript, HTML

    I've seen lot of articles for how to play videos of types (.mp4, .ogg etc) using JavaScript, HTML with full controls like play, replay, mute/unmute volume, progress bar, But no any article i found for how to play flash video(.swf) with full controls of same as others type of videos. Anyone did this ??

    Any help is appreciated. Thanks..

  • Text from database overflow bootstrap container

    I'm trying to get a text from the database but it overflows it's container. I tried putting a lot of lorem ipsum in the original code without the database info and it works fine.

    This is what happen when I get the info directly from the database:

    And this is a native lorem ipsum in the html file:

    This is my html code:

                <div class="col-md-8">
            <div class="row">
                <?php
                $query = $mysqli->query("SELECT id,title,preview,author,timepost FROM news ORDER BY timepost DESC LIMIT 3");
                $i = 1;


                while($array = $query->fetch_array())
                {
                    $date = DateTime::createFromFormat("Y-m-d H:i:s",$array['timepost']); ?>
                    <div class="col-md-12 mb-3" style="cursor: default;" id="<?php echo 'newsJunebia' . $i; $i++; ?>">
                        <div class="row">
                            <div class="col-md-12 bg-negro text-white rounded-top">
                                <strong><?= $array['title']; ?></strong>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-8 bg-negro-opacity text-naranja">
                                <small><em>Publicado el <?=$date->format('d');?> de <?= $date->format('F') ?>o del <?= $date->format('Y'); ?> a las <?= $date->format('H:i') ?></em></small>
                            </div>
                            <div class="col-md-4 bg-negro-opacity text-naranja d-flex flex-row-reverse">
                                <small><em>Autor: <?= $array['author']; ?></em></small>
                            </div>
                        </div>
                        <div class="row">
                            <div  class="col-md-12 bg-negro-opacity text-white">
                                <p><?php echo $array['preview']; ?></p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12 bg-negro-opacity text-naranja rounded-bottom text-center">
                                <span style="cursor: pointer;" class="font-weight-bold font-italic text-naranja plusNews">Ver la noticia completa</span>
                            </div>
                        </div>
                    </div>
        <?php   } ?>

    This is the form from where I save this info:

    <div class="row">
<div class="col-md-12 mt-4">
    <div class="card">
        <div class="card-header bg-negro text-white">
            <h5 class="card-title text-center">Agregar noticia</h5>
        </div>
        <form class="form" role="form" method="POST" id="form-news">
            <input type="hidden" name="dblanguage" value="es_LA">
            <div class="card-body bg-gris text-naranja font-weight-bold">
                <div class="form-group">
                    <label for="newsType">Categoría de la noticia</label>
                    <select class="custom-select" id="newsType" name="newsType" disabled>
                        <option>Noticia Junebia</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="newsTitle">Título de la noticia (<span id="maxCharTitle">60</span> caracteres restantes)</label>
                    <input type="text" name="newsTitle" id="newsTitle" class="form-control" maxlength="60">
                </div>
                <div class="form-group">
                    <label for="newsPreview">Texto de vista previa (<span id="maxChar">120</span> caracteres restantes)</label>
                    <textarea type="text" name="newsPreview" id="newsPreview" class="form-control" maxlength="100"></textarea>
                </div>
                <div class="form-group">
                    <label for="newsContent">Contenido de la noticia</label>
                    <textarea id="newsContent" name="newsContent" class="form-control"></textarea>
                </div>
                <input type="hidden" name="username" value="<?= $_SESSION['userName'] ?>">
            </div>
            <div class="container-fluid justify-content-center d-flex bg-gris">
                <button type="submit" class="btn btn-naranja btn-lg mb-2" id="btnAgregar">Agregar</button>
            </div>
        </form>
    </div>
</div>

    This is my php file to handle that form:

        require_once('../database.php');

if(!isBanned() && isAdmin())
{
    if(isset($_POST['newsTitle']))
    {
        $newsTitle = $_POST['newsTitle'];
        $newsPreview = $_POST['newsPreview'];
        $newsContent = $_POST['newsContent'];
        $newsAuthor = $_POST['username'];
        $newsTime = date('Y-m-d H:i:s');
        $stmt = $mysqli->prepare("INSERT INTO news(title,preview,content,author,timepost) VALUES(?,?,?,?,?)");
        $stmt->bind_param('sssss',$newsTitle,$newsPreview,$newsContent,$newsAuthor,$newsTime);
        $stmt->execute();
        echo true;
    }
    else
    {
        echo false;
    }
}
else
{
    echo false;
}

    I'm using bootstrap 4.1

  • Bootstrap 4 - can i have a border showing based on resolution

    Is it possible to have a border showing on the right for a large resolution but not others.

    something like

    <div class="border-lg-right">blah</div>
  • Why is mt-3 [mb-3] not applied to each row in bootstrap?

    I have two rows and want to add some space to the top and the buttom. So I added the attributes mt-3 and mb-3. But these attributes seems applied to the first row only.

    How can I achieve apply them to every row?

    <!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
</head>
<body>
    <div class="row mt-3 mb-3" style="background-color:white">
        <div class="col-3">
            completions based on variable types, function definitions, and imported modules.
        </div>
        <div class="col-3">
            completions based on variable types, function definitions, and imported modules.
        </div>
        <div class="col-3">
            completions based on variable types, function definitions, and imported modules.
        </div>
        <div class="col-3">
            completions based on variable types, function definitions, and imported modules.
        </div>
    </div>

    <div class="row mt-3 mb-3" style="background-color:whitesmoke">
        <div class="col-3">
            completions based on variable types, function definitions, and imported modules.
        </div>
        <div class="col-3">
            completions based on variable types, function definitions, and imported modules.
        </div>
        <div class="col-3">
            completions based on variable types, function definitions, and imported modules.
        </div>
        <div class="col-3">
            completions based on variable types, function definitions, and imported modules.
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</body>
</html>