Design a Fullwidth Container-Fluid with 2 Columns in Bootstrap

I'm attempting to create two columns with 100% width using Bootstrap 3 framework, but I'm experiencing some padding between the right and left positions.

In my code, the left column will display a Google map, and the right side will feature a contact form.

How can I remove this padding to achieve a full-width row?

Below is my current code:

<section id="contact">
<div class="container-fluid">

    <div class="row">
     </div class="col-md-6"> ... </div>
     </div class="col-md-6"> ... </div>
    </div>

</div>
</section>

Desired Output:

--------------------------------
              |                     
              |
              |
              |
--------------------------------
htmlcsstwitter-bootstrap-3

Answer №1

It appears that you are referring to this:

#contact > .container-fluid > .row > div { border: 1px dashed #ddd;}

#contact > .container-fluid > .row > div:first-child { padding-right: 0;}

#contact > .container-fluid > .row > div:last-child { padding-left: 0;}
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
</head>
<body>
<section id="contact">
<div class="container-fluid">

    <div class="row">
     <div class="col-xs-6"> map </div>
     <div class="col-xs-6"> contact form </div>
    </div>

</div>
</section>
</body>

Answer №2

If you're looking to create a layout using Bootstrap, check out this helpful link:

Interactive Contact Form with Google Map

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

Ways to apply a box shadow exclusively to specific elements

Is there a way to apply a box-shadow to a div without it affecting specific other divs? In simpler terms, is it possible to prevent shadows from being cast on a particular div? Take for example this scenario: http://jsfiddle.net/Cd6fE/ How can I prevent ...

jquerycss

monitoring the HTML code post-editing

After using jQuery, I made modifications to the HTML source code by adding several text fields. However, when I check the page source in Google Chrome, it still shows the original source code. Is there a method to view the updated HTML code? ...

htmlgoogle-chrome

Creating a visual feast: A guide to crafting a stunning image gallery

Is there a way to ensure all the pictures in a table are the same size, orientation, and inline? Currently, my images vary in size and rotation. The CSS I have applied is styling only the first image differently from the rest. Any help is appreciated! CSS ...

htmlcss

Designing dual navigation bars with Bootstrap 4

Is it possible to achieve two different navbars using Bootstrap 4.3.x as shown in the image below? The first navbar (with "Sample Brand") fixed at the top, and the second navbar scrollable. https://i.sstatic.net/mmm0P.png I'm not certain if there i ...

htmlcsstwitter-bootstrapbootstrap-4

"Utilizing AngularJS to interact with external API endpoints without using

Can you explain why I am unable to access $scope.auditorium outside the $http method, while I can access other $http objects (e.g. $scope.exhibition) in another $http ($scope.auditorium)? Through concatenating both scopes at the end using $scope.combine C ...

javascripthtmlangularjs

What makes Firefox so much speedier than Chrome when it comes to loading hefty documents?

Currently, I am facing an issue with slow loading times for custom HTML build reports on Google Chrome. It takes a significantly longer time to load compared to Firefox. Approximately 5 seconds on Firefox versus 110 seconds on Google Chrome (measured usi ...

htmlgoogle-chromefirefoxpage-load-timeload-time

Having Trouble with the Background Video Scaling on My HTML Bootstrap Page for Mobile Devices

I have been working on an HTML background video page, and everything seems to be working perfectly on desktop. However, when it comes to mobile, the video does not cover the full screen. Only half of the video is visible on the mobile screen. Here is the ...

htmlcssbootstrap-4

Override the default HTML style overflow to hidden with Material UI Swipable Drawer

Currently, I'm utilizing the Material UI SwipableDrawer component which has an unexpected drawback of causing the scrollbar to disappear when the drawer is displayed. This issue overrides my specified style of "overflow-y: scroll" on the Html tag and ...

javascripthtmlcssreactjsmaterial-ui

Why does the appearance of my PHP spreadsheet change when I attempt to print it?

After using a CSS stylesheet to position my textboxes correctly, I noticed that in Chrome everything appeared fine. However, when attempting to print the site (Ctrl+P), each sentence and textbox shifted. How can I ensure they remain in place? <!-- #cap ...

phpcssprinting

What's the best way to ensure uniform card height in Material-UI?

Is there a way to ensure consistent card height in Material-UI without setting a fixed height? I want the card heights to dynamically adjust based on content, with all cards matching the tallest one on the website. How can this be achieved while also addin ...

cssreactjsmaterial-ui

Is it possible to implement a unique style exclusively for my application's components?

Recently, I've been trying to apply a universal style rule to my entire app similar to this: div { width: 100%; } At first, everything seemed to be working perfectly. However, when I began integrating third-party components that have their ow ...

cssstyled-componentsshadow-dom

The jQuery script is functioning flawlessly in one specific direction

Currently, I am utilizing a basic script to alter the color of elements based on the div being hovered over. While this works smoothly in one direction down the line, when trying to reverse order and backtrack, the colors do not function as intended. The ...

javascriptjqueryhtmlcss

How can we show pictures when a user clicks?

After creating a model for displaying images in a modal when clicked by the user, I encountered an issue. Whenever I try to access the images from the gallery within the modal content, it only displays a blank popup. I want the pictures from the image gall ...

javascripthtmlcssmodal-dialogshopify

ways to halt a noise once an animation is complete

I don't have much experience with coding in general, but somehow I've made it this far. Now I'm stuck on the final piece of the puzzle. This is related to a Twitch alert that I'm setting up through 'Stream Elements'. The iss ...

javascripthtmljquerycsshtml5-video

Testing the Limits of CSS Hover

I'm having trouble figuring out how to implement this. When hovering, a yellow square/background should appear with an offset similar to the one in the image below. I am utilizing bootstrap for this project. Any assistance or guidance would be greatl ...

javascripthtmlcssuser-interfacebootstrap-4

How to dynamically show a specific div from JSONP retrieved via whateverorigin.org

Looking to retrieve the whois information for specific websites and showcase it on my website has been a bit of a challenge. While I've managed to make it work, I believe there might be a more efficient way to achieve this. Here's how I currently ...

jqueryhtmlajaxcross-domainjsonp

Position image in the center with two lines of text that adjust gracefully based on screen size

I am struggling to position an image alongside two lines of centered text. Currently, the image appears to the left of the text in my example, but what I really want is for the image to be centered with respect to the text and have a perfectly aligned imag ...

htmlcss

Unable to extract all elements using simple HTML dom when parsing RSS feed

I've been attempting to extract various details like titles, descriptions, links, images, and dates from an RSS feed located at . However, for some reason, I am unable to retrieve the link tag and image source within the feed. The rest of the data ext ...

phphtmlrss

Establishing a connection between HTML and MySQL database

I've been researching how to create a login system on my HTML page. From what I've learned, it seems I need to use an intermediate script to allow my HTML access to the database. So, I've created a PHP page that verifies the username and pas ...

phphtmlajax

Inspecting element value on a website

On a marketplace website, I extracted the attribute (capacity_gold) from a table. Since the values are dynamic and constantly changing, I aim to develop a basic script that will notify me when the attribute value exceeds 100. The current value of the attr ...

javascripthtml