how to make text followed by a rectangle box filled with color html css with responsive

How to make text followed by a rectangle box filled with color html css with responsive

To create text followed by a rectangle box filled with color in HTML and CSS that is responsive, you can use the following approach:

HTML Structure

<div class="container"> <div class="text-with-box"> <span class="text">Your Text Here</span> <div class="color-box"></div> </div> </div>

CSS Styling

.container { max-width: 100%; /* Adjust as needed */ padding: 20px; } .text-with-box { display: flex; align-items: center; } .text { margin-right: 10px; /* Adjust spacing between text and box */ font-size: 16px; /* Adjust font size as needed */ font-weight: bold; /* Adjust font weight as needed */ } .color-box { width: 50px; /* Adjust width of the color box */ height: 20px; /* Adjust height of the color box */ background-color: #3498db; /* Adjust background color */ }

Explanation

  1. HTML Structure:

    • Use a <div> with class .container to contain your content.
    • Inside .container, use another <div> with class .text-with-box to hold the text and the colored box.
    • Use a <span> with class .text for the text content.
    • Use a <div> with class .color-box for the colored rectangle.

  2. CSS Styling:

    • .container ensures the content is responsive within its maximum width.
    • .text-with-box uses flexbox to align the text and the box horizontally.
    • .text styles the text portion.
    • .color-box styles the colored box:
      • Adjust width and height to set the dimensions of the box.
      • Modify background-color to change the color of the box.

Making it Responsive

To ensure responsiveness, adjust the CSS properties such as max-width of .container and use relative units like percentages or vw (viewport width) for sizing elements. Media queries can also be employed to adjust styles for different screen sizes.

Example with Responsive Consideration

.container { max-width: 100%; padding: 20px; } .text-with-box { display: flex; align-items: center; } .text { margin-right: 10px; font-size: 16px; font-weight: bold; } .color-box { width: 50px; height: 20px; background-color: #3498db; } @media (max-width: 768px) { .color-box { width: 30px; height: 15px; } }

In this example, the .color-box dimensions are adjusted using a media query for screens with a maximum width of 768 pixels, making the design responsive and adapting to smaller screen sizes.

Adjust the dimensions, colors, and other styles according to your specific design requirements. This setup ensures that the text and the colored box maintain their layout and responsiveness across different devices and screen sizes.

Examples

  1. Creating a Text with Colored Rectangle Using CSS

    Description: Displaying text followed by a rectangular box filled with color using CSS, ensuring responsiveness.

    <div class="container"> <p>Text followed by a colored box</p> <div class="colored-box"></div> </div> 
    .container { display: flex; align-items: center; justify-content: flex-start; } .colored-box { width: 50px; /* Adjust width as needed */ height: 30px; /* Adjust height as needed */ background-color: #3498db; /* Replace with desired color */ margin-left: 10px; /* Adjust spacing */ }

  2. Using Flexbox to Align Text and Colored Box

    Description: Aligning text and a colored box side by side with Flexbox for responsiveness.

    <div class="container"> <p>Text followed by a colored box</p> <div class="colored-box"></div> </div> 
    .container { display: flex; align-items: center; justify-content: flex-start; } .colored-box { width: 50px; /* Adjust width as needed */ height: 30px; /* Adjust height as needed */ background-color: #e74c3c; /* Replace with desired color */ margin-left: 10px; /* Adjust spacing */ }

  3. Using CSS Grid for Text and Colored Box Layout

    Description: Creating a layout with text and a colored box using CSS Grid for responsiveness.

    <div class="container"> <p>Text followed by a colored box</p> <div class="colored-box"></div> </div> 
    .container { display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 10px; /* Adjust spacing */ } .colored-box { width: 50px; /* Adjust width as needed */ height: 30px; /* Adjust height as needed */ background-color: #2ecc71; /* Replace with desired color */ }

  4. Using Inline-Block for Text and Colored Box

    Description: Using display: inline-block; to align text and a colored box with responsive behavior.

    <div class="container"> <p>Text followed by a colored box</p> <div class="colored-box"></div> </div> 
    .container { white-space: nowrap; /* Prevent text wrapping */ } .container p, .container .colored-box { display: inline-block; vertical-align: middle; } .colored-box { width: 50px; /* Adjust width as needed */ height: 30px; /* Adjust height as needed */ background-color: #f39c12; /* Replace with desired color */ margin-left: 10px; /* Adjust spacing */ }

  5. Using CSS Grid with Auto Placement

    Description: Implementing text and a colored box using CSS Grid with automatic placement for responsiveness.

    <div class="container"> <p>Text followed by a colored box</p> <div class="colored-box"></div> </div> 
    .container { display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 10px; /* Adjust spacing */ } .colored-box { width: 50px; /* Adjust width as needed */ height: 30px; /* Adjust height as needed */ background-color: #9b59b6; /* Replace with desired color */ }

  6. Using Positioning for Text and Colored Box

    Description: Using absolute or relative positioning to place text and a colored box with responsive adjustments.

    <div class="container"> <p>Text followed by a colored box</p> <div class="colored-box"></div> </div> 
    .container { position: relative; } .container p { position: absolute; left: 0; top: 50%; transform: translateY(-50%); } .colored-box { position: absolute; left: 100px; /* Adjust position as needed */ top: 0; width: 50px; /* Adjust width as needed */ height: 30px; /* Adjust height as needed */ background-color: #1abc9c; /* Replace with desired color */ }

  7. Using CSS Flexbox for Centering Text and Colored Box

    Description: Centering text and a colored box using Flexbox for responsive alignment.

    <div class="container"> <p>Text followed by a colored box</p> <div class="colored-box"></div> </div> 
    .container { display: flex; align-items: center; } .colored-box { width: 50px; /* Adjust width as needed */ height: 30px; /* Adjust height as needed */ background-color: #34495e; /* Replace with desired color */ margin-left: 10px; /* Adjust spacing */ }

  8. Using CSS Grid with Responsive Column Layout

    Description: Using CSS Grid to create a responsive column layout for text and a colored box.

    <div class="container"> <p>Text followed by a colored box</p> <div class="colored-box"></div> </div> 
    .container { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 10px; /* Adjust spacing */ } .colored-box { width: 50px; /* Adjust width as needed */ height: 30px; /* Adjust height as needed */ background-color: #95a5a6; /* Replace with desired color */ }

  9. Using Flexbox with Fixed and Fluid Widths

    Description: Combining fixed and fluid widths using Flexbox for text and a colored box.

    <div class="container"> <p>Text followed by a colored box</p> <div class="colored-box"></div> </div> 
    .container { display: flex; align-items: center; } .colored-box { flex: 0 0 50px; /* Fixed width */ height: 30px; /* Adjust height as needed */ background-color: #e67e22; /* Replace with desired color */ margin-left: 10px; /* Adjust spacing */ }

  10. Using Media Queries for Responsive Design

    Description: Implementing text and a colored box with responsive design using CSS media queries.

    <div class="container"> <p>Text followed by a colored box</p> <div class="colored-box"></div> </div> 
    .container { display: flex; align-items: center; } .colored-box { width: 50px; /* Adjust width as needed */ height: 30px; /* Adjust height as needed */ background-color: #27ae60; /* Replace with desired color */ margin-left: 10px; /* Adjust spacing */ } @media (max-width: 768px) { .colored-box { width: 30px; /* Adjust for smaller screens */ height: 20px; /* Adjust for smaller screens */ } }

More Tags

kdiff3 text-widget activemq-classic getstring apache-kafka shellexecute ghost4j statistics multi-module pyqt5

More Programming Questions

More Mortgage and Real Estate Calculators

More Chemistry Calculators

More Livestock Calculators

More Date and Time Calculators