Adding space to the right side of a row

I'm currently in the process of designing with Twitter Bootstrap 2 (responsive). This design consists of a header, left sidebar, content area, and footer.

Here is the basic code structure I am working with - take a look at http://jsfiddle.net/w4yh9/3/

The key section to focus on is:

<div id="inner" class="span10">
...
</div>

Please refer to the highlighted yellow area in the attached screenshot:

I have a specific question or issue: How can I add padding to the right side for all content elements (success message, content, table) that will also be effective on smaller screens?

csstwitter-bootstrap

Answer №1

To create some breathing room, I suggest adding padding to the parent container and setting box-sizing: border-box. Take a look at my CodePen example: http://codepen.io/example/456/

#container {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    background: #FFF;
    border-radius: 8px;
}

.inner-content {
    padding: 15px;
    box-sizing: border-box; 
}

Answer №2

If you're looking to adjust the width of #main, one option is to add some padding with the following code:

#main {padding-right:5px}

However, be cautious as this may result in #main being wider than desired.

In such a scenario, you can try the following solution:

#main > div { width:98%; }
#main > .navbar {width:100%; }

This will set the width of all child divs within #main to 98%, and then you can customize specific children elements that need to be full-width.

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

Verify the presence of a mouse before attempting to hover

Is there a way to determine if the user has a cursor to hover over elements using JavaScript, while also utilizing Bootstrap? if (hasCursor()) { doCode(); } I initially attempted to check if it was a touch device, but faced limitations testing on my 2- ...

javascripthtmlcssbootstrap-5

Mysterious purple squares mysteriously popping up around elements in a WordPress website utilizing CSS Bootstrap 4

While browsing certain websites on specific browsers that utilize Bootstrap 4 as a framework within a WordPress site, I've noticed some elements displaying strange purple squares when visited. Any ideas on the cause of this issue and how it can be res ...

htmlcsswordpressbootstrap-4web-frontend

Conceal or eliminate step titles within the angular-archwizard step

Currently, I am working with angular-archwizard and facing an issue. In the image attached (PFA: image), I do not want the stepTitles to be highlighted or displayed at all. I have attempted to pass a blank string in the "stepTitle" field but unfortunately, ...

cssangular

Paged Content: Turning a Lengthy Text into a Book-Like Format

I have a unique idea for displaying text like a flipping book on a web page. Users can use arrow keys to navigate through the content, giving it an interactive and engaging feel. Instead of focusing solely on page transitions, I am looking into implementi ...

phpjqueryhtmlcsspagination

Troubleshooting Bootstrap 4 Fixed Column Overlapping Issues when Resizing

I have a website created using Bootstrap 4 and PHP that features two columns: Left Column - with a fixed position Right Column - designed to scroll While the columns appear correctly on a desktop browser (as seen in image 1), on mobile devices the "Left ...

phptwitter-bootstrapbootstrap-4

I need help converting the "this week" button to a dropdown menu. Can someone assist me in troubleshooting what I am missing?

Seeking assistance with customizing the "this week" button on the free admin dashboard template provided by Bootstrap 4. Looking to turn it into a dropdown feature but unable to achieve success after two days of research and watching tutorials. See code sn ...

javascriptjquerycssbootstrap-4

Trouble arises when attempting to bind a JavaScript event with an innerHTML DOM element

I am currently dealing with a complex issue on how to bind a JavaScript event to an innerHTML DOM element. The scenario involves having a div with an input checkbox inside it, along with some pre-existing JavaScript event bound to that checkbox. Additional ...

javascriptjqueryhtmlcssdom

Tips for eliminating white frames or borders on the Mapbox canvas map

In my current project using Angular 10, I have integrated Mapbox to display path routes. Following the standard Angular practice of splitting components, I separated the map rendering component and called it into the main map component. However, I encounte ...

cssangularmapboxmapbox-gl-js

Mobile Safari is having troubles loading CSS

After a long time of using in-line CSS directly on the page, I finally decided to consolidate it all into one file for my own sanity. Initially, I attempted the standard <link rel="stylesheet" href="URL"> approach and it loaded successfully, alt ...

phphtmlcsssafarimobile-safari

Styling the sub-elements using CSS in JavaScript

Currently, I am dealing with two CSS classes: .dragbox and .removebutton. The .dragbox represents a div, while the .removebutton is a button nested within the div. On my page, there are multiple dynamically generated instances of .dragbox. I am seeking ...

javascriptcss

Activate the button to effortlessly load pages with a visually engaging animation

I have been facing a problem for the past couple of days. I need help with achieving a specific functionality on my website. When button1 is clicked, I want to load the page in a div class named "loadpage" with an animation coming from the left. Similarl ...

jquerycssajaxhtml

The getimagesize functionality seems to be malfunctioning

I have developed a function that resizes images to fit as a background image for a div. I provide the function with the div size and the image path. It works perfectly when the height is larger than the width, but it fails when the width is larger than the ...

phphtmlcss

Is it possible for CSS div to have a height of 100% when placed within fluid parents

When the parent div's height is set to 100%, you can also set the child to 100% and it will function correctly. However, if the parent's height is determined by its content, the height attribute does not work as expected. Are there any effective ...

css

Aligning text in a vertical progress bar using absolute positioning

Currently, I am trying to create a health bar-like element but I am facing difficulties in centering the text within it. Despite exhausting all my options, the text is either off-center when its length changes or extends beyond the borders of the bar. Her ...

htmlcss

Can a CSS <div> element have margins applied to it?

Can a margin be defined for a text area? My WYSIWYG editor wraps my text within <div> tags instead of using line breaks <br /> So I was thinking of adding a margin to the <div> tag? Is this possible in CSS? If so, how can it be done? ...

htmlcssxhtml

The sizing of the SVG element does not dynamically adjust when the window is resized

There appears to be a peculiar issue with the sizing of the rect inside the svg element when the page initially loads. Even when resizing the window, which should resize the svg as well, the width of the rect remains unchanged. However, toggling off and on ...

htmlcsssvg

What is a better method for aligning an image in the middle of a floated container?

Is there a better way to center an image within a floated div without using an extra p tag? I currently have the image inside a p tag and center the p, but it annoys me having that extra tag. Any suggestions on how to center the image itself? Thanks! Below ...

htmlcsscss-floatcentering

What is a way to center content vertically without using extra containers?

I've been facing challenges in vertically aligning an item within its container. Despite trying multiple suggestions that advise wrapping the content in another div or container, I encountered various issues which I won't delve into. Therefore, ...

htmlcssflexbox

What can be done to address the problem of background-image opacity making text difficult to read?

I am having an issue with the background. I am aiming for something similar to what is shown in screenshot 1, but instead, I am getting the result shown in screenshot 2. Where could the problem lie? html, body, .bg-for-1 { height: 100%; } .bg-for-1 ...

cssbackground-imageopacity

Ways to achieve varying border widths among multiple divs that are linked to text size

Hey there, I'm looking to make some changes to the UI of my game. I want to transform it from this: https://i.sstatic.net/iLpFY.jpg To this (which is an edited version using paint.net of the previous image): https://i.sstatic.net/qudVm.jpg <html& ...

htmlcss