Tips for organizing the Bootstrap elements on an HTML webpage

Struggling to organize a web page with HTML and Bootstrap 4 according to this template?

https://i.sstatic.net/BXC3X.jpg

<!doctype html>
<html lang="en>

<head>
  <title>Hepatrote with Bootstrap v4</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>

<body>

  <header class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">>
    <p class="h5 my-0 me-md-auto fw-normal">Hepatrote</p>
    <nav class="my-2 my-md-0 me-md-3">>
      <a class="p-2 text-dark" href="#">Accueil</a>
      <a class="p-2 text-dark" href="#">Blog</a>
      <a class="p-2 text-dark" href="#">Symptoms</a>
      <a class="p-2 text-dark" href="#">Contacts</a>
    </nav>
  </header>

  <main class="container"> 
    <div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">+
      
     
      <div class="row row-cols-1 row-cols-md-3 mb-3 text-center">>
    
      </div>
      <footer class="pt-4 my-md-5 pt-md-5 border-top">>
        
      </footer>>
  </main>>
</body>>

</html>>

The code structure includes the head,body, and added Bootstrap link. Need help arranging elements like shown in the image? Share your thoughts!

Looking for some guidance on how to arrange elements properly using Bootstrap 4? Let's brainstorm together!

htmlcssbootstrap-4

Answer №1

Here is a basic structure for displaying images using Bootstrap 4. Please note that this display is not responsive, so additional work will be needed to make it compatible with different screen sizes.

Sample Code:

    <html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <title>Example with Bootstrap v4</title>

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
 </head>
  <body>
    
<header class="d-flex justify-content-between flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
  <p class="h5 my-0 me-md-auto fw-normal">Example</p>
  <nav class="my-2 my-md-0 me-md-3">
    <a class="p-2 text-dark" href="#">Home</a>
    <a class="p-2 text-dark" href="#">About</a>
    <a class="p-2 text-dark" href="#">Services</a>
    <a class="p-2 text-dark" href="#">Contact</a>
  </nav>
</header>

<main class="container">
  <div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto">
    <div class="row">
      <div class="col">
        <h1>Services Offered</h1>
        <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
      </div>
      <div class="col">
      <h1>Related Images</h1>
      </div>
    </div> 
    
    <div class="row">
     (Image and Symptom Cards repeated for all related images)
    </div>
  
  <footer class="pt-4 my-md-5 pt-md-5 border-top">
  </footer>
</main>
  </body>
</html>

`

Answer №2

main {
width:90%;
}

#maincss {
  position: relative;
  height: 100%;
  width:100%;
  margin:auto;
}

#maincol {
  position: relative;
  padding: 1rem;
  margin:auto;
  
}
#mainimg {
  position:relative;
  max-width:100%;
  }

#3rdcss {
  position: relative;
  min-height: 100%;
}

img {
position:relative;
width:100%;
}

#3rdcol {
  position: relative;
  min-height: 100%;
  margin: auto;
}
#cardzcol {
position:relative;
margin:auto;
padding:0.5rem;
}
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <title>Hepatrote with Bootstrap v4</title>

  <!-- Bootstrap core CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css>
  
</head>

<body>

<header class="d-flex justify-content-between flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
  <p class="h5 my-0 me-md-auto fw-normal">Hepatrote</p>
  <nav class="my-2 my-md-0 me-md-3">
    <a class="p-2 text-dark" href="#">Accueil</a>
    <a class="p-2 text-dark" href="#">Blog</a>
    <a class="p-2 text-dark" href="#">Symptoms</a>
    <a class="p-2 text-dark" href="#">Contacts</a>
  </nav>
</header>

  <main class="container">
    <div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center"><div id="maincss" class="row"><div id="maincol" class="col-6"><h2>Title</h2><p>text relative</p><input type="button" class="btn btn-primary" value="button" /></div>
        <div id="maincol" class="col-6 "><div id="mainimg"><img src="https://tmladenov.tech/images/img-test.png" title="img" /></div></div>
        <div id="maincol" class="col-12 "><div id="3rdcss" class="row "><div id="3rdttl" class="col-12 "><h2>Title</h2><p>some more text to be shown</p></div><div id="cardzcol" class="col-6 "><div id="cardz" class="card"><div class="card-body"><div id="cardrw" class="row"><div id="crdimgcol" class="col-6"><img src="https://tmladenov.tech/images/img-test.png" title="img" /></div><div id="crdtxtcol" class="col-6"><h5 class="card-title">[card-1]</h5><p class="card-text">some text here</p></div></div></div></div><div id="cardzcol" class="col-6 "><div id="cardz" class="card">…

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 are the drawbacks of using JavaScript to load a series of images?

Currently, I am facing an issue with the loading speed of a sequence of images on my website. The javascript code I have implemented to cycle through 50 images works perfectly fine locally but becomes slow and buggy when the site is live. Despite the image ...

javascripthtmlsequencecycle

The format removal button in CKEditor5 has mysteriously vanished

Utilizing Bootstrap-4 and the CKEditor5, I encountered a project where the REMOVE FORMAT - button had mysteriously vanished above a textarea. After visiting the CKEditor5 website (URL: ), I noticed that the remove format - button was still present on their ...

bootstrap-4ckeditorckeditor5

How to delete URL parameters in JavaScript and HTML5

I have a URL that looks like this: /users/?i=0&p=90 How can I remove the part from ? to 90 Can anyone provide me with some JavaScript code to achieve this? EDIT I mean doing this with window.location.href directly in the browser URL bar. I trie ...

javascripthtmlurlurl-parameters

How to give a stylish touch to your :after element with a css

I have a unique bubble design that pops up when hovering. I'm trying to add a border around the bubble, but I'm facing difficulty adding a border to the pointer of the bubble. The arrow is created using the .bubble:after selector. You can check ...

htmlcsscss-position

Place the sorting image on the left side of the DataTable header

I am currently using DataTable in my code. The sorting images in the header of the table are on the right side while the labels are on the left, as shown below: https://i.sstatic.net/Bz6EO.jpg However, I would like to switch this arrangement and have the ...

jqueryhtmlcssdatatables

Ways to initiate a CSS transition without hovering over it

Currently, I have a sidebar that is hidden and only shows up when the mouse hovers over it. I'm wondering how I can make the CSS transition trigger before the mouse hover, similar to what happens in this sidebar link: . Any advice on how to achieve th ...

csshovercss-transitions

Is there a way to display images from a secure HTTP URL that has been parsed using jsoup within separate listViews?

After running the code above, I now have an array list with URL images stored as objImages Element table2 = document.select("TABLE").get(1); Elements asWithName = table2.select("tr>td a[name]"); for (Element aWithName ...

androidhtmlparsingimageviewjsoup

Enhancing the smoothness of parallax scrolling

My header is going to be twice the height of the viewport. I added a simple parallax effect so that when you scroll down, it reveals the content below. However, I'm experiencing flickering in the content as I scroll, possibly due to the CSS style adju ...

javascriptjqueryhtmlcss

Owl carousel experiencing issues with navigating to the previous and next slides

I've been struggling to get the owl carousel slider working properly, specifically the previous and next buttons. Here is a snippet of my code: <div class="magazine-carousel owl-theme"> <div class="item"></div> <div class="item" ...

jqueryhtmltwitter-bootstrapowl-carousel

What is the method to fetch CSS properties in relative units like percentages and ems using the .css() function with the selector "$("selector")"?

Using jQuery to retrieve HTML element's css properties hasn't been as effective as desired. To test this issue, the following experiment was conducted: var div = document.createElement("DIV"); div.id = "testdiv"; var testZero = $(div).css("w ...

javascriptjquerycss

Creating Your Own Image Hosting Website: Learn how to consistently display an HTML file with a specific image from the URL

I'm currently in the process of developing my own image hosting site at Everything is functioning as intended, but I am looking to make a change. Currently, when a shared image link is opened, it only displays the image. However, I would like it to ...

javascripthtmlregex.htaccess

Are all the bootstrap columns displaying in a single row?

Despite my best efforts, I'm facing a puzzling issue as a newbie. I've meticulously set up the container > row > col structure in Bootstrap, but all my columns stubbornly remain on the same line. According to the Bootstrap guidelines, only ...

htmlcssbootstrap-4

Placing an element with position:absolute inside another element with position:fixed

I am working with a fixed position div that is always centered in the browser viewport. Within this div, there is another div set to absolute positioning. It seems like this inner div is actually being positioned relative to the HTML document since there ...

csspositioningstylesheet

Updating the total in the OpenCart cart dynamically using AJAX functionality

I am currently working on integrating a shopping cart into the header of my website so that it updates the price and number of items in real-time when an item is added to the cart. Here is the HTML code I am using: <div id="cart"> <p class="phon ...

javascriptjqueryhtmlajaxopencart

Audio Playlists and Dynamic Loading with WordPress Shortcode

I'm looking to incorporate the wp_audio_shortcode() function using AJAX, and then customize the style of the audio player. However, I'm facing an issue where the HTML code returned by the AJAX request does not allow me to customize the audio play ...

javascriptphphtmlajaxwordpress

New feature in Chrome allows credit card suggestions to be displayed in the name input field

On one specific page of my angular app, I have an input field for a name that is showing credit card suggestions. When I disable the autofill for credit cards in Chrome settings, it then shows suggestions for names instead. However, on another page with ...

htmlangulargoogle-chromeautocompleteautofill

Attempting to insert visuals into a product catalog within a table

As I work on my final school project, a functioning webshop, I've been making good progress. However, I've hit a roadblock when it comes to adding images to a table in PHP. In my setup, I have two PHP files that are interconnected: products.php h ...

phphtml

fill the designated column in accordance with the specific criteria

Is there a method to automatically fill in a specific column based on certain conditions? I am looking to populate the column labeled [Last] when the column index is 1 and the corresponding name is [First]. import {Component, OnInit} from '@angular ...

htmlangulartypescript

Focusing on the alignment of an article tag

I am currently facing a challenge in centering the content within an HTML article element. As of now, the content is aligned to the left margin of the page. Below is the snippet of HTML I am working with: <article> <h1>Sign In</h1> ...

htmlcss

The disabled input field remains inactive even after reloading the current page

When an 'input button tag' with a value is disabled and clicked, upon reloading the current page in the browser, the button remains disabled without changing to enable (disabled = 'false'), only the value within the button is removed. ...

jqueryhtmlbrowserreload