The custom width is not being applied to the Bootstrap column

I'm working on a Web Design project using Bootstrap. Here is a snippet of my HTML code:

<div class="col utility_col">
  <div class="row">
    <div class="col vote_col">Vote</div>
    <div class="col sign_col"> 
      <img src="./img/sign_up.png">
      Sign Up
    </div>
    <div class="col">Login</div>
  </div> 
</div>

Below, you can see a portion of my CSS code:

 .sign_col {
    display: flex;
    align-items: center;
    width: 127px;
}

However, I've encountered an issue where increasing the width of .sign_col also increases the width of .vote_col. How can I resolve this problem?

The current output of the design looks like this:

https://i.sstatic.net/X840z.png

htmlcssbootstrap-4

Answer №1

To adjust the width of one element based on another, you can utilize CSS variables. In this example, I am using SCSS as a CSS preprocessor.

<div class="one">
</div>

<div class="two">
</div>

...

$one-width: 200px;

.one {
  width: $one-width;
  height: 200px;
  background-color: red;
  margin-bottom: 10px;
}

.two {
  width: $one-width * .50;
  height: 200px;
  background-color: blue;
  margin-bottom: 10px;
}

In this scenario, the width of class "two" is set in proportion to the width of class "one."

Update: Within a row, there are three elements: vote, sign, and login. Apply the classes col-lg-4, col-md-4, col-sm-4 to ensure they have equal widths. This approach is recommended for maintaining consistent positioning.

It's advisable not to manually manipulate widths, in my personal opinion.

Answer №2

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/T2MZw1T" crossorigin="anonymous"></head>
<body>
<div class="container">
  <div class="row utility_col">
    <div class="col-3 vote_col d-flex justify-content-center">Vote</div>
    <div class="col-6 sign_col d-flex justify-content-center"> 
      <img src="./img/sign_up.png">
      Sign Up
    </div>
    <div class="col-3 d-flex justify-content-center">Login</div>
  </div>
</div>
</body>
</html>

You can utilize the grid system of bootstrap for width instead of using CSS. The classes .d-flex and .justify-content-center were used to center align it, but they can be removed if not needed!

https://getbootstrap.com/docs/4.3/layout/grid/

Answer №3

It is recommended to utilize the flex property in place of setting a specific width.

.sign_col {
    display: flex;
    align-items: center;
    flex: 0 127px !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col utility_col">
  <div class="row">
    <div class="col vote_col">Vote</div>
    <div class="col sign_col"> 
      <img src="./img/sign_up.png">
      Sign Up
    </div>
    <div class="col">Login</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

Sending a user's ID to a Bootstrap modal in Angular 4: step-by-step guide

I am currently utilizing Angular 4 for the front end and spring boot for the back end. My goal is to implement bootstrap modals to display user details when a button labeled 'user details' is clicked. This is the clients.component.html file: ...

angularbootstrap-4bootstrap-modalangular5

Experiencing a scroll problem in the latest version of Google Chrome for Android while using ReactJS? The issue seems to have migrated from the earlier version 99.xxxxxx to

Previously, my website was functioning perfectly in full screen mode. However, after updating Chrome on Android to the latest version (116.xxxxxx....), I noticed that it is now displaying a scrolling behavior that was not present in the earlier version (99 ...

javascriptandroidcssreactjsgoogle-chrome

What causes Punjabi (Indian Language) to display as boxes on certain smart devices?

I recently launched a mobile application named Gurbani Ujagar. While the app functions perfectly on devices like the Samsung Galaxy S3, it seems to display improperly on other phones such as the Galaxy Nexus, Galaxy S, and certain tablets, showing words or ...

androidhtmlxcodefonts

How can I transform an array of text into dropdown options?

Currently, while utilizing Vue and vue-bootstrap, I am facing the task of populating a dropdown menu with an array of text items retrieved from my database. The <b-form-select> component in Bootstrap requires objects of the form {value: 'some va ...

javascriptvue.jsbootstrap-4

What is the best way to upload this HTML file to create my own visual representation?

Feeling a bit unsure about which way to go for this problem, I don't have many options at the moment. Lately, I've been diving into Deep Learning and I'm interested in experimenting with Stanford's CS231N's Convolutional Neural Ne ...

javascripthtmldeep-learning

The selected image should change its border color, while clicking on another image within the same div should deselect the previous image

https://i.sstatic.net/jp2VF.png I could really use some assistance! I've been working on Angular8 and I came across an image that shows how all the div elements are being selected when clicking on an image. Instead of just removing the border effect f ...

javascripthtmlangulartypescriptangular8

Enclose elements in a div using a jQuery each function

I have successfully parsed data from an XML feed to JSON, but now I want to wrap each part of the data within a div. Here is the code snippet I am working with: var newsDiv = $('<div class="news-feed">').appendTo($("body")); $(release ...

javascriptjqueryhtmleach

Displaying HTML-encoded Unicode characters from a C++ string

When attempting to print a string with universal characters stored in it, I encountered a peculiar issue. If I initialized the string as: string test = "\u000D\u000A\u000D\u000Aclass Solution {\u000D\u000Apublic:\u000D&b ...

htmlc++unicode-string

Scrolling horizontally using jQuery and CSS

I have been experimenting with creating a horizontal scrolling page that moves to the right when scrolling down and to the left when scrolling up. Here is the current code: HTML <div class="scroll-sections"> <section id=&quo ...

javascripthtmljquerycss

How to insert a value using jQuery Minicolors in an HTML document?

While I found similar topics on Stackoverflow, none exactly match my issue. I am currently incorporating jquery Minicolors into my project: https://github.com/claviska/jquery-miniColors/ Everything is functioning properly, but I simply need to accomplish ...

javascriptjqueryhtml

Why is the media query not affecting this image?

<div class="col-lg-6" > <img src = "iphone6.png" id="dog-mobile" alt="phone"> </div> #dog-mobile{ height:600px; position: absolute; right: 25%; transform: rotate(25deg); } ...

htmlcssbootstrap-4css-selectorsmedia-queries

Troubleshooting: Why isn't my Bootstrap glyphicon icon displaying

Has anyone encountered issues with the glyphicon icon not showing up on buttons in Safari or Chrome when using Bootstrap? I tried fixing it but couldn't. Any help would be greatly appreciated! <link href="css/bootstrap.min.css" rel="stylesheet"&g ...

csstwitter-bootstrapicons

Using Javascript code to draw particles at the cursor's position and then directing those particles towards the bottom of

I found an interesting JavaScript code snippet that creates a bubble particles effect around the cursor. You can download it from https://github.com/tholman/90s-cursor-effects. However, I encountered a problem when adding certain elements inside a specifi ...

javascripthtmlcssweb

Getting the height of a group of classes using the style attribute

How can I retrieve the current height of 813px in jQuery from the "style" section? An example of F12 CSS is shown here: https://i.sstatic.net/4wFfR.jpg My attempt at achieving this is as follows: function HandleAccordionControlSizeChanges(isOpened) { ...

jquerycss

The border radius and table borders are causing the border to protrude noticeably on the right side

After much trial and error, I have almost successfully created a table with rounded corners on all four sides. The only issue is that in order for the radius property to work, I had to remove the table border property. This resulted in the td border stick ...

htmlcssborder

JS Code from a JS Fiddle failing to run in a web browser examination

I have been experimenting with a fantastic Expand/Collapse JavaScript function that I came across on JS Fiddle, but unfortunately, it's not working as expected when testing it in a browser. Can anyone provide some guidance on what might be causing the ...

javascriptjqueryhtmlcss

Arrange fixed-position elements so that they adhere to the boundaries of their adjacent siblings

Is there a way to keep two fixed elements aligned with their sibling element on window resize? <div class="left-img"> IMAGE HERE </div> <!-- fixed positioned --> <div class="container"> Lorem ipsum... </div> <div class=" ...

javascriptjqueryhtmlcsstwitter-bootstrap

Methods like jQuery blink(), strike(), and bold() offer dynamic ways to manipulate

I'm currently tackling an inquiry. The code I crafted seems to be functioning without any issues: (function () { if($('#target:contains("bold")')) { $('#target span:first').css('font-weight','bold ...

javascriptjquerycss

The hyperlink is not functioning properly because of the CSS code

I found a helpful menu on this site http://www.jqueryscript.net/menu/interactive-menu-css3-jquery.html However, I encountered an issue. When I click on <a href="1.html">Application 1</a> It doesn't redirect to 1.html as expected. The p ...

htmlcss

Is it possible to create a "text carousel" using HTML, CSS, and JavaScript?

Currently, I am in the process of building a 'text carousel' on my own, without seeking assistance. The progress so far can be viewed here (please stretch it out, as it is not responsive yet). Specifically, I am aiming to replicate the text carou ...

javascriptjqueryhtmlcsscarousel