Creating text using the Bootstrap grid system

I am currently using Bootstrap and have set up a grid with a circle on the left side. I am now facing an issue where any text I try to add next to the circle overlaps with it. I need the text to not overlap with the circle and vice versa, while also being responsive. The text should have a proper margin and in case of large content on mobile devices, it should increase the height of the grid vertically to accommodate all the content.

Here is the problem I am facing:

This is what I am trying to achieve:

Below is my code:

.demo-content{
        padding: 15px;
        font-size: 18px;
        min-height: 140px;
        background: #abb1b8;
        margin-bottom: 20px;
        

padding-top: 40px;
padding-bottom: 10px;
border-radius:5px;

}

#circle {
    background: #FFC40C; 
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position:absolute;
    left:5%;
    top:13%;
    }
    .circle-posiiton {
        position:relative;
    }
<html lang="en">
<head>
<title>Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div main="rowmain">
<div class="row">
    <div class="col-md-12 circle-position">
        <div class="demo-content"><h1>Hi, Stack overflow. It is good.</h1>
     <div id="circle"></div>
        </div>
    </div>
</div>
</div>
</body>

Answer №1

Using the CSS3 calc function is the perfect solution for this particular task. By calculating the padding on the content div based on the position and width of the circle, you can ensure that the text is placed correctly. Below is the CSS code I included in your .demo-content class:

padding-left: -webkit-calc(5% + 105px);
padding-left: -moz-calc(5% + 105px);
padding-left: calc(5% + 105px);

I made sure to include vendor-prefixed versions for better compatibility. In this case, I used 5% for the circle's position and 105px for its width, along with a 5px margin.

.demo-content{
        padding: 15px;
        font-size: 18px;
        min-height: 140px;
        background: #abb1b8;
        margin-bottom: 20px;
        padding-left: -webkit-calc(5% + 105px);
        padding-left: -moz-calc(5% + 105px);
        padding-left: calc(5% + 105px);


padding-top: 40px;
padding-bottom: 10px;
border-radius:5px;

}

#circle {
    background: #FFC40C; 
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position:absolute;
    left:5%;
    top:13%;
    }
    .circle-posiiton {
        position:relative;
    }
<html lang="en">
<head>
<title>Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div main="rowmain">
<div class="row">
    <div class="col-md-12 circle-position">
        <div class="demo-content"><h1>Hello there! This is looking great.</h1>
     <div id="circle"></div>
        </div>
    </div>
</div>
</div>
</body>

Answer №2

Simply include

.main-content h1 { padding-left: 10%; }
within your to see improvements.

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

What is the best way to implement my Vanilla JS Array manipulation technique in a ReactJS environment?

https://i.sstatic.net/ZRGsS.jpgMy REST API development is in its final stages, and I'm currently facing a challenge with converting an array received from the backend into either a Nested Object of Objects or an array of objects. This conversion would ...

Can using the jQuery.clone method impact other functions?

Assuming $dom is a jQuery element, can the following line be safely removed if a is not utilized thereafter? var a = $dom.clone(true,true); When using $dom.clone(false,false), it appears that there are no side effects. I believe this method doesn't ...

Sequelize.Model not being recognized for imported model

I am encountering an issue while trying to implement a sequelize N:M relation through another table. The error message I keep receiving is as follows: throw new Error(${this.name}.belongsToMany called with something that's not a subclass of Sequelize ...

Can we programmatically switch to a different mat-tab that is currently active?

Looking to programmatically change the selected mat-tab in a TypeScript file. I came across a solution for md-tab, but I need it for mat-tab. I attempted the suggested solution without success. Here's what I tried: HTML <button class="btn btn- ...

Stop the click event using a confirmation dialog before proceeding with the operation

I'm trying to implement a confirmation dialog before deletion by using e.preventDefault() to prevent immediate deletion. However, I am facing an issue in the YES function where I would like to resume the click event's operation with return true w ...

How to verify in HTML with Angular whether a variable is undefined

When it comes to the book's ISBN, there are instances where it may not be defined. In those cases, a placeholder image will be loaded. src="http://covers.openlibrary.org/b/isbn/{{book.isbn[0]}}-L.jpg?default=false" ...

Update the positioning of the element to center instead of the default top left origin using jQuery

I am facing an issue with positioning a marker inside a triangle, which is represented by a simple div, as shown in the image below: https://i.stack.imgur.com/0Q7Lm.png The marker needs to be placed exactly at the centroid of the triangle. However, it see ...

Receive emails: using the require() function with ES Module

After following the react-email documentation, I encountered an error when trying to run the yarn email command: $ email dev --port 3001 ***\node_modules\ora\index.js:65 if (process.platform === 'win32') { ...

Using ng-transclude directive allows for encapsulating HTML content within an ng-transclude element

My directive includes an ng-repeat in the template and also has an ng-transclude option after the repeater to allow users to input their own content. The issue arises when the custom content is surrounded by an ng-transclude element upon rendering, which i ...

The TextBox will alter its color following an incorrect submission

I am struggling to create a bootstrap form that will change the color of the borders to red after incorrect submission. The issue I am facing is that the textbox always remains in red. Does anyone have any suggestions for setting the textbox borders to red ...

An event change leads to the activation of another event

I've set up some input fields and linked their values to a JavaScript variable. Strangely, the drinkInput value always shows up as blank for some reason. When the typeInput event is triggered, its value prints correctly in the console followed by an e ...

Hover effect alters background color

I've successfully created a box around text, but now I want it to change color when hovered over. However, I'm facing difficulty in achieving this effect. An image has also been attached for reference. Please review the image and locate the socia ...

Retrieve MongoDB collection using Node.js

I am completely new to the express/mongo stack, and I have encountered an issue that I was unable to find a solution for on Stack Overflow. Here is my problem: Within my index.js file, the code looks something like this: var mongoose = require('mong ...

What is the best approach for utilizing AJAX to load content into a Lightbox based on the user's selected trigger?

Developing a custom Lightbox/Thickbox gallery program involves sending user-clicked data to load the appropriate content in the lightbox feature. Below are the important files used in this creation: show-hide-lightbox.js - Contains an Ajax request that ...

Troubleshooting a Safari bug with element.click()

When the 'subButton2' button is clicked, the 'uploadBtn'(display:none;) should also be clicked. This functionality needs to work across different browsers: http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_html_click The cod ...

Preserving the most recent choice made in a dropdown menu

Just started with angular and facing an issue saving the select option tag - the language is saved successfully, but the select option always displays English by default even if I select Arabic. The page refreshes and goes back to English. Any assistance o ...

Using Rails 5 and Ajax: Comments will only be appended if a comment already exists

I have been working on a new feature that allows users to add comments to articles using Ajax. However, I have encountered an issue where the comment only gets rendered successfully through Ajax if there is already one existing comment. The database commit ...

Updating the HTML class with JavaScript

My HTML class has two classes $(document).ready(function() { $(".container").hover(function() { $('.green').addClass('display-on'); }); $(".container").mouseleave(function() { $('.black&apos ...

Change the order of numbering in ordered lists

I am seeking a way to change the ordering of an ordered list to be in descending order. You can view a live example here. Instead of having the counter span multiple ol elements, I would like the counter to reset after each ol. For the live demo, the des ...

Converting Arrays to Strings in JavaScript

Here is the code that is causing me trouble. var http = require("http"); var i = 0; var hostNames = ['www.1800autoland.com','www.youtube.com','www.1800contacts.com']; for(i;i<hostNames.length;i++){ var options = { ...