Reduce the width of a div using Bootstrap

I am looking to adjust the width of the black background to match the image and buttons for better proportions.

Below is the code for one component on the page, with a similar structure for other components as well.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dbb9b4b4afa8afa9baab9beff5edf5e9">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<div class="row">
  <div class="col-sm-6">
    <div class="panel panel-primary">
      <div class="panel-body" style="background-color: black;">
        <img src="https://via.placeholder.com/100" class="Image" alt="Image">

        <div class="col text-center">
          <button type="button" class="btn btn-primary">Login as a Coach</button>
          <br/>
          <button type="button" class="btn btn-primary">Join as a Coach</button>
        </div>
      </div>
    </div>
  </div>
  <div>

Expected Output:

htmlcssbootstrap-4

Answer №1

If you're aiming for a more condensed layout, consider adjusting the column configuration. By decreasing the column size as the screen size expands, you can achieve a compact design. Additionally, utilizing flexbox centering with justify-content-center on the row can enhance the alignment.

I have eliminated outdated and unavailable panel classes while introducing a custom background class. To improve aesthetics, I incorporated Bootstrap's border radius classes for the boxes, along with various spacing classes.

.bg-black {
  background: #000;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="781a17170c0b0c0a1908384c564e564a">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<div class="container">
  <div class="row justify-content-center pt-2">
    <div class="col-sm-6 col-md-5 col-lg-4">
      <div class="bg-black text-center p-3 mb-3 rounded-lg">
        <img src="https://via.placeholder.com/600x400" class="img-fluid mb-2 rounded-lg" alt="">

        <button type="button" class="btn btn-primary btn-block">Log in as a Coach</button>
        <button type="button" class="btn btn-primary btn-block mt-2">Join as a Coach</button>
      </div>
    </div>

    <div class="col-sm-6 col-md-5 col-lg-4">
      <div class="bg-black text-center p-3 mb-3 rounded-lg">
        <img src="https://via.placeholder.com/600x400" class="img-fluid mb-2 rounded-lg" alt="">

        <button type="button" class="btn btn-primary btn-block">Log in as a Coach</button>
        <button type="button" class="btn btn-primary mt-2 btn-block">Join as a Coach</button>
      </div>
    </div>
  </div>
</div>

Answer №2

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5d3b36363d3a3d3b28391879381905">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<div class="row">
  <div class="col-sm-6">
    <div class="panel panel-primary">
      <div class="panel-body" style="background-color: black;">
        <img src="https://via.placeholder.com/100" class="Image" alt="Image">

        <div class="col text-center">
          <button type="button" class="btn btn-primary">Login as a Coach</button>
          <br/>
          <button type="button" class="btn btn-primary">Join as a Coach</button>
        </div>
      </div>
    </div>
  </div>
  <div>

.panel-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}
button.btn.btn-primary {
    width: 100%;
    margin: 5px 0;
    background: #0c82af;
    border-color: #0c82af;
    padding: 6px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bac8c5c5cecbcac8dbdad49fc18ad44238e98419079cdca">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<div class="row">
  <div class="col-sm-6">
    <div class="panel panel-primary">
      <div class="panel-body" style="background-color: black;">
        <img src="https://via.placeholder.com/100" class="Image" alt="Image">

        <div class="col text-center">
          <button type="button" class="btn btn-primary">Login as a Coach</button>
          <br/>
          <button type="button" class="btn btn-primary">Join as a Coach</button>
        </div>
      </div>
    </div>
  </div>

Answer №3

A unique design for Bootstrap 4 featuring two vertically aligned cards that stack on mobile devices.

To create full vertical space within the container-fluid, use h-100 mh-100. Vertical centering of the cards is achieved with align-content-sm-center (sm refers to a minimum view width of 576px).

Test the difference between small and large browser views by clicking 'Run code snippet' and then 'Full page'.

Update: Code unrelated to Bootstrap 4 has been removed.

html, body {
  height: 100%;
}
body {
  background-color: black;
}
.container-fluid {
  /* adjust max width as needed */
  max-width: 1140px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2b4944445f585f594a5b6b1f051d0519">[email protected]</a>/dist/css/bootstrap.min.css" crossorigin="anonymous">

<div class="container-fluid h-100 mh-100 d-flex align-content-sm-center">
    <div class="row align-content-sm-center pt-3">
        <div class="col-sm-6 pb-3">
            <div class="card border-0">
                <a href="#" class="card-img-top">
                    <img src="https://mdbcdn.b-cdn.net/img/new/standard/nature/111.webp" class="d-block img-fluid" alt="">
                </a>
                <div class="card-body">
                    <h5 class="card-title">Login as a Coach</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <a href="#!" class="btn btn-primary">Login</a>
                </div>
            </div>
        </div>
        <div class="col-sm-6 pb-3">
            <div class="card border-0">
                <a href="#" class="card-img-top">
                    <img src="https://mdbcdn.b-cdn.net/img/new/standard/nature/120.webp" class="d-block img-fluid" alt="">
                </a>
                <div class="card-body">
                    <h5 class="card-title">Join as a Coach</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <a href="#!" class="btn btn-primary">Join</a>
                </div>
            </div>
        </div>
    <div>
</div>

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

jquery and radio button technology

I am attempting to create a basic function using jquery, but it is not functioning properly. Here is the radio button in question: <input type="radio" id="price" name="shipping" class="styled" /> In the head section of my HTML, I have included the ...

phpjavascriptjqueryhtmlajax

increasing the gap spacing between Bootstrap panels in columns

On this page: I am trying to eliminate the space between the panels in the "Funzionalità" section. Each panel has the following code: #bor_panel { border-radius: 12px; border: 2px solid #287396; padding: 20px; width: 170px; height: 170px; display: flex; ...

htmlcsspanelbootstrap-4col

Neglecting Margins: The Challenge of Specificity

While utilizing the Foundation 4 framework, I've encountered an issue where the margins are being overridden by the framework's default settings. This situation forces me to use the !important keyword to apply margins to specific elements. Below ...

csssasszurb-foundation

Tips for connecting a Vuetify v-menu to its parent element within a list that can be scrolled

Within the project I am working on, there exists a scrollable inventory of items. Each item possesses a menu that is triggered open when the respective activator button is hovered over. By default, v-menu components are connected to the v-app element, ser ...

htmlvue.jsvuetify.js

What's the best way to integrate Bootstrap into my HTML document?

Hey there, I'm new to the coding world and just started learning. I could use some assistance with including Bootstrap v5.1 in my HTML code. The online course I'm taking is using an older version of Bootstrap, so I'm having trouble finding t ...

javascripthtmltwitter-bootstrapbootstrap-5

What is the best way to make sure the background color of a container stretches across the full width of the screen?

I am currently learning HTML and CSS, and as a practice project, I am working on building a portfolio webpage. In the image provided, there are two containers, and I am facing an issue with the space on the sides when changing the background color. Despite ...

javascriptjqueryhtmlcss

Can you set the line thickness for "text-decoration: line-through;" using CSS?

When it comes to the line-through property in CSS, the default weight of 1px is ideal for body copy set at 1em. However, for larger items like a price set at 3em on an offer site, 1px can feel too light. Is there a way to increase the line weight for line ...

css

The functionality of the Visual Studio HTML Designer seems to be malfunctioning

I am currently learning how to use Bootstrap 4 with Visual Studio 2017. Previously, I was writing my code in Notepad. To work with the HTML file created by the Web Forms Editor, I copied and pasted the same codes into it. I made sure to properly lin ...

visual-studio-2017bootstrap-4

A guide to exporting a PDF in A4 size landscape mode with jspdf

As a novice in UI development, I am currently trying to export HTML content to PDF using the JSPDF library. However, I have encountered difficulties in generating the PDF in A4 size landscape mode. The HTML code includes data with charts (canvasjs/chartjs) ...

javascripthtmlcssjspdf

creating a normal variable and assigning it to a $scope variable

Currently, I am working on a basic program using Angular JS/Ionic to validate two scope variables that are assigned from two different templates (Plunker). .controller('personCtrl', function($scope , $rootScope) { $scope.user = ""; ...

htmlangularjsionic-framework

Adjust the content within an HTML div by utilizing AngularJS

Snippet of AngularJs code to display different content based on selection: <select> <option value="0">--Select--</option> <option value="1">Individual</option> <option value="2"> ...

htmlangularjs

Pass information from one .jsp file to a JavaScript function in another .jsp file

Here is the content of OneEmployee.jsp: <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <form> <td> <c:out value="${emp.getEmpid()}"/></td> <td> <input type="text" id="fname" value="<c:out v ...

javascriptjqueryhtmlajaxjsp

Exploring Bootstrap datatables to search through nested table data with Codeigniter

I have implemented a table using bootstrap datatables and successfully enabled search functionality within the table. However, I have also included nested tables within each row of the main table. These nested tables are supposed to be displayed when clic ...

javascriptjqueryhtmltwitter-bootstrapcodeigniter

How can you determine if multiple checkboxes have been checked with "if" statements following a button click?

I am looking to display a message after clicking a button if one or more checkboxes are checked. I would prefer using Jquery for this functionality. Any help on achieving this would be highly appreciated. $(function() { $(".btn").click(function() { ...

javascripthtmljquery

How to eliminate padding between Bootstrap col-xx columns

When using Bootstrap's col-xx classes, the padding can sometimes result in wasted space on smaller screens. To address this, I have decided to remove the padding by nesting col-xx with specific CSS settings like shown below: <style> div[class^= ...

csstwitter-bootstrap

How is it possible for a JavaScript variable sharing the same name as a div Id to automatically pass the div?

This is just ridiculous. Provided HTML <p id = "sampleText"></p> Javascript var sampleText = "Hello World!"; Execution console.log(sampleText); // prints <p id = "sampleText"></p> How is this even possible? I ...

javascripthtmlcss

Bootstrap 5: Position the cards in close vertical alignment with one another

For my latest project, I have been working on creating a responsive card collection using Bootstrap 5 and Vue 3. By utilizing the container and row classes, I was able to ensure that all cards are aligned at the same level. However, in order to keep the ti ...

htmlcssbootstrap-5

The use of <a href> with images is not supported in Chrome

Hello there, I have a .NET C# function that generates HTML image links like this: <a href="..."><img src="..." /></a> These are displayed using asp:literal. Everything seems to be working fine in Internet Explorer and Firefox, but when ...

asp.nethtmlgoogle-chrome

Updating a slider based on the values of two other sliders can be achieved by implementing a

I am working on a project that involves three input sliders. I need the third slider to display the product of the values from the first two sliders. Additionally, I want the value of the third slider to update dynamically whenever the values of the first ...

javascripthtmlangularjsslider

Display or conceal the nearest element that was clicked

http://jsfiddle.net/KevinOrin/xycCx/1/ jQuery('.happening-main-text .readmore').click(function() { jQuery('.divmore').toggle('slow'); return false; }); ...

javascriptjqueryhtml