Creating Unique Spacing in Bootstrap Using Concise Text

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

Trying to align the bullet point text with others can be a challenge, especially when the text does not span multiple lines.

The bullet point in this case is an image.

Concerns html and css

.description-row {
  margin-top: 60px;
}
.p-text-small {
  font-size: 16px;
}
<div class="row col-md-12 col-lg-10 description-row">
  <div class="col-3 d-flex justify-content-center mr-4">
      <img height="90px" src="./img/calendar.svg"/>
  </div>
  <div class="col">
      <div class="row">
          <div class="row">
              <div class="col-1">
                  <img height="10px" src="./img/bullet.png"/>
              </div>
              <div class="col">
                  <p class="p-text-small">Start Date: Monday April 12th </p>
              </div>
          </div>
          <div class="row pt-4">
              <div class="col-1">
                  <img height="10px" src="./img/bullet.png"/>
              </div>
              <div class="col">
                  <p class="p-text-small">Classes are from 9:00 to 10:00am every Monday, Wednesday and Friday (optional Saturday) for 6 weeks.</p>
              </div>
          </div>
      </div>
  </div>   
</div>

Answer №1

You have a pair of rows arranged in a sequence.

Remember, rows need to be enclosed within columns. Give this a shot.

<body>
<div class="row col-md-12 col-lg-10 description-row">
  <div class="col-3 d-flex justify-content-center mr-4">
    <img height="90px" src="./img/calendar.svg" />
  </div>
  <div class="col">
    <div class="row">
      <div class="col">
        <div class="row">
          <div class="col-1">
             <img height="10px" src="./img/bullet.png" />
          </div>
          <div class="col">
            <p class="p-text-small">Start Date: Monday April 12th</p>
          </div>
        </div>
        <div class="row pt-4">
          <div class="col-1">
            <img height="10px" src="./img/bullet.png" />
          </div>
          <div class="col">
            <p class="p-text-small">Classes are from 9:00 to 10:00am every Monday, Wednesday and Friday (optional Saturday) for 6 weeks.</p>
          </div>
        </div>
      </div>
     </div>
  </div>
</div>
</body>

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

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

Breaking HTML attribute values into separate lines will make the code more organized and easier

Is it possible to format HTML attribute values so they can span across multiple lines? Essentially, I'm wondering if there is a way to include line breaks within a regular typed HTML attribute value. For instance, in the functional code snippet below ...

Vue.js displaying incorrectly on Windows Server 2019 IIS post deployment

Once I run npm serve, everything runs smoothly. However, when I deploy my app with an API in an ASP.NET application, it doesn't scale properly. I am using Router and History for navigation. Anonymous user authentication is enabled and static content h ...

What methods can I use to eliminate an iframe virus that has infected all my PHP files on my website?

I'm facing a challenge with eliminating a virus code from my php files. All 1200+ php files on my server have been infected by this malicious code, which injects the following line into the html output: Here is the virus code: <tag5479347351>& ...

Using Wordpress? Customize your sidebar with three widgets and don't forget to add the "last" class to the third one for a polished look

Successfully set up a custom sidebar on my WordPress website and configured it to display three widgets. The CSS for the sidebar includes a specific styling for each widget, with an additional class to remove margin-right from the last (third) widget. reg ...

Choose the desired options to add to the selection box

Here is a question that I have: <select class="myselect"> <option value="option 1">option 1</option> <option value="option 2">option 2</option> <option value="option 3">option 3</option> <option value="option 4 ...

How can I display a particular section of my JSON data in an AngularJS application?

Below is an example of a JSON structure: {"years":[ { "year_title":"94", "months":[...] } { "year_title":"95", "months":[...] } { "year_title":"96", "months":[...] } ]} I was able to display the data using the code sni ...

The row count feature is ineffective in Materialize CSS when adjusting the text area

Can the row count of a text area in materialize css be initialized with a specific number using "rows='20'"? How can we adjust the default row count? Here is an example of code that attempts to set the row count but doesn't work: <div c ...

Organizing pictures by category

I am currently working on creating an interactive image gallery with sorting options based on different categories such as land, sea, animals, and more. I have created a small example to demonstrate my concept. My objective: is to allow users to select a ...

What is the process of generating a dynamic card/button element on an ASP.net webpage using information from the backend database?

I'm faced with a challenge of displaying employees' names and titles from a MSSQL Server database table on an ASP .NET webform as individual "card" objects. Currently, I am able to showcase a static number of records by using an asp button object ...

Transforming dynamic table text into an image: Step-by-step guide

I have a live scoreboard on my website that pulls information from another site, making the content dynamic. I want to enhance the display by replacing certain elements in the table with images, such as displaying logos instead of club names. However, my k ...

Obtain the value of "data-something" attribute from an <option> element within a <select> element

Can anyone help me with this HTML snippet? <select id="something"> <option value="1" data-something="true">Something True</option> <option value="2" data-something-else="false">Something Else False</option> </selec ...

Tips for improving the focus of the bootstrap datetime picker?

I have integrated the Bootstrap datetime picker (bootstrap-datetimepicker.min.js) into my code. Within the DIV tag, I have included the class="modal fade" to open the first popup. In the first popup, there is a datetime picker. When clicking on the picker ...

Problem with showing div when hovering

I'm having trouble displaying a div on hover. When I hover over the div element A, the div element B appears as expected. However, when the mouse pointer leaves the div element A, the div element B does not disappear. $('.display_cal'). ...

Organizing my AngularJS project for optimal structure

I'm new to AngularJs and despite going through the tutorials, I still have a lot of questions. Right now, I'm unsure about how to separate my application into modules. My goal is to create an app that serves as a gateway to various other apps, e ...

Showcasing menu options in a double-column layout - MUI Menu

Just starting out with React. I'm using MUI menu to display items in two columns, but I've noticed a significant gap between the menu items when using grid display with repeat 2 and 1fr. display:'grid' , gridTemplateColumns : 'repe ...

The issue at hand is that one of the JavaScript buttons is functioning properly, while the other is not playing the video as intended. What steps can

I've been working on a script for my school project website that should make buttons play videos, but I'm running into an issue where it only works for the first button (btn). Programming isn't my strong suit, and I put this together based o ...

React snap scrolling feature is not working as intended

I've been attempting to implement the snap scroll feature in my react app, but I'm facing issues with it. The regular CSS method doesn't seem to work well in Chrome, as discussed in this Scroll Snap Skips Section on Smaller Screen - Chrome t ...

Creating a clear distinction between a logo and accompanying text

I'm working with bootstrap 5 and I want to add a subtle line right after the logo.png below. The line should be directly connected to the logo with no spaces, and also no spaces between the text and the line. <!-- Bootstrap-5 --> <link hre ...

Issues with loading CSS, JavaScript, and links when deploying a Spring Boot application as a WAR file in Tomcat

My Spring boot web application runs smoothly as an executable jar, but when I build it as a war and deploy it to Tomcat, the CSS and JS files fail to load. Upon further investigation, I discovered that all links are pointing to the root context path "/" I ...

Problem with holding a dropdown button

Having trouble maintaining the position of this button within the floating button holder above my website content. How can I incorporate a drop-down menu while ensuring it stays within the same button holder? .btn-holder { backgr ...