Creating a blank div in bootstrap without any content inside and filling it with a background color

Is it possible to display 3 lines inline side by side in bootstrap? I've encountered a challenge with the height and width! While using pure css works fine, integrating bootstrap seems to be causing issues.

Below is an example of the code using CSS for one line. The same method applies to the other two lines:

<div style="display:inline-block ;height:2px; width:100px;border-radius:10px; background-color: blue;"

Any suggestions on how to achieve this using bootstrap? Would using a parent class help with defining the height and the width?

htmlcssbootstrap-5

Answer №1

Were you considering a design similar to this?

<div class="col-lg-3 text-center bg-secondary" style="height:200px;width:auto"></div>

Answer №2

<div class="container">
    <div class="row text-center">
        <div class="col-md-4">
            <div class="p-5 bg-danger"></div>
            <p class="text-center">Lorem ipsum dolor sit</p>
        </div>
        <div class="col-md-4">
            <div class="p-5 bg-danger"></div>
            <p class="text-center">Lorem ipsum dolor sit</p>
        </div>
        <div class="col-md-4">
            <div class="p-5 bg-danger"></div>
            <p class="text-center">Lorem ipsum dolor sit</p>
        </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

Text located in the bottom right corner of the window with the use of JavaScript

Is there a way to replace text at the bottom right of the window, as opposed to the page, so that it remains fixed in the corner of the window? I'm looking to create a "share" link that is always visible. ...

javascriptcss

Troubleshooting jQuery masonry problem related to initial display and height settings

Within a div, there is a masonry container with the inline style property display:none. With several divs on the page, clicking their respective buttons during load causes them to switch like a slideshow. This disrupts masonry's ability to calculate t ...

javascriptcssheightjquery-masonry

Combining various components within an inactive element tag using Vue

I am working on creating expandable rows for a table element using this HTML code snippet. The current approach involves alternating between parent rows and multiple rows within tbody elements. <tbody class="js-table-sections-header">Parent row</ ...

javascriptjqueryhtmlcssvue.js

Guide on making a persistent sidebar using CSS and JavaScript

I'm in the process of developing a website that features a main content area and a sidebar, similar to what you see on Stack Overflow. The challenge I am facing is figuring out how to make the sidebar remain visible as a user scrolls down the page. T ...

javascripthtmlcssdom

Can elements be eliminated from a div based on their order?

https://i.sstatic.net/XIUnsMRc.png Hello everyone, I am currently attempting to replicate this design using ReactJS, but I am facing challenges in getting my code to function as desired. The issue lies in positioning the profile picture next to the searc ...

htmlreactjssass

Post request failed as it was made from a site other than the main page

Having some trouble with the POST functionality in Node since I am new to it. I have a basic website set up, with the following code: app.get('/sign',(req,res)=>{ res.sendFile(path.join(__dirname, 'static', 'index.html' ...

htmlnode.jshttpwebpost

s3 key not found, The specified key does not exist. previewing file from a web link

After utilizing paperclip and s3, I successfully uploaded a word document and now I am seeking the ability to preview it directly from the database using an iframe. https://i.stack.imgur.com/ceCPu.png <iframe src="<%= agreement.document.url(:smal ...

htmlruby-on-railsamazon-web-servicesiframeamazon-s3

Are there specific mappings for system colors in CSS across various browsers and operating systems?

The CSS specification outlines a variety of built-in system colors that can be utilized, such as Highlight and Background. Is there a correlation between these built-ins and the settings of different OS/Browsers? For instance, if I implement color: Highl ...

csscolors

What is the method for identifying the name of a CSS Variable currently in use?

Consider this code snippet: /* css */ :root { --text-color: #666666; } input { color: var(--text-color); } In Javascript, how can I determine the name of the CSS custom property (variable) being utilized? // javascript console.log(document.querySel ...

javascriptcssvariables

Minimum width of Angular Material's mat-menu

I am looking to create a compact Material mat-menu using Angular 15. Below is the code I have: <mat-menu #flagMenu="matMenu"> <button mat-menu-item> <img src="assets/flags/en.png" class="flag"/> ...

cssangularangular-material

Creating aesthetically pleasing and uniform rows of responsive Bootstrap 4 cards with consistent heights

I'm a beginner in the world of design and Bootstrap, so please be patient with me. My goal is to create a series of cards that have equal height and width (responsive, not fixed) in each row. In other words, I want all the cards to be as tall and wid ...

cssbootstrap-4

Expand the video comparison slider to occupy the entire width and height

I am striving to develop a video comparison slider that fills the height and width of the viewport, inspired by the techniques discussed in this informative article: Article Despite my efforts, I have not been successful in achieving this effect so far a ...

javascriptjquerycsshtml

Execute a function on elements that are added dynamically

I'm in the early stages of learning javascript and jquery, so this issue might be very basic. Please bear with me. Currently, I am dynamically adding new link (a) elements to a division with the id "whatever" using the following code: $("#whatever") ...

javascriptjqueryhtml

What could be causing the top navigation bar's background color to not display properly?

Currently working on a website and trying to implement a top navigation bar. However, encountering an issue where the background-color is not displaying properly and appearing transparent. CSS: body { margin: 0; font-family: "Century Gothic", Cent ...

htmlcss

What is the best way to find out the size of a Google font file?

Google fonts are being utilized in my project, specifically the Roboto font for light and regular font styles. Unfortunately, I am unsure of the file size of this particular font. ...

htmlcssgoogle-font-api

Display corresponding div elements upon clicking an HTML select option

Is there a way to make a div visible when a corresponding select option is clicked, while hiding others? My JavaScript skills are lacking in this area. CSS #aaa, #bbb, #ccc { display:none; } The HTML (I'm using the same id name for option and d ...

javascripthtmlcsshtml-select

What is the proper way to convert the Vue3 ::v-deep SASS syntax to utilize :deep?

HTML: <template> <form class="bg-white"> <div class="source-field"> ... The original SASS code looks like this: .form::v-deep .source-field width: 129px display: inline-block margin: 0px 2px 5px 2px ...

cssvue.jssassvuejs3

I need to display a VARCHAR variable retrieved from PHP in a visually appealing way with HTML/CSS. What is the best way to automatically format it to prevent it from appearing as one long, uninterrupted sentence?

Is there a way to automatically format the text retrieved from a VARCHAR variable in a MySQL database via PHP so that it displays correctly with line breaks? Currently, when I display it on an HTML page, it appears as one long string. I've considered ...

phpmysqlhtmlcssvarchar

Utilizing jquery for displaying and hiding notifications - Notyfy in action

Recently, I've started working with jQuery and have come across the useful Notyfy jQuery plugin. My goal is to display a notification bar with specific messages based on certain conditions such as success or error. I'm trying to achieve somethin ...

jquerycssnoty

Identify specific elements using CSS to easily target them with JavaScript later on

Currently, I am utilizing CSS selectors to target specific elements and now I want to be able to identify those elements using javascript. My approach involves setting the color of these elements in css and then retrieving them based on their color. Howeve ...

javascripthtmlcss