Tips for decreasing a div's size in Bootstrap

I utilized the bootstrap grid to adjust the size of the div, however, I would like the div to be slightly narrower. Below is my code:

.single-box {
  background: black
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bad8d5d5cec9cec8dbcafa8e948f9489">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<div class="col-md-3 ml-5">
  <div class="single-box">
    <p class="ml-5">1 марта, 18:00</p>
    <h4 class="ml-5">Hi</h4>
    <p class="ml-5">My name is..</p>
    <button type="button" class="btn mx-auto btn-light gotham">Write to me</button>
  </div>
</div>

Is it possible to decrease the width using bootstrap tools? Or do I have to forgo bootstrap grid and manually set the parameters?

htmlcssbootstrap-4

Answer №1

To apply a margin, use the following CSS:

.single-box {
  background: green;
  margin: 0 50px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8fede0e0fbfcfbfdeeffcfbba1baa1bc">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<div class="col-md-3 ml-5">
  <div class="single-box">
    <p class="ml-5">1 марта, 18:00</p>
    <h4 class="ml-5">Hi</h4>
    <p class="ml-5">My name is..</p>
    <button type="button" class="btn mx-auto btn-light gotham">Write to me</button>
  </div>
</div>

Answer №2

One can take advantage of Bootstrap utility classes

w-25 for a width of 25%
w-50 for a width of 50%
w-75 for a width of 75%
w-100 for a full 100% width

To make a div 25% narrower, you can implement it in the following way:

<div class="w-75">
    <h1>Hello World</h1>
</div>
<!-- The next div could be 100%, and there's no need to add the w-100 class -->
<div class="w-100">
    <h1>Hello World</h1>
</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

Steps to insert a large image into a div while maintaining the size ratio

https://i.sstatic.net/WvBbF.png I'm struggling to add a logo to the right corner of this div The logo size is too big and it doesn't adjust properly to the existing div height and width Below is the code I've tried, but the image is ruini ...

htmlcss

Locate the div in the array that includes ValueA, and save ValueB from it into a new variable

When the button is clicked, I retrieve the current value of a Select control using the following code... $('#myBtn').on('click', function (clickEvent) { var nameSelected = document.getElementById('mySelectControl').getEle ...

javascriptjqueryhtmldom

How to incorporate JSON into a d3.js calendar display?

Learning d3 charts and javascript has been quite challenging for me. After researching a lot, I successfully populated the chart with CSV data. Now, my next goal is to populate the chart with json data. This is the code I'm using, which is inspired ...

javascriptjqueryhtmljsond3.js

Which file directory should I specify when using ng-include?

My project structure in Angular looks like this web server.py ##flask server program app static app.js controllers.js etc... templates index.html home.html In my index.ht ...

htmlangularjsfilepathpartialsangularjs-ng-include

Enhance Your jQuery Skills: Dynamically Apply Classes Based on URL Like a Pro!

Here is an example of HTML code for a progress meter: <div class="col-md-3" style="margin-left: -20px;"> <div class="progress-pos active" id="progess-1"> <div class="progress-pos-inner"> Login </div> </di ...

javascriptjqueryhtml

Enhance User Experience in IE11 by Providing Font Size Customization with Angular (Using CSS Variables)

I am in the process of developing an Angular application. One of the requirements is to allow the user to choose between small, medium, or large font sizes (with medium being the default) and adjust the font size across the entire webpage accordingly. Wh ...

htmlcssangularinternet-explorer-11css-variables

Eliminate the border style on the button

How can I get rid of the annoying blue border that keeps appearing on the button everytime it's clicked? I've tried different solutions but nothing seems to work. Check out the image below for a better understanding: Does anyone know why this is ...

htmlcssreactjs

After the form is submitted, the script is activated once more

Whenever I click the button that triggers an AJAX POST script multiple times, the script gets activated repeatedly. This results in items being created more than once. How can I solve this issue? $(document).delegate(".add_page_submit","click",fu ...

jqueryajaxhtmlpost

Overriding the w-4xl with sm:text-2xl in Tailwind CSS

Struggling to achieve responsive design on my Pages, especially with changing text size when the screen is small. I've been following all the correct steps and maintaining the right order. However, whenever I set 'sm', it seems to override a ...

javascriptcssreactjsnode.jstailwind-css

Place the center and bottom divs within the parent div

Trying to center and fix a div at the bottom of another div has proven challenging for me. I've attempted using the following code snippet, but without success. Can anyone guide me on how to achieve this? #clockPosition { margin: auto auto 0 auto ...

htmlcss

HTML: Background error

For the body, I have set the following CSS: body { background-image: url(file:///Volumes/HDD/photomadness_remixed/css/Flavours_400812054.jp2); background-attachment: fixed; background-position: center; background-size: cover; z-index: ...

htmlcss

Unexpected PHP Error Thrown

Every time I run this code, I encounter the following error message: Notice: Trying to get property of non-object in C:\wamp\www\HoneysProject\function.php on line 1178 The error pertains to this specific line of code: $number_ph ...

phphtml

Should you prioritize internationalizing your image alt attributes?

Do you localize your alt attribute in img tags for internationalization? Is it beneficial in the long run? ...

htmlinternationalization

Enable Element Blocks Content Below When Toggled

Is there a way to make a toggle element completely block out all content below it? I attempted to set the width and height to 100%, but it ended up cutting off the content inside the toggle element. ...

htmljquerycsstoggle

Adjusting the navbar color on scroll

I am looking to change the color of my navbar upon scrolling. When the navbar is at the top, the background should be transparent. Thank you to everyone for the attention and I apologize for my poor English! /* Navbar Color */ .navbar-default .navbar-t ...

htmlcsstwitter-bootstrap

CSS3 List Style Floating Challenge

I have encountered a seemingly simple question, but I am struggling to find a solution. In my HTML code, I have two ul elements. Each li within these lists is styled with float:left in my CSS. The reason behind this styling choice is that I am working on ...

htmlcsscss-float

Creating a Unique Navigation Bar Design in Bootstrap 4 with Custom Styling for Active

I have successfully added a navigation bar to my page, but I am currently facing issues with the active state. I want the navigation item to be underlined when it is active (when I am on that page) or when it is hovered over, and I also want brackets added ...

javascriptcssbootstrap-4navigation

Initiating a horizontal scroll menu at the center of the screen: Step-by

I need assistance setting up a horizontal scrolling menu for my project. The requirement is to position the middle button in the center of the .scrollmenu div. Currently, I am working with HTML and CSS, but open to suggestions involving javascript as well ...

javascripthtmlcss

Extract data using PHP regular expressions

I need to extract a specific portion of HTML data, removing everything above an H1 tag and below an H2 tag with the text 'What we offer'. This extracted data should be stored in a variable. <p>This part is unnecessary</p> <h1>T ...

phphtmlregex

Symfony 2 lacks the ability to automatically create the web/bundle/framework structure

I encountered a major issue with Symfony. After installing Symfony 2.7.5 via the command line: $ symfony new my_project The problem arose in the generated project directory: /web/bundle In this folder, I found two empty files (not directories!) named fr ...

phpcsssymfony