0

The main page of an html and css learning project has 3 columns using the bootstrap 3 classes. The first contains a text and a button to copy this text to the clipboard. The second and third have a link.

I tried to configure with the codes below.

Here is a fiddle: https://jsfiddle.net/buhvm3o8/4/

html code:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row-fluid">
    <div class="col-md-4">
      <div id="select_txt" class="alert alert-success">
        <strong>some text do copy</strong>

        <button class="btn btn-secondary btn-sm" type="button" onclick="copy_data(select_txt)" style="float: right;">
          <i class="glyphicon glyphicon-copy"></i>copy</button>
      </div>
    </div>
    <div class="col-md-4">
      <div class="alert alert-success">
        <a href="#">site1</a>
      </div>
    </div>
    <div class="col-md-4">
      <div class="alert alert-success">
        <a href="#">site2</a>
      </div>
    </div>
  </div>
</div>

css code:

body {
  font-family: "roboto", monospace;
  height: 100%;
}

.alert-success {
  width: 100%;
  min-height: 100%;
  text-align: center;
}

My questions are:

  1. How can I set the "col-md-4" correctly so that it is as a column, because as shown in the image below, it is as a row.

now

  1. How can I set the "col-md-4" to the screen height of anyone looking at it.

expected

Dex
  • 53
  • 8

3 Answers3

1
  1. Use Bootstrap's Grid system to ensure that your columns are always the proper width. Right now they are set to be 12 units long when the screen size is below medium, and 4 units long at any greater size. Instead, you should have col-xs-4 on you class to force it to be 4 units at every screen size.
  2. The easiest method would be to use the vh unit in CSS. Add a class to the column in question and set the height to height: 100vh which corresponds to 100% of the view height.

Other methods include using Flexbox to force the page width, or the always troublesome 100% height attribute. In most cases, in order for 100% height to work, you will need either (a) all parents of the element to have their height set to 100% or (b) the direct parent to have a statically defined height

Your fiddle with the updated values and the 100% height method

MichaelM
  • 964
  • 7
  • 20
0

try adding xs breakpoint for smaller screens:

body {
  font-family: "roboto", monospace;
  height: 100%;
}

.alert-success {
  width: 100%;
  min-height: 100%;
  text-align: center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row-fluid">
    <div class="col-xs-4">
      <div id="select_txt" class="alert alert-success">
        <strong>some text to copy</strong>

        <button class="btn btn-secondary btn-sm" type="button" onclick="copy_data(select_txt)" style="float: right;">
          <i class="glyphicon glyphicon-copy"></i>copy</button>
      </div>
    </div>
    <div class="col-xs-4">
      <div class="alert alert-success">
        <a href="#">site1</a>
      </div>
    </div>
    <div class="col-xs-4">
      <div class="alert alert-success">
        <a href="#">site2</a>
      </div>
    </div>
  </div>
</div>
adel
  • 3,436
  • 1
  • 7
  • 20
0

  1. That's the expected behavior of columns in Bootstrap! They collapse when the device's width get shorter. Try expanding your fiddle's preview width and it turns back into a column. That's how we can create responsible websites w/ bootstrap. If you want to dig deeper into it, I suggest reading bootstrap's grid system manual. Instead of column-md-4 you may use col-4 and it will be shown as a column independently of your device's width, for example.

  2. I recommend reading this question. The way height works in CSS is slightly different than width, so what you need is to set a reference on either your html or body tags.

lzbernardo
  • 196
  • 11