Occupying both horizontal and vertical space in a Bootstrap column

Question

Occupying both horizontal and vertical space in a Bootstrap column

I have set up my buttons like this:

https://i.stack.imgur.com/OMfhp.png

In the image, you can see that the Left Option Button is larger, and I want all buttons to be like that. They are supposed to be aligned next to each other as I am using the Bootstrap grid system with 3x4 columns. The size of the button is currently not taking up all available horizontal space because I added this line to my HTML:

style="width: 400%; height: 500%;"

This was just to show visually what I am trying to achieve. I am new to bootstrap, so styling it is a bit challenging for me. Below is my HTML. Do I need CSS to accomplish what I want? If so, do I need to specify the exact height I want the buttons to be or is there a more relative method I can use to avoid issues on mobile devices?

I also need to add text inside the button that scales properly once the buttons are scaled correctly. Is that possible?

<div class="categories-container">
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <form role="button">
                        <div class="input-group">
                            <input type="button" class="btn btn-primary btn-lg" value="Option" name="category-gameplay-btn" id="category-gameplay-btn">
                        </div>
                    </form>
                </div>
                <div class="col-md-4">
                    <form role="button">
                        <div class="input-group">
                            <input type="button" class="btn btn-primary btn-lg" value="Option" name="category-editor-btn" id="category-editor-btn">
                        </div>
                    </form>
                </div>
                <div class="col-md-4">
                    <form role="button">
                        <div class="input-group">
                            <input type="button" class="btn btn-primary btn-lg" value="Option" name="category-editor-btn" id="category-editor-btn">
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

html css twitter-bootstrap

Answer 1

Answer №1

Here are a couple of examples that demonstrate the concept you are attempting to implement.

1) Utilize a Justified button group instead of a grid and incorporate media queries to cater to different viewport sizes.

2) Implement a grid similar to your example, then adjust it using media queries for responsiveness based on the viewport size.

Check out the example snippet below.

.btn.btn-bg {
  height: 300px;
  font-size: 60px;
}
@media (max-width: 767px) {
  .btn.btn-bg {
    height: 150px;
    font-size: 30px;
  }
}
@media (max-width: 480px) {
  .btn.btn-bg {
    height: 75px;
    font-size: 22px;
  }
}
@media (max-width: 360px) {
  .btn.btn-bg {
    height: 35px;
    font-size: 15px;
  }
}
/*Second Sample*/

.btn.btn-bg2 {
  height: 300px;
  font-size: 60px;
}
@media (max-width: 767px) {
  .btn.btn-bg2 {
    height: 60px;
    font-size: 30px;
  }
}
@media (max-width: 480px) {
  .btn.btn-bg2 {
    height: 45px;
    font-size: 20px;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="well">
    <form role="search">
      <div class="input-group">
        <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
        <div class="input-group-btn">
          <button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span>

          </button>
        </div>
      </div>
    </form>
  </div>
</div>
<div class="categories-container">
  <div class="container">
    <div class="btn-group btn-group-justified" role="group" aria-label="...">
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-default btn-bg">Left</button>
      </div>
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-default btn-bg">Middle</button>
      </div>
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-default btn-bg">Right</button>
      </div>
    </div>
  </div>
</div>
<hr>
<div class="container">
  <div class="well">
    <form role="search">
      <div class="input-group">
        <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
        <div class="input-group-btn">
          <button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span>

          </button>
        </div>
      </div>
    </form>
  </div>
</div>
<div class="categories-container">
  <div class="container">
    <div class="row ">
      <div class="col-sm-4">
        <input type="button" class="btn btn-primary btn-lg btn-block btn-bg2" value="Option" name="category-gameplay-btn" id="category-gameplay-btn">
      </div>
      <div class="col-sm-4">
        <input type="button" class="btn btn-primary btn-lg btn-block btn-bg2" value="Option" name="category-editor-btn" id="category-editor-btn">
      </div>
      <div class="col-sm-4">
        <input type="button" class="btn btn-primary btn-lg btn-block btn-bg2" value="Option" name="category-editor-btn" id="category-editor-btn">
      </div>
    </div>
  </div>
</div>

Answer 2

Here are a couple of examples that demonstrate the concept you are attempting to implement.

1) Utilize a Justified button group instead of a grid and incorporate media queries to cater to different viewport sizes.

2) Implement a grid similar to your example, then adjust it using media queries for responsiveness based on the viewport size.

Check out the example snippet below.

.btn.btn-bg {
  height: 300px;
  font-size: 60px;
}
@media (max-width: 767px) {
  .btn.btn-bg {
    height: 150px;
    font-size: 30px;
  }
}
@media (max-width: 480px) {
  .btn.btn-bg {
    height: 75px;
    font-size: 22px;
  }
}
@media (max-width: 360px) {
  .btn.btn-bg {
    height: 35px;
    font-size: 15px;
  }
}
/*Second Sample*/

.btn.btn-bg2 {
  height: 300px;
  font-size: 60px;
}
@media (max-width: 767px) {
  .btn.btn-bg2 {
    height: 60px;
    font-size: 30px;
  }
}
@media (max-width: 480px) {
  .btn.btn-bg2 {
    height: 45px;
    font-size: 20px;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="well">
    <form role="search">
      <div class="input-group">
        <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
        <div class="input-group-btn">
          <button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span>

          </button>
        </div>
      </div>
    </form>
  </div>
</div>
<div class="categories-container">
  <div class="container">
    <div class="btn-group btn-group-justified" role="group" aria-label="...">
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-default btn-bg">Left</button>
      </div>
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-default btn-bg">Middle</button>
      </div>
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-default btn-bg">Right</button>
      </div>
    </div>
  </div>
</div>
<hr>
<div class="container">
  <div class="well">
    <form role="search">
      <div class="input-group">
        <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
        <div class="input-group-btn">
          <button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span>

          </button>
        </div>
      </div>
    </form>
  </div>
</div>
<div class="categories-container">
  <div class="container">
    <div class="row ">
      <div class="col-sm-4">
        <input type="button" class="btn btn-primary btn-lg btn-block btn-bg2" value="Option" name="category-gameplay-btn" id="category-gameplay-btn">
      </div>
      <div class="col-sm-4">
        <input type="button" class="btn btn-primary btn-lg btn-block btn-bg2" value="Option" name="category-editor-btn" id="category-editor-btn">
      </div>
      <div class="col-sm-4">
        <input type="button" class="btn btn-primary btn-lg btn-block btn-bg2" value="Option" name="category-editor-btn" id="category-editor-btn">
      </div>
    </div>
  </div>
</div>

Answer 3

Answer №2

To adjust the width, you need to ensure that both the button and its containing div are set to 100% width:

.btn, .input-group {
    width: 100%;
}

For the height, you can utilize CSS to scale it relative to the viewport size using vw units, or alternatively, you could dynamically adjust the height based on the width using jQuery:

$(document).ready(btnHeight);
$(window).on('resize', btnHeight);

function btnHeight() {
    var width = $('.btn').width();
    $('.btn').css('height', width*0.8);
};

To scale the font size, you can employ vw units or incorporate media queries for finer control. Explore this example on Bootply

Answer 4

To adjust the width, you need to ensure that both the button and its containing div are set to 100% width:

.btn, .input-group {
    width: 100%;
}

For the height, you can utilize CSS to scale it relative to the viewport size using vw units, or alternatively, you could dynamically adjust the height based on the width using jQuery:

$(document).ready(btnHeight);
$(window).on('resize', btnHeight);

function btnHeight() {
    var width = $('.btn').width();
    $('.btn').css('height', width*0.8);
};

To scale the font size, you can employ vw units or incorporate media queries for finer control. Explore this example on Bootply

Occupying both horizontal and vertical space in a Bootstrap column

Answer №1

Answer №2

Similar questions

Achieving equal alignment of items with flexbox

JavaScript encountered an error stating "phone is not defined" due to an uncaught ReferenceError

Hover to stop menu movement

Issue Encountered While Attempting to Show a Div Element within a Function

I've created a logo, but why are there two logos on my website?

I'm puzzled as to why my fixed element is gravitating towards the right side of the entire screen instead of aligning with the right side of its parent element

When the screen size decreases, display the title on two lines

What is the best way to update text in an element when hovering or activating it?

What is the best way to eliminate duplicate values from a column in a data set

Is there a way to identify the source of a div's scrolling behavior?

Switching over to the latest version of Material-UI, v1.x.x

When the play button is clicked, the video slides over to the left

Using JavaScript to generate a <style> element and accessing the cssRules

Executing code upon the completion of jquery's slideUp() function

After applying 'all: unset;' to remove all styles, the CSS hyphens property does not work as expected in Chrome

Transforming JSP style tags into CSS declarations

Category-Specific Page Display

The Bootstrap modal stubbornly refuses to close even after resetting the HTML body

Is there a method to exclude children objects from spring animations during application?

What is the process for implementing a grid with 5 columns on larger screens and 2 columns on smaller screens using reactjs?