How can I place two divs side by side with borders in Bootstrap 3?

I am facing a challenge with aligning some text next to a Twitter button while ensuring that they are all lined up neatly within borders. The issue I encountered is that the text div shrinks and floats to the upper left corner along with its borders, unlike the button which is properly aligned thanks to Bootstrap. Both the text and button divs have padding or margin issues preventing the borders from forming a rectangle with a clear border line between them.

What I envision:

The 1px grey borders should be equal on all sides, but due to difficulties with my touchpad, this was not achieved.

This is my current setup:

                             <div class="mydiv">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="col-sm-6">
                                            <div class="textdiv">
                                                 Text!
                                            </div>
                                        </div>

                                        <div class="col-sm-6">
                                            <div class="btndiv">    
                                                <a class="btn" href="#">Button!</a>
                                            </div>
                                        </div>
                                    </div>

                                </div>

                            </div>

CSS:

 .textdiv {
         border-top: 1px solid #DDDDDD;
         border-left: 1px solid #DDDDDD;
         border-right: 1px solid #DDDDDD;
         border-bottom: 1px solid #DDDDDD;
         margin: 0 auto;
    }
    .btndiv {
         border-top: 1px solid #DDDDDD;
         border-bottom: 1px solid #DDDDDD;
         border-right: 1px solid #DDDDDD;
    }
    .mydiv {
         width:30%;
    }
csstwitter-bootstraphtmltwitter-bootstrap-3

Answer №1

Website Building

<div class="mydiv">
    <div class="row">
        <div class="col-md-12">
            <div class="col-sm-6">
                <div class="textdiv">Text!</div>
            </div>
            <div class="col-sm-6">
                <div class="btndiv"> <a class="btn" href="#"> Button!</a>

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

CSS Styling

.row {
    width:250px;
    margin:0px auto;
    border:1px solid black;
    height:75px;
    background-color:#f2f2f2;
}
col-sm-6 {
    width:200px;
    margin:0px auto;
    text-align:center;
}
div.textdiv {
    border:1px solid #9a9a9a;
    background-color:Aqua;
    padding:5px;
    color:black;
    font: bold 16px arila;
    width:100px;
    float:left;
    text-align:center;
    margin-left:10px;
    margin-top:25px;
    margin-right:3px;
}
div.col-sm-6 a {
    border:1px solid #9a9a9a;
    margin:0px auto;
    background-color:Aqua;
    color:black;
    text-decoration:none;
    font: bold 16px arila;
    width:100px;
    padding:5px;
    margin-left:3px;
    margin-right:10px;
    margin-top:25px;
    float:right;
    text-align:center;
}

View Working Demo

Result:

Answer №2

I have recently implemented some changes to improve the padding on certain elements. Feel free to check out the updates in action by visiting this fiddle: http://jsfiddle.net/WNPRA/1/

I introduced a new class to address specific issues and tidied up the CSS for better organization.

div.no-padding {
    padding: 0;
}

div.textdiv {
    padding: 7px 12px 7px 12px ;
    text-align: center;
}

Please ignore the col-xs-6 classes I included, as they are solely for demonstration purposes in the fiddle.

Answer №3

How about trying this suggestion:
http://jsfiddle.net/creativeminds/y32hk/

Your HTML code is quite similar to the one provided, with a small tweak of wrapping the text div block in a .btndiv class for better border display. Additionally, I assigned the btn class to your .textdiv element to match the bootstrap styling of the btn link. Lastly, I included 

.textdiv{
cursor:default;
}

to ensure that the cursor remains as the default arrow when hovering over the text block.

Best of luck!

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

Appearance template failing to load

After setting up a local website on a new IIS server 8, I encountered an issue where the style sheet was not loading properly. The master page is referencing the style sheet like this: href="/HeadOffice/Styles/HeadOfficeCalendar.css" For example: <l ...

cssasp.netiis

The HTML5 range input is consistently defaulting to the minimum value and is not triggering the onChange event for text input

My goal is to implement a feature where an input type text is used along with an input type range with three specific use cases: 1. Default case: When the page loads, the slider should point to the value specified in the text input field. 2. When a user e ...

javascriptreactjshtmlrangeinput-type-range

Do attributes from our Angular app's <head> and <meta> tags get inherited by asynchronously pulled in HTML?

Within an Angular application, our index.html file contains a <head> tag where we define the charset: <head> <meta charset="utf-8"> </head> When a user navigates to a specific page, the component of that page makes an ...

javascripthtmlangularutf-8

How can I make a single <input> element that can handle both files and urls simultaneously?

Is there a way to enable my users to import both local and remote files using just one input field? A possible solution, inspired by Stackoverflow, is to implement tabs: Another approach could be using radio buttons like this: <style> .display ...

jqueryhtmlcssformsfile-upload

Pass data from the view to the controller in CodeIgniter using an array

Take a look at: user_data received from the controller (Database middleware values) <?php $ID['IDS'] = array_column($user_data, 'ID'); print_r($ID); // print_r($ID)=Array( [IDS] => Array([0] => 0 [1] => ABC ...

phphtmlcodeigniter

iframe failing to load link after initial attempt

As a beginner in using iframes, I have come across an issue that is puzzling me. I have a navigation bar and an iframe on my webpage. When I click on the "Search" link, it loads into the iframe without any problems and I can work within it. However, if I c ...

phphtmlcss

Calculating the combined size of various files using PHP

I'm having trouble figuring out how to upload multiple files with a single input and limit the total size of all files to less than 100 MB. Can someone help me with this issue? Below is the code that I currently have: <?php if(isset($_POST[&apos ...

phphtmlfileupload

Adjusting the starting position of text within an HTML <li> element

I am currently in the process of designing a webpage layout with three columns. I have a specific vision for how I want the text to align within these columns but I am unsure of how to achieve it. Is there a way to make the text start at an exact position, ...

htmlcsshtml-lists

Connect an EventListener in JavaScript to update the currentTime of an HTML5 media element

*update I have made some changes to my code and it is now working. Here's the link: I am trying to pass a JavaScript variable to an HTML link... You can find my original question here: HTML5 video get currentTime not working with media events javscr ...

javascripthtmlvideoevent-listener

Scrollable content with sticky positioning using CSS3 and JavaScript

I successfully implemented a sidebar using the position: sticky property and it is functioning perfectly. To identify colors in the following text, refer to the script below. When scrolling, the black area remains fixed while the green area sticks to its ...

javascriptjqueryhtmlcss

Switch the icon when clicking to expand the container div

Currently, I am experimenting with Jquery slideToggle using the tutorial found on the W3Schools website. I am interested in changing the + icon to a - icon when the Panel div is expanded. Can anyone provide me with guidance on the correct approach? I am i ...

jqueryhtmlcss

If you press Ctrl + F, the browser will disable the form search function

How can I prevent the form find browser functionality when pressing Ctrl+F, and instead focus on the element html? <div id='demo'> <form class="id5-text-find-form" id="id5-text-find-form"> <input class="search" placeho ...

javascriptjqueryhtmlcssbrowser

Using jQuery to load and parse a JSON file stored on a local system

I am a beginner in scripting languages and recently searched for ways to load and parse JSON files using jQuery. I found helpful resources on Stack Overflow. The JSON file I am working with is called new.json. { "a": [ {"name":"avc"}, ...

javascriptjqueryhtmljson

The problem arises when the body/html element is narrower than the browser window

I encountered a strange issue while working on a website for a client/design studio. Despite setting the body and html elements to a width of 100%, I noticed that when I resize the browser, a scrollbar appears forcing me to scroll right. Upon scrolling, I ...

htmlcss

The text color is being influenced by the transparent background behind it

I have a box with a transparent background color. Below is the CSS and HTML code that I'm using: CSS: #box { color: black; text-align: center; margin: 50px auto; background: blue; opacity: 0.1; border-radius: 11px; box-sh ...

htmlcsstransparencyopacity

How can I achieve text truncation in a React input using Tailwind CSS, ensuring that the input container maintains its original size?

Utilizing Tailwind CSS in conjunction with React, I have implemented the following input component: <input type="text" id="username" name="username" className="rounded-md ml-3 pl-1 outline-0" /> When t ...

cssreactjsformsinputtailwind-css

Useragent-dependent styling conditions

How can I select the appropriate stylesheet based on the useragent? For instance, I would like to display a specific css style for Android and another for iPhone. Is it achievable using only css? Can media queries be utilized? Appreciate any help in ad ...

javascripthtmlcss

Encountering issues with the phaser framework while setting up a server on xampp, faced with errors in javascript and html

Recently, I've been working on a game using Phaser and encountered some issues while trying to run the code in XAMPP. The game's base is located at htdocs/itw/test.html, with the necessary pngs and json file stored in htdocs/itw/assets/. The pngs ...

javascripthtmlxamppphaser-framework

Maximizing the potential of Bootstrap slider within OpenCart

Has anyone attempted to use Bootstrap slide with the Opencart slideshow module? Here is my code, but I am getting all active classes. Can someone please help me with this? <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"& ...

phpjquerycsstwitter-bootstrapopencart

retrieving HTML elements from an AJAX call in C#

When I retrieve data from a database, I can display HTML elements without any issues. However, when I try to retrieve the same data using an ajax request, the HTML elements seem to be ignored. I am looking for a way to successfully retrieve HTML elements t ...

c#htmlajax