Creating a Fully Responsive Card Design in Bootstrap 4 - Ensuring Your Card Occupies the Entire Width of the

I am trying to achieve a layout similar to the example shown here:

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

The design I have in mind involves creating a card that spans the full width of the container. Inside this card, I would like to display a video on the left side, text in the middle, and a button on the right side.

However, despite using Bootstrap, I am struggling to find the correct combination of HTML elements to replicate this structure.

Here is what I have attempted so far:

<div class="container mt-5">
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-4">
                            VIDEO
                        </div>
                        <div class="col-4">
                            TEXT
                        </div>
                        <div class="col-4">
                            BTN
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
htmlcsstwitter-bootstrapbootstrap-4

Answer №1

As someone who is new to bootstrap, I can't say if this is the best practice, but if you want defined widths for each section of the cards, using bootstrap columns would be a good option. You can set the width to 100% to make the card take up the full width.

You could try something like this example for reference. Check out the code snippet below:

<div class="row">
    <div class="card" style="width: 100%;">
        <div class="row">
            <div class="col-3">
                <video width="200" height="150" controls>
                    <source src="https://www.youtube.com/watch?v=fTiz2oNaw0c">
                </video>
            </div>
            
            <div class="col-6">
                <div class="card-body">
                    <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis quo modi voluptas minima voluptates suscipit doloribus, maiores voluptatem eum placeat?</p>
                </div>
            </div>
            
            <div class="col-3">
                <button>Some button</button>
            </div>
            
        </div>
    </div>
</div>

Answer №2

I'm attempting to achieve the same outcome as you desire in Bootstrap 4. To control image width and height, you'll need to implement media queries for different viewpoints. Take a look at the code snippet below and let me know if it meets your requirements, or if there are any adjustments or additions you'd like to see.

<!DOCTYPE html>
<html lang="en">
<head>
  <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> 

<div class="container-fluid">
    <div class="card" style="width: 100%;">
        <div class="row">
            <div class="col-3 col-md-3">
                <video width="200" height="150" controls>
                    <source src="https://www.youtube.com/watch?v=fTiz2oNaw0c">
                </video>
            </div>
            
            <div class="col-6 col-md-6">
                <div class="card-body">
                    <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                </div>
            </div>
            
            <div class="col-3 col-md-3">
                <button>Button</button>
            </div>
            
        </div>
    </div>
</div>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <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> 
 
<div class="container-fluid">
  <div class="card mt-3">
    <div class="row p-3">
      <div class="col-3 col-lg-3 col-sm-4">
        <img src="" width="250" height="150" class="border border-2 border-dark">
      </div>
      <div class="col-6 col-lg-6 col-sm-4">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        </p>
      </div>
      <div class="col-3 col-lg-3 col-sm-4">
        <button class="btn btn-primary">Confirm</button>
      </div>
     </div>
  </div>
</div>

</body>
</html>

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 method for inserting the 'http' in an iframe source code ahead of a link

Currently, I am working with JSON (HTML Source) which includes an iframe element with a source code like this: <iframe src="//www.youtube.com/embed/b34jsdg" height="360" width="640" allowfullscreen="" frameborder="0"></iframe><br> ...

jqueryhtmliframe

What is the best way to ensure that the larger child divs always fit perfectly within the parent div?

Creating a Responsive Layout <div class="container"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </div> CSS Styling .box1, .box2, .box3{ display: block; f ...

javascriptjqueryhtmlcss

Position two div elements and an hr tag to create a step progress bar

Check out my progress bar design https://i.sstatic.net/u9SRM.png How can I center the 'created' and 'assigned' divs below the circle while ensuring the 'hr' line touches the circle, and it is responsive across different scre ...

htmlcssfrontendline

How can I easily add both horizontal and vertical arrows to components in React?

Creating a horizontal line is as simple as using the following code: <hr style={{ width: "80%", border: "1px solid black" }} /> You can customize the width, length, and other properties as needed. If you want to display an arrow ...

javascriptcssreactjssvg

Save web pages and images using Puppeteer

I'm currently working on saving a webpage for offline use using Nodejs and puppeteer. While many examples show using: await page.screenshot({path: 'example.png'}); This method doesn't work well for larger webpages. A more effective ap ...

javascriptnode.jshtmlweb-scrapingpuppeteer

Customizing the color of cells in an HTML table within a JSON based on their status

Would you like to learn how to customize the color of cells in an HTML table based on the status of a college semester's course map? The table represents all the necessary courses for your major, with green indicating completed courses, yellow for cou ...

javascriptphphtmlmysqljson

Trouble Arising from jQuery Navigation Links

I'm currently working on implementing a jQuery Menu that I came across online. You can find it here: However, I've encountered an issue where the menu doesn't seem to allow links to URLs. I attempted to remove e.preventDefault from the scr ...

jquerycss

I'm working on creating a login page with Bootstrap. Does anyone know the best way to center it on the screen

For a school project, I am working on creating a sign-in page. Although I have come across this code, it does not appear at the center of the page as intended. Instead, the left side displays to the left while the right side shows up to the right. My goal ...

csstwitter-bootstrapcenter

Tips for creating visually appealing text on a web browser with the help of open-source libraries

Have you ever noticed that no matter how we display text on webpages, whether it's in a <p> tag or an <h1> tag, the result is always the same? (a screenshot of a rendering done in Firefox) Do you struggle with pixelated areas on the curv ...

phpjavascripthtml

The issue of HTML5 audio not working when played multiple times on an Android 4.0.4 device's Native Browser

Currently engaged in a project utilizing HTML5 technology. Encountering an issue with playing the same audio file multiple times on the same page using the Android native browser. The problem is specifically observed on Android ICS 4.0.4. In this version, ...

androidhtmlhtml5-audioandroid-browser

inserting picture within the code

Looking for some feedback on this: I decided to use a third-party image host to create the code (I've used them in the past). However, when I added the code to my page where I intended it to be (after verifying in Google Inspect), the image does not a ...

htmlimage

Can JSF Ajax be used to update non-JSF components like plain HTML elements?

Is it feasible to make changes to sections of my webpage that are not JSF elements? For instance, can I modify a simple HTML <div> or should I enclose it in a JSF component? ...

htmlajaxjsfjsf-2

What is the best way to extend a column across multiple rows with bootstrap?

https://i.sstatic.net/uPsLe.jpg Looking to convert the design above into HTML and CSS, specifically trying to achieve a layout where the image spans across 2 rows. However, I've been having trouble making it responsive even after trying some code sni ...

htmlcsstwitter-bootstrap

When the user hits the enter key, automatically submit a form without the need for

Is it possible to submit a form on enter using type="button"? Here are my input fields: <input type="text" id = "login-user" class="form-control log-input" placeholder="Username" required="required"> <input type="password" id="login-password" clas ...

javascripthtmljquery

Should pages be indexed to index.php or should the top and bottom parts of the page be created and included in all content pages?

I've been out of the webpage creation game for a while, but I've recently decided to get back into it. Like everyone else, I want to learn the best way to do this. However, I find myself facing a dilemma on how to structure my pages. My initial i ...

phphtmlcsslayoutinclude

What is the best method to ensure that a span element's width is maximized through CSS

Here is an example to consider: (live demo) Sample HTML: <div> <p> <strong>Stack</strong> <span>Overflow</span> </p> </div> CSS: p { background-color: #aaa; } span { backgr ...

htmlcss

Displaying HTML code through Alert() is a convenient way to showcase snippets of

Can alert() or another pop-up be used to show actual HTML code? For instance, the following code snippet: var range = selection.getRangeAt(0); var newNode = document.createElement('span'); newNode.setAttribute("class", "selectedText"); range.sur ...

javascriptjqueryhtml

AngularJS - Unchecked radio button issue

Within my code, there is an ng-repeat including several radio buttons: <div class="panel panel-default" ng-repeat="item in vm.itemList"> ... <td ng-show="item.edit"> <div class="row"> ...

javascripthtmlangularjsradio-button

What could be causing the div class to move downward in the CSS code?

I have posted a question, but unfortunately, no one has answered it yet. Here is my code snippet: * { margin: 0; padding: 0; } body { width: 100%; font-family: 'Cabin', sans-serif; background-color: #333; } .firstnav { ...

htmlcss

How can I ensure my button aligns to the left with the element above in Bootstrap?

Here is a JSFiddle link for reference: https://jsfiddle.net/sf4wkyx0/ The alignment of my 'Add' button with the textarea seems slightly off: https://i.sstatic.net/r7lAn.png Both elements are within a container with the class col-2, but the al ...

htmlcsstwitter-bootstrap