What is the best way to align sections side by side using Bootstrap?

Hello, I'm currently trying to customize the layout of this Bootstrap webpage to resemble the design shown in this image https://i.sstatic.net/w7i6Z.png. Specifically, I want to display the blog section and the team section side by side. As a beginner in using Bootstrap, I'm not quite sure how to achieve this layout. Any tips or guidance would be greatly appreciated. Thank you in advance!

enter code here

    <!-- ***** Blog Start ***** -->
<section class="section white padding-bottom-80" id="blog">

    <div class="container">
        <!-- ***** Section Title Start ***** -->
        <div class="row">
            <div class="col-lg-12">
                <div class="center-heading">
                    <h2 class="section-title">Latest Blog Posts</h2>
                </div>
            </div>
            <... (blog post content) ...>
        
    </div>
    
    <!-- ***** Section Title End ***** -->

    
        <<!-- Team Item Start -->-->
        <div class="col-lg-3 col-md-6 col-sm-12">
            <div class="team-item">
                <div class="team-content">
                    <... (team member info) ...>
                    <p>Proin arcu ligula, malesuada id tincidunt laoreet, facilisis at justo. Sed at lorem.</p>
                </div>
                <div class="user-image">
                    <img src="assets/images/photos/team/1.jpg" alt="">
                </div>
            </div>
        </div>
        <<!-- Team Item End -->-->
        
        <... (more team members' info) ...>
    
</section>
htmlcssbootstrap-4

Answer №1

I found the code below that can help you achieve what you're looking for

<!-- ***** Blog Start ***** -->
    <section class="section white padding-bottom-80" id="blog">
        <div class="container">
            <!-- ***** Section Title Start ***** -->
            <div class="text-center">
                <h2 class="section-title">Latest Blog Posts</h2>
                <p>Donec vulputate urna sed rutrum venenatis. Cras consequat magna quis arcu elementum,
                    quis congue risus volutpat.</p>
            </div>
            <div class="row">
                <div class="col-6">
                    <!-- ***** Section Title End ***** -->
                    <div class="col-lg-4 col-md-6 col-sm-6">
                        <div class="blog-post-thumb">
                            <div class="img">
                                <img src="assets/images/photos/blog/1.jpg" alt="">
                            </div>
                            <div class="blog-content">
                                <h3>
                                    <a href="blue-blog-single.html">Jirono Expands the Leadership Team with David Lin,
                                        Controller</a>
                                </h3>
                                <div class="text">
                                    Mauris tellus sem, ultrices varius nisl at, convallis iaculis mauris. Sed eget sem
                                    vitae
                                    purus tempus dignissim.
                                </div>
                                <a href="blue-blog-single.html" class="btn-primary-line">Read More</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

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

Using Twig: Transfer the content of a textfield as a parameter in the routing

I have a task of redirecting to another page while passing along the value from a textfield. Here is my current code: {% extends "base.html.twig" %} {% block body %} <button onclick="host()">Host the session</button> <button onclic ...

javascripthtmlsymfonyroutestwig

Content escapes its parent container and seamlessly transitions to the following element

I am facing an issue with the layout of my element, which includes an image and text centered inside a parent container. Whenever I try adding more elements below the existing image and text, the green text with a red border overflows the current parent . ...

htmlcsstwitter-bootstrap

Seeking assistance with coding a beginner-level Google Chrome extension

Currently, I am working on developing a basic Google Chrome extension with 2 or 3 browser actions. I have been using Selenium IDE to capture the necessary steps in Firefox that I need for my project. However, I am unsure of how to translate these recorde ...

javascripthtmlgoogle-chromeseleniumgoogle-chrome-extension

Obtain pictures from MongoDB for a website using Angular6

I'm currently in the process of developing my website and I want to showcase an image from my database on the header. Each customer is assigned a unique logo based on their ID, but I'm unsure how to use Angular to display it. Below is my code s ...

htmlangularimageangular6

Having trouble with updating your website asynchronously through code? In need of a detailed explanation?

Here are two Javascript functions that are used to call a python file in order to update an HTML page. The first function works perfectly fine, but the second one seems to be malfunctioning without throwing any errors. function button(key) { var xhttp ...

javascriptpythonhtmlcssajax

Tips for preventing a span from disappearing when a hidden div is displayed during onmouseover

, there is a concern about the disappearing behavior of the span with ID "topnavbar" when the display property changes from none to block on a hidden div using onmouseover event. The query is how to ensure that the span remains visible at all times. Additi ...

javascriptjqueryhtmlcss

Is there a way to customize the design of the "Browse" button within the HTML file upload control?

I've been searching high and low on the internet for a simple, sleek method to customize the appearance of the Browse button on an HTML <input type=file> element. However, all the solutions I've come across involve hiding controls, placing ...

htmlfile-uploadcss

Steps for allowing the cells in a Data-Table column to be edited

Is it possible to have editable cells in a column of a Data Table with the support of the plugin? ...

javascriptjqueryhtmldatatables

Retrieve the HTML value of an element in Vue.js by clicking on its adjacent element

Hey there, I'm currently working on a simple notes app and I've hit a roadblock with one particular feature. In my project, I have a card element with a delete button as a child. What I need to achieve is to check if the value of the .card-title ...

javascriptjqueryhtmlvue.jsvuejs2

Leveraging BeautifulSoup for retrieving targeted dl and dd item listings

Today marks my first time posting. I am currently utilizing BeautifulSoup 4 and Python 2.7 (PyCharm) to work on a webpage that contains various elements. Specifically, I am aiming to extract certain elements where the tags are either 'Salary:' or ...

pythonhtmlbeautifulsoupextract

Dart and external CSS and JS libraries and tools

As I prepare to dive into developing my very first web application, one technology that has caught my eye is Google Dart. The idea of using a new, innovative approach to web development excites me, and I am seriously considering utilizing it for my project ...

javascriptcssweb-applicationsdart

Pass an array from a script file in JavaScript to index.js within the Express framework

I've encountered a challenge in sending an array (or JSON object) from script.js to index.js, my express server file. I've explored various solutions such as passing the variable through an HTML file and then to another JavaScript file, utilizing ...

javascripthtmlnode.jsarraysexpress

Adding a dynamic form to each row in a table: A step-by-step guide

https://i.sstatic.net/HctnU.jpg Hey there! I'm facing a challenge with dynamically generated rows in a form. I want to send only the inputs from the selected row when a checkbox is clicked. Can you help me figure this out? I tried using let rowForm ...

javascriptphphtmljquery

Utilize PHPMailer to send pre-designed email templates

Apologies for the recurring queries. I'm still struggling to find a solution to this issue. Here's my Query: I have a form that allows users to choose between predefined and custom templates. The select option determines which template is displ ...

phphtmlemailtemplatesphpmailer

Effortless navigation through the document in both directions with seamless scrolling

To achieve a specific scrolling behavior on my webpage, I implemented the following function. Here is the code snippet: $(window).scroll(function(){ if ($(this).scrollTop() > 100) { $("html, body").animate({scrollTop: 700}, 500); re ...

javascriptjqueryhtmlcss

Difficulty establishing a connection between data in app.js and index.html using Ionic framework

Struggling with connecting index.html to get data for my Ionic mobile app. Any tips or guidance would be highly appreciated as I'm new to this! The goal is to display a list of restaurants in the app, utilizing Cards Images to showcase an image, logo ...

androidhtmlangularjsionic-framework

Issue with Jquery's dotdotdot.js plugin when handling text containing HTML components is causing malfunction

For my current project, I have incorporated dotdotdot.js to handle text truncation. However, after integrating a rich-text editor (tinymce), some HTML elements like p, a, b, i, etc., have been added to the text. Unfortunately, dotdotdot is now not behaving ...

jqueryhtmlellipsisdotdotdot

Ensure that the HTML input only accepts numbers and email addresses

Is there a way to restrict an HTML input field to only accept numbers and email IDs? <input id="input" type="text" /> ...

javascripthtml

How can I switch between different images using jQuery?

HTML <div class="image_rollover"> <img id="image_one" src=image_one.png"> <img id="image_two" src="image_two.png"> <img id="image_three" src="image_three.png"> <img id="image_four" src="image_four.png"> ...

javascriptjquerycss

Ensuring smooth video playback on a website

My website is experiencing issues due to a large mov file that's 157 megabytes. When I try to run it on my page using a javascript scroller animation, the animation becomes choppy. Additionally, I used css to simulate a mask, but it doesn't get m ...

htmlvideoflashmov