As I work on customizing a text message wrapped in a bootstrap column div, I am encountering a challenge. When I try to wrap specific text in that column with another div, bootstrap automatically pushes that text to a new line.
<div class="container">
<div class="row">
<div class="col">
Text1
</div>
<div class="col">Text2<div>Text3</div></div>
</div>
</div>
One reason for this behavior is that the div element has a default property of display: block;, causing it to appear on a new line. To change this, you can use the bootstrap class d-inline-block to set its display: inline-block;.
By doing this, the div will now appear on the same line as other elements.
.row {
background: white;
margin-top: 20px;
}
.col {
border: solid 1px red;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col">
Text1
</div>
<div class="col">Text2
<div class="d-inline-block">Text3</div>
</div>
</div>
</div>Transform the interior div into a span to make it appear on the same line:
<div class="container">
<div class="row">
<div class="col">
Text1
</div>
<div class="col">Text2 <span>Text3</span></div>
</div>
</div>
A div is typically a block-level element by default, causing its content to span the entire width of the page. Therefore, any child div would also behave in the same way. Check out the updated fiddle here:
Indeed, it is inevitable.
<div> Text2 </div> will cause your <div> Text3 </div> to be displayed on a new line as divs are considered block elements.
A block-level element always begins on a new line and expands to fill the entire available width (stretching out towards the left and right as far as it can).
It is advisable to use <span></span> or apply the display: inline-block; property to the inner div containing Text3.
Explore various display types in CSS here.
In the world of HTML, the div element is known as a block-level element. When using a div element, it always starts on a new line and takes up the full width available. On the other hand, the span element functions as an inline element. An inline element does not start on a new line and only occupies as much width as necessary.
Here are two solutions:
Solution 1: Replace the div element with a span element
<div class="container">
<div class="row">
<div class="col">
Text1
</div>
<div class="col">Text2<span>Text3</span></div>
</div>
</div>
Solution 2: Style the div element to display as an inline element (not recommended)
<div class="container">
<div class="row">
<div class="col">
Text1
</div>
<div class="col">Text2<div style="display:inline">Text3</div></div>
</div>
</div>
When adjusting the width of your browser, you may notice occasional white space in the bottom right corner. https://i.stack.imgur.com/UFV6R.png https://i.stack.imgur.com/VfhMN.png Is there a way to remove this extra margin? In other words, how can I ens ...
I am facing an issue with my code that is attempting to display images based on their height. Strangely, the code seems to work fine when I test it with 2 images, but fails when trying with 3 or more. Check out the site: Upon clicking a menu button, the ...
I have a react component that I need to format into multiple lines, specifically having 2 boxes on top and 3 below in a looped return. The desired layout is to stack the boxes in 2x2 or 2x3 depending on the total number of boxes generated by the loop. So, ...
Let's take an instance where my modal has the ID #modal1. It usually appears through a button-based action. ...
Is there a way to adjust the size of the icon/step circle in v-stepper? ...
Let's say, I want to use different CSS libraries for each of my components - Home, About, Contact. Would it be feasible to utilize material ui for Home, semantic ui for About, and bootstrap for Contact? If so, what is the process for incorporating t ...
In my project, I have a list of elements that are generated dynamically, all styled the same way but with different content. The first element has a specific styling, and if it doesn't render, I want the second element to inherit that styling. < ...
In my HTML form, I have 3 text input fields and one submit button. Each text field is intended for entering the name of an animal, which should then be saved into a PHP array. Here is the structure of my HTML form: <form action="Test.php" method="post ...
I recently received help from the Stackoverflow community to scrape data from a webpage. It's an amazing group of people. They provided me with a function that imports data into Excel from a cell containing a URL. However, I'm facing issues becau ...
I am currently using vant ui components in my Vue project, such as buttons. I would like to make some minor style adjustments, like changing the color and border, but I am unsure how to do it. Can anybody please assist me in solving this issue? Thank you i ...
I am currently working with the Foundation slider found at this link: click for doc. To access the slider's current value, they recommend using a hidden input like this: <div class="slider" data-slider data-initial-start="50" data-end="200"> & ...
I am currently working on a login-page for a school project. I am using vue.js and have been attempting to make a get-request using axios. However, I am facing an issue where I cannot even enter the .then() block as the last thing displayed is alert(TEST1) ...
In my array, there are multiple "question" elements with a similar structure like this: <><div className="row"><div className="col-12 col-md-9 col-lg-10 col-xl-10 col-xxl-10"><span>Question 1</span></div ...
While I have come across a response on stackoverflow regarding form submission, my query pertains to a different implementation. I am in need of calling a function that registers a variable in $_SESSION[], and then redirects to another page (html/php). I ...
I am new to HTML and created a code that displays two images - one for start and the other for stop. Clicking 'start' should play a looped audio file, which should stop when 'stop' is clicked. Although the audio stops when I click &apo ...
I have created a gallery with Bootstrap in React.js. The posts are currently displayed using the bootstrap grid system, however, all posts appear on the left side and I am struggling to center them. Any ideas on how to achieve this? https://i.sstatic.net/ ...
I am facing an issue with the styling of tabs in my React app dashboard that uses Material UI Tabs. Specifically, I have a tab in the dashboard that opens a modal for adding new users to the system. The modal itself also contains tabs, but no matter how I ...
I am currently utilizing geolocation to track the user's current location and keep an eye on it using the watchPosition method. Is there a way to determine the distance between the starting position of the user and their current position? Here is the ...
Here on this specific page, I am looking to showcase the SPECIAL and RECOMMENDED sections together in a single line with horizontal scrolling. This is my current CSS: .box-product { width: 100%; overflow: auto; } I have attempted implementing it like th ...
I am facing a frustrating issue. Whenever I align an image using percentage-based transform translate, it results in a slight blur. This problem is specifically related to percentage alignment. Here is the CSS snippet: img { display: block; height: ...