Tips for showcasing two pieces of content next to each other across the entire webpage using a combination of Bootstrap, CSS, and Laravel

I am facing a challenge with displaying two contents side by side on a full page and stacking them vertically when the screen size is small (mobile). I have managed to achieve the side by side display on a full page, but they stack on top of each other on small screens.

In my master.blade file, I have included both contents using:

@yield:

<footer>
  <div class="container">
    <hr>
    <div class="row">
      <div class="col-md-12">
        <p class="text-center" style="font-size: 20px;">MyHero &copy; {{ date('Y') }} </p>
      </div>
      @yield('map') // content 1
      @yield('Contact') // content 2
    </div>
  </div>
  <br><br><br>

</footer>

For the section ('map'), my CSS is as follows:

<div class="map" style="height:300px;width: 500px;display: block; float: left;">

For the section ('contact'), my CSS is:

@section('Contact')

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 <div class="cont" style="height:300px;width: 500px; display: block; float: right;">
jqueryhtmlcsstwitter-bootstraplaravel

Answer №1

Are you referring to this specific setup?

In essence, I have enclosed your @yield() within a bootstrap's grid class, creating two columns on the page that stack below each other on medium devices and smaller screens.

Check out Bootstrap 3.3 Grid System Documentation

<footer>
    <div class="container">
        <hr>
        <div class="row">
            <div class="col-md-12">
                <p class="text-center" style="font-size: 20px;">MyHero &copy; {{ date('Y') }}</p>
            </div>

            <div class="col-md-6">
                    @yield('map') / content 1
            </div>
            <div class="col-md-6">
                    @yield('Contact') / content 2
            </div>

        </div>
    </div>
    <br><br><br>

</footer>

Answer №2

Consider utilizing flexbox for a responsive layout. With flexbox, the divs will adapt based on the available viewport width. It's always recommended to define your styles separately rather than using inline styles.

.row {
  display:flex;
  flex-wrap:wrap;
}

.map, .cont {
  flex-grow: 1;
  height:300px;
  width: 500px;
}
    <div class="container">  
        <hr>
        <div class="col-md-12" > 
                <p class="text-center" style="font-size: 20px; " >MyHero &copy; {{ date('Y') }} </p>
            </div> 
        <div class="row"> 
            


                    <div class="map">content 1
                    
                    </div>
                    <div class="cont">
                    content 2
                    </div>


        </div>

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

Show the bottom left quarter of the image in an HTML display

Currently, I am still new to HTML coding and experimenting with displaying specific sections of an image. The current code I have is this: <img id="theImg" style="width:100%;" src="https://'myimage.jpg'" /> I'm struggling to figure o ...

htmlcss

Guide on importing a custom CSS file from Syncfusion Theme Studio into an Angular project

Is there a way to incorporate custom scss files downloaded from Syncfusion Theme Studio into Angular CLI without adding the URL to the styles section in angular.json? Can we directly import it into styles.scss instead? I attempted to do so by including th ...

cssangularej2-syncfusion

Issue with event binding on datepicker that is dynamically added is not functional

I have integrated the Kendo datepicker into my project, and I am facing an issue with duplicated div elements containing datepickers. The problem is that the datepicker events only fire once on the first duplicated div and then stop working altogether. I ...

javascriptjquerykendo-uikendo-datepicker

The anchor tag <a> is configured for inline display but is unexpectedly occupying the entire space

I am currently incorporating Bootstrap into my HTML, however, the <a> tag is behaving like a block display despite the fact that I have specified the CSS to be display:inline; <!doctype html> <html> <head> <link rel="styleshee ...

htmlcsstwitter-bootstrap

Animate a dotted border with CSS

How can I make a text block with a dotted style border move like a gif image using CSS at runtime? ...

cssborder

What's the best way to send a message back to AJAX along with a code from PHP?

Hi everyone, I'm facing an issue with my AJAX function that calls a PHP URL using the html data type. Unfortunately, I can't use other datatypes for my AJAX requests because of server restrictions. I am trying to display a message and handle dif ...

phpjqueryajax

Using jQuery Backstretch to generate a stunning image slideshow from the src attributes of images

I am utilizing the slideshow feature of jQuery Backstretch on my website. My plan is to use this functionality on multiple pages, each with its own unique set of images. To streamline the process, I believe it would be more efficient to extract the image s ...

jqueryarraysjquery-backstretch

Second attempt at initiating Ajax request fails

My ajax/php structure works perfectly when selecting one image. However, if I click on "selecteer" to perform the same code for the second time, no images are displayed. The "ajax" page loads correctly each time. Here's the setup: Article page: Disp ...

javascriptphpjqueryajax

An AJAX event handling function returns a null value upon invocation

Recently, I've been working on a function named 'getAuthor' which includes an AJAX event. Here's the code snippet: function getAuthor(id){ $.get('http://www.connectnigeria.com/articles/wp-json/wp/v2/users/74',function(e){ ...

javascriptjqueryajax

What issue can be identified in this HTML/CSS code?

Here is the code snippet I am working with: http://jsfiddle.net/7jGHS/1299/ This is the HTML code: <div class="text1"><h2><span>THIS IS A TEST</span></h2> <p>1800 - 1570 - 000</p> <h2><span>T ...

htmlcss

Placing one element beside another element

I am facing an issue with my layout where I have a list taking up 100% of the height and next to it, I am attempting to place an image box. Here is the fiddle link for reference: https://jsfiddle.net/wrdvkgyj/ Even after setting my image container to inl ...

htmlcss

Number entered isn't visible in Bootstrap modal window

Can anyone help me troubleshoot why the value "APno" is not appearing next to "Appointment Number" in a Bootstrap modal despite the modal showing up? This is my code: Form <form method="POST> Appointment Number:<br> <input type="n ...

javascripthtmlbootstrap-modal

What is the best way to utilize jQuery to expand an HTML form?

For my new web application project, I am working on a feature that allows users to create messages with attached files. Check out this image for multiple HTML file inputs using jQuery: http://img39.imageshack.us/img39/4474/attachments.gif One of the func ...

jqueryhtml

What is the best way to eliminate the blue-box-fill when buttons are clicked?

Check out this screen recorded gif on my device showcasing the blue-box-fill I'm referring to: https://i.stack.imgur.com/ajr2y.gif I attempted the following solution: * { user-select: none; -webkit-user-select: none; /* Safari */ -khtml-user-s ...

css

Leveraging webpack for CSS bundling

I'm currently working on bundling some NPM modules using webpack instead of utilizing a CDN. While I've successfully managed to integrate the .js files, I'm facing challenges with including the .css files for these modules. One example is ...

javascriptcssnode.jsnpmwebpack

Navigate back to a previous page on a PHP website

I am working on a PHP program and need help figuring out how to go from page 2 back to page 1 using a button. I tried creating a button on the second page with a value of 1, but it resulted in an error for the user. Can someone guide me on how to achieve ...

phphtmlmysqlxampp

Styling Angular Datatables with CSS

i have data on the front end https://i.stack.imgur.com/2xq7a.jpg i need all check marks to be displayed in green color. Below is the code snippet: $scope.dtColumnsCal= [ DTColumnBuilder.newColumn('name').withTitle('Name') ...

cssangularjsdatatables

Change the parent's color when the child is hovered over

head has no background and the color is black. On mouseover, its color changes to white with a black background, so far so good but When I hover over content, I want to change the color of head. How can I achieve this? Is it possible using only CSS? < ...

htmlcsshtml-listsonmouseover

Enhancing URLs with jQuery/AJAX: A Comprehensive Guide to Adding Parameters

Whenever I try to use the get method on an HTML form, the submitted data automatically appears in the URL. You can see what I mean here. Interestingly, when attempting to achieve the same result with JQuery and AJAX using the get method, the data doesn&apo ...

phpjavascriptjqueryhtmlajax

Bidirectional updates in AngularJS with CSS styling

On the backend, certain HTML elements store their position and size persistently and retrieve them when the page loads. These elements can be dragged and resized by users, with any updates needing to be saved on the backend for consistency across sessions. ...

javascriptjquerycssangularjs